Body Letter Tracking

Letter Tracking (Letter-Spacing)

Tracking sets one uniform amount of horizontal space between every letter in a block of text. In CSS that's letter-spacing, ideally with values in em. Kerning tweaks individual pairs; tracking works on whole runs at once. Because em is relative to the font size, letter-spacing: 0.05em stays in proportion whether the text sits at 12px or 72px.

A few rules of thumb on values. Big display headings usually want negative tracking, somewhere between -0.02em and -0.05em, to pull in the optical gaps that open up at large sizes. Body copy should stay neutral at 0. All-caps text, like buttons or a label reading “BUTTON”, calls for positive tracking of 0.05em to 0.1em, since uppercase letterforms look cramped at the default spacing.

Applications

You'll run into it in editorial design, brand identity work, UI button labels, packaging and print typography. Adobe InDesign and Illustrator count tracking in thousandths of an em, so a value of 50 there equals 0.05em. It shows up a lot in luxury branding and polished editorial layouts, where the rhythm of the letters is part of how the work signals craft.

FAQ

Why negative tracking on big headings? Blown up to display size, the gaps between letters look bigger to the eye than they do at body size. Tightening them back up keeps the heading reading as one solid unit.

What about small caps and lowercase? Lowercase almost never needs the adjustment. Small caps, on the other hand, read better with a touch of positive tracking (0.03–0.05em), much like all-caps.

em or px for letter-spacing? Reach for em every time. Pixel values fall apart the moment the text scales, whether from responsive layouts, browser zoom or an em-based root size.