Tracking

Designers say tracking, CSS says letter-spacing, and the operation is the same one: take a run of text and add the same amount of space after every letter in it, or take the same amount away. The name comes from phototypesetting, where a whole line was tracked tighter or looser as a unit. The word it gets confused with is the one next door. Kerning adjusts the space between two particular letters; tracking adjusts the space between all of them. If the fix names two letters, it is kerning. If it names a line, a heading, or a label, it is tracking, and optical kerning is neither, since it is a method of deciding a pair value rather than an amount applied to a run.

Body text at a reading size wants none of it. The face was fitted by its designer for exactly that job, so zero is the answer, and the values worth setting live at the two ends of the size range. Display type is drawn apart by scale alone: at 48px the gaps tuned for 16px read as holes, so headlines are usually pulled in, somewhere between -0.01em and -0.03em depending on the face. Small text goes the other way, and all caps goes furthest, because capitals were fitted to sit beside lowercase rather than beside each other. A caps label or an eyebrow at 11px needs roughly 5 to 10 percent of its size opened out before it stops looking cramped, and the smaller it is set, the more it wants.

The unit is the reason all of this is stated in ems. Tracking written in the em unit is a fraction of the type size, so 0.16em on an eyebrow is still the right amount when that eyebrow grows on a wide screen, while the same correction in pixels is a value tuned for one size and wrong at every other. That is also how a heading looks right at 32px and loose at 20px: the tracking did not scale with the type. One CSS detail follows from the definition. The value lands after every character, the space character included, so letter-spacing widens the gaps between words a little as well, which is worth knowing when the thing you actually want to change is word spacing.

There is a limit in both directions. Tighten far enough and letters begin to touch, which is where a fused ligature starts to look wrong beside its neighbours and where the counters of round letters close up. Open far enough and the run stops reading as words at all: the space between letters passes the space between words, and the eye has nothing left to group. Loosening also has a reader on the other side of it, since WCAG’s text spacing criterion lets someone push letter spacing to 0.12em on any page they visit, so a label sized to the pixel around its own tracking is a label that will one day be clipped.