Letter Spacing Rules by Font Size

Try a small experiment before reading any rules. Set the same word — “Hardware” works well — at 12px and at 64px in the same font, and look at the gaps between the letters instead of the letters themselves. At 64px the gaps have become visible shapes of their own, and the word reads slightly loose. At 12px the same letters seem to crowd each other. Nothing about the font changed — only the size.

That is the core rule of letter spacing (typographers call it tracking): it moves against font size. Large display text is tightened — negative values around −0.02em at 48px and above; body text is left alone, because fonts are already spaced for reading sizes; and small text, especially uppercase labels, is opened up — +0.05em or more. The rest of this article covers why the rule exists, how much to apply at each level of a scale, and which units to use. It’s part of our type scale guide.

Why does letter spacing depend on font size?

Every glyph in a font carries built-in space on either side — type designers call these sidebearings — tuned so that text sets evenly at the sizes the designer expected, typically reading sizes in the 9–14pt range. That spacing scales linearly with the font, but perception doesn’t scale with it. At display sizes the eye takes in the whole word at once, and the enlarged gaps start to register as shapes in their own right: the word reads loose. At very small sizes the same gaps shrink below what the eye needs to separate one stroke from the next: the word reads cramped.

In metal type this problem barely existed, because each physical size was cut separately, with its spacing adjusted for that size. A digital font is usually one outline, scaled — so the optical adjustment that used to be built into each size has to be reinstated by hand. Tracking is that reinstatement. (Some variable fonts now ship an optical size axis, opsz, that automates part of this — but it adjusts the letterforms and spacing the designer chose, and it’s still the minority of fonts in production use.)

How much letter spacing should each size get?

Here is a worked set of starting values on a common modular scale — 16px base, ratio 1.333, two notes per interval — covering the levels most systems carry:

Two things are worth noticing in the numbers. First, the absolute effects are tiny: at 51px, −0.02em removes about one pixel between each pair of letters — and that is enough to make the difference between airy and composed. Tracking is a seasoning, not an ingredient. Second, the values are starting points, not law: a geometric sans with open, even letterforms tolerates tighter display tracking than a serif with delicate joins, and condensed faces often want none at all. The direction of the rule is reliable; the exact amount is a judgment you make with your eyes.

See the pattern across a whole system: open this scale in Scale Composer — each level from caption to display carries its own letter-spacing value, tightening as the sizes grow. Nudge the tracking on any level and compare it against its neighbors.

Why does uppercase text need extra letter spacing?

Lowercase words have silhouettes: ascenders and descenders give “hardware” a skyline that differs from “software”. An all-caps word is a uniform rectangle — the skyline is gone, and the reader is left identifying the word letter by letter. Extra tracking makes each letter easier to isolate and identify, which is why small uppercase text — overlines, tags, button labels — conventionally gets +0.05em to +0.1em.

The same logic says what to avoid: negative tracking on small uppercase text works against the main recognition channel it has left. Tight caps can work at display sizes, where each letter is large enough to identify effortlessly, but at 11–12px, open them up.

Should letter spacing use em or px?

Use em. Tracking expressed in em is relative to the font size it’s applied to, so the proportion travels with the text: a label style with letter-spacing: 0.05em keeps the same visual openness whether the label renders at 11px or 13px. A pixel value is frozen — 1px of tracking that looks right at 12px becomes invisible at 24px and heavy-handed at 8px, and it has to be re-derived every time a size changes. On a scale, where sizes are generated rather than fixed forever, em is the unit that survives a retune.

In CSS the property is letter-spacing, and it has one subtlety worth knowing: the default value normal is not the same as 0. normal means the font’s built-in spacing plus permission for the browser to adjust gaps when justifying text; 0 forbids that adjustment. For left-aligned interface text the two render alike, but the distinction is one reason to leave body text at normal rather than “explicitly zero”.

This is also why tracking belongs inside a typography token rather than alongside it: a display style is its size, line height, weight and tracking together. Ship the size without the −0.02em and you haven’t shipped the style.

Test the rule on your own type

The fastest way to internalize size-dependent tracking is to watch it fail: open a display level tightened to −0.02em, then set the letter-spacing back to 0 and look at the headline again — the looseness you couldn’t name at first glance becomes obvious once you’ve seen the corrected version. Then try the opposite experiment on the overline: pull its +0.08em down to zero and watch the uppercase label congeal. Your own typeface will tell you the exact values; the direction of the rule will hold.