Letter Spacing & Tracking Guide
Fine-tune letter spacing for headlines, body text, and captions with size-based recommendations and a live preview. Copy CSS tracking values directly into your design system.
What this tracking guide does
This letter spacing guide shows tracking recommendations by font size with a live preview. Fine-tune letter-spacing for headlines, body text, and captions so type feels balanced at every scale.
How to use it
- Select or enter a font size to see recommended letter-spacing values.
- Type sample text and adjust tracking to preview the effect in real time.
- Compare tight tracking for large headlines vs looser spacing for small captions.
- Copy the CSS letter-spacing value into your component or design tokens.
- Read the Kerning, Tracking & Letterspacing chapter for when to adjust each property.
For deeper context, read the Kerning, Tracking & Letterspacing chapter in the Typography Master guide.
Frequently asked questions
- What is the difference between tracking and letter spacing?
- They are the same property in CSS (letter-spacing). Tracking is the typography term; letter-spacing is the CSS property name. Kerning adjusts individual letter pairs, while tracking adjusts spacing uniformly.
- What letter spacing should I use for body text?
- Body text at 16–18px typically needs 0 to 0.02em letter-spacing. Avoid positive tracking on small text — it reduces density and hurts readability.
- Should headlines have tighter letter spacing?
- Large display headlines often benefit from slightly negative letter-spacing (-0.02em to -0.05em) because big glyphs can feel too loose at default spacing.