Understanding letter-spacing
Tracking — the gap typographers tune at 0.01 em.
When tightening looks crisp, when loosening looks elegant, and the all-caps rule everyone forgets to apply.
Letter-spacing vs kerning.
Letter-spacing (also called tracking) is a uniform gap added between every pair of letters. Kerning is the per-pair adjustment built into a font (the gap between A and V versus the gap between A and H). Letter-spacing in CSS is global; kerning is set by the font designer and toggled with font-kerning. The two work together, not against each other.
The unit choices.
CSS accepts px, em, and rem. em is the right answer almost always — the spacing scales with the font size. 0.05emat 16 px is 0.8 px; at 32 px it's 1.6 px. Hard-coded pixel values produce different tracking at different sizes, which is rarely what you want. Tracking is set in thousandths of an em in print typography; CSS rounds to hundredths but the principle is the same.
Loosen all-caps.
Uppercase letters need more space than lowercase. Set type in all-caps without adding tracking and the words feel clenched. The rule: add 0.05-0.10 em of letter-spacing to any all-caps text — headings, labels, button text. Apple's design system uses ~0.05 em for uppercase nav labels; Material Design uses 0.1 em. Either looks better than the unadjusted default.
A worked tuning.
A button labelled "GET STARTED" at 14 px font-size with default letter-spacing looks cramped. Add letter-spacing: 0.06em = 0.84 px between each letter. The eight letters get seven gaps; the text widens by 7 × 0.84 ≈ 6 px. Tiny in absolute terms, huge in perceived legibility. The same rule applies to ALL CAPS body copy and to small caps.
All-caps button
0.06 em on 14 px
Calculate the extra width.
14 × 0.06 = 0.84 px ; 7 gaps × 0.84 = 5.9 px wider
= Looser, more readable
Tighten large display type.
Headlines and hero text often need negative letter-spacing — -0.01em to-0.03em — at 48 px and up. The default tracking is calibrated for body size; at display size the letters look noticeably loose. Most "modern, refined" headline aesthetics on premium sites are this trick: a sans-serif at 64 px with letter-spacing -0.02em.
Don't track body text.
Tighter body type looks worse, not crisper. The font designer set the spacing for body use; the kerning pairs do real work. Override letter-spacing on body copy and you break ligatures, fight the font's metrics, and reduce reading speed. Restrict tracking adjustments to headlines, captions, all-caps, and tabular numerals.