Tracking

Tracking is applied uniformly to a block of text, usually in CSS via the letter-spacing property. Positive tracking loosens text and is common on uppercase headings; negative tracking tightens text and is occasionally used on display-size lowercase. The right amount depends on the typeface and size: what reads as correct at 12 px looks too loose at 72 px. The typography playground lets you experiment with letter-spacing values and see the result immediately.

Over-tracking lowercase body text. Negative tracking on lowercase text almost always reduces readability. The only exception is display-size headings where a tight, all-caps headline benefits from a touch of negative tracking to close up the word shapes.

Setting tracking once and using it everywhere. Tracking values that work at 12 px look too loose at 72 px and vice versa. Adjust tracking per size range: tighter for large display, looser for small caption text.

Tracking changes spacing uniformly across every character in a selection, so it is the right tool for whole blocks rather than individual pairs. Positive tracking rescues all-caps headings, where browsers often render letters too tight; a value between 2% and 8% of the font size in em reads as intentional. Negative tracking tightens large lowercase display text, which can improve the shape of a headline at 40px and up.

In CSS the equivalent of tracking is the letter-spacing property, and the unit matters more than the raw number: use em so spacing scales with the font, set it on headings and labels, and leave body copy at normal unless a design reason exists. Applying letter-spacing to justify text or fix a cramped paragraph usually trades one problem for another. The playground lets you type your own string and step through values until the block feels even.