Tracking (letter-spacing)

Uniform spacing across a whole run of text: tight for big headlines, open for small all-caps. Kerning is pairs, tracking is everything.

spread the letters outairy wide capsletter spacingletter-spacing csstrackignspace between all the letterstighten the headlinewidely spaced luxury brand text

See it

Live demo coming soon

What it is

Tracking is uniform space added to or removed from every letter in a run of text. Kerning fixes one pair; tracking moves the whole line. In CSS it is letter-spacing, and you set it in em (or rem) rather than px so the spacing scales with the type instead of drifting as sizes change.

The working rules run opposite by size. Big type needs negative tracking, roughly -0.01em to -0.04em on display headings, because default spacing is drawn for reading sizes and looks loose when blown up. Small text, all-caps, and small caps need positive tracking, roughly 0.05em to 0.12em, because a run of repeated uppercase forms tends to look dense and clotted at default spacing. How much it needs depends on the typeface, so set it and look rather than trusting one number. Wide tracking on caps is the whole fashion-label and film-title look.

Two traps. CSS adds the space after the last character too, so centered and right-aligned tracked-out text sits visibly off; compensate with a negative right margin equal to the tracking. And tracking out lowercase body copy destroys word shape and slows reading, which is what Frederic Goudy was getting at with the line about anyone who letterspaces lowercase being willing to steal sheep.

Ask AI for it

Tune the tracking across this type system with letter-spacing in em, not px. Display headings 48px and up: -0.03em. Headings 24px to 40px: -0.015em. Body copy 14px to 18px: 0 (leave the font's default alone). All-caps labels, eyebrows, and buttons: +0.08em, and add a right margin of -0.08em so centered labels stay optically centered. Small caption text under 13px: +0.01em. Output it as CSS custom properties with one value per step of the scale, and show a specimen of each step before and after.

You might have meant

kerningleadingsmall capsmeasuretype scale

Go deeper