Letter spacing for headings: tighten large type, open small capitals, leave body alone
Fonts are spaced for reading sizes, so large headings usually look loose and benefit from slightly negative tracking, around -0.01em to -0.04em. Small text set in capitals goes the other way and needs a little extra, around 0.05em to 0.1em. Body text should almost always keep the font's own spacing. Set tracking in em so it scales with the text.
Why spacing changes with size
Type designers set the space around each letter for the sizes a font will mostly be read at, typically body text. At 16 pixels, those gaps help letters stay distinct. At 80 pixels, the same proportional gaps become visible holes, and a headline starts to look like a row of separate characters. In metal type, each size of a typeface was cut separately, with spacing adjusted by hand: tighter for big display sizes, looser for small ones. Digital fonts scale one design to every size, so that adjustment falls to whoever sets the type.
That adjustment is tracking: a uniform change to the spacing across a run of text. It's different from kerning, which adjusts specific pairs like "AV" and is built into the font. In CSS, tracking is the letter-spacing property.
A starting table
| Text role | Typical letter-spacing | Notes |
|---|---|---|
| Display headline, 64px and up | -0.03em to -0.045em | Heavier and larger type takes more tightening |
| Section heading, 30 to 52px | -0.01em to -0.03em | Often the same value as the headline, slightly less |
| Card or subheading, 18 to 24px | 0 to -0.01em | Barely any change |
| Body text | normal | Leave it to the font |
| Small labels in capitals | 0.05em to 0.12em | Capitals sit tight without lowercase shapes to separate them |
| Tabular numbers | normal | Use font-variant-numeric: tabular-nums for alignment instead |
These are starting points, not rules. Fonts differ: a narrow grotesque already tight at display sizes needs less, a wide geometric face more. Look at the headline at its real size, in its real colour, on a phone and a laptop, and adjust until the word shapes hold together without letters touching.
Negative letter spacing on headlines
- Use em, not px. MDN's letter-spacing reference shows how a fixed pixel value that looks right on large text looks wrong on small text.
-0.03emstays proportional when a fluid headline shrinks on a phone. - Stop before letters collide. Check pairs like "rn", which can read as "m", and round letters in bold weights.
- Pair it with tighter line height. A tightly tracked headline at a line height of 1.5 looks unbalanced; display type usually sits at 0.95 to 1.1. See big typography in web design.
- Don't tighten connected scripts. MDN notes that letter spacing breaks the joined letterforms of scripts such as Arabic, so leave it at normal for those languages.
Letter spacing for uppercase
Capitals are all the same height and have no ascenders or descenders, so words set in them lose their outline and the letters crowd together. A little extra tracking restores the gaps. The smaller the text, the more it helps: navigation links or a button label in small capitals can take 0.08em, a large all-caps headline may need none, or slightly negative.
There's a fashion problem here too. A tiny, widely tracked capital label over every section heading, sometimes called an eyebrow, has become one of the most common habits of generated pages. Used once, for a real category name, it's fine. Over every heading it adds noise and pushes the real heading down. Eyebrow text above headings looks at that habit in detail.
Body text and accessibility
Changing tracking on body text rarely improves it, and very large or very negative values make words harder to recognise. Accessibility runs the other way: WCAG's Text Spacing criterion asks that nothing is lost when a reader overrides spacing to at least 0.12 times the font size between letters, along with wider word, line and paragraph spacing. People with dyslexia and low vision use this. So the rule is: don't fight the font in paragraphs, and don't build layouts, such as fixed-height buttons or cards, that break when someone opens the spacing up.
Tracking in Anticode's design systems
Each of Anticode's seven design systems sets tracking per text role, in em. Headlines are tightened according to the system's character: about -0.045em in Swiss and Brutalist, whose heavy grotesque headlines run large, -0.035em in Editorial and Technical, -0.03em in Organic, -0.02em in Playful and only -0.01em in Luxury, whose light display type needs little help. Section headings follow the same value, and body text keeps the font's own spacing. Luxury is the system that uses wide-tracked capitals, for navigation, buttons and the footer, as part of its look.
The Critic flags a page where small spaced-capital labels sit over most of the headings, so an eyebrow on one section passes and one on every section doesn't. You can change the headline scale in the visual editor; tracking stays tied to the system.
Questions people ask
Should headings have negative letter spacing?
Large headings usually look better with slightly negative tracking, around -0.01em to -0.04em, depending on the font and size. Small headings rarely need it.
How much letter spacing for all caps?
For small capitals, around 0.05em to 0.12em. Large capital headlines need little or none.
Should letter spacing be in em or px?
Use em. It scales with the font size, so the spacing stays proportional across breakpoints and when people zoom.
Sources
- letter-spacing, MDN Web Docs, checked
- Understanding SC 1.4.12: Text Spacing, W3C, checked