Tracking, Kerning, and Letter-Spacing: Three Words, Three Different Jobs

Nothing exposes a shaky typographic vocabulary faster than the space between letters. Designers ask for tighter kerning when they mean tracking. Developers reach for letter-spacing when the real problem is a missing kerning table. The three words describe genuinely different mechanisms, and once you can tell them apart you stop applying the wrong fix to the right problem.

Kerning Is Pair-Specific and Comes From the Font

Kerning is the adjustment applied to a specific pair of characters. The classic case is a capital A followed by a capital V: their diagonal strokes lean away from each other, so the default advance widths leave a visible gap. The type designer ships a kerning table inside the font file that pulls that particular pair closer. You are not setting kerning in CSS — you are choosing whether to honour the table the designer already wrote.

In practice that means kerning quality is a font selection decision, not a styling decision. A well-made text face may carry thousands of kerning pairs; a hastily converted free font may carry none, which is why some fonts look subtly broken at display sizes no matter how you space them. Browsers enable kerning by default for most text, and font-kerning: none is the switch that turns it off — a setting you almost never want.

Tracking Is Uniform and Belongs to You

Tracking is a uniform adjustment applied across a run of text. Every gap opens or closes by the same amount. This is the control CSS exposes as letter-spacing, and it is the one you should be reaching for when a headline feels loose or a line of small caps feels cramped. The confusion in everyday speech comes from print software, where the panel is labelled tracking and the shortcut is often described as kerning.

Kerning is what the font knows. Tracking is what you decide. Letter-spacing is the CSS property that implements tracking.

Size Changes Everything

The single most useful rule about tracking is that the correct value depends on size, and it moves in the opposite direction from what beginners expect. Large type needs negative tracking. At 72 pixels the default gaps that make body copy readable become visible holes, and a value between -0.01em and -0.03em usually settles the line. Small type needs positive tracking. At 11 or 12 pixels letters start to crowd, and a touch of extra space — 0.01em to 0.02em — recovers legibility.

This is why tracking should always be expressed in em rather than px. An em value scales with the font size, so a heading that shrinks on mobile keeps a proportional adjustment. A px value stays fixed, which means the tracking you tuned for a 64-pixel desktop headline will strangle the same headline at 32 pixels.

Where Positive Tracking Is Mandatory

Two cases require opening the letters generously rather than as a fine adjustment. All-caps text has no ascenders or descenders to create visual variety, so it reads as an undifferentiated block; 0.05em to 0.15em restores the rhythm. Small capitals have the same problem compounded by their reduced height, and they were historically drawn to be set with extra space. If you are converting a subhead to small caps, budget for tracking in the same edit.

• Display headings, 48px and up: -0.01em to -0.03em
• Body copy, 16px to 18px: 0 — leave it alone
• Captions and legal text, 11px to 13px: 0.01em to 0.02em
• All-caps labels and eyebrows: 0.05em to 0.15em
• Small capitals: 0.05em to 0.1em

The Mistake That Survives Every Redesign

Applying a single tracking value site-wide is the most common spacing error in production CSS. A rule such as body { letter-spacing: 0.02em } feels harmless and is often added to make small UI labels breathe, but it silently loosens every headline on the site. Track by role instead: leave the body element alone, and set letter-spacing on the heading and label classes where you have actually judged the result at the size it will appear.

Word spacing deserves a brief mention because it fails the same way. CSS word-spacing adds to the width of the space character, and it is almost never the right tool for a rhythm problem — the exception being justified text, where a small negative word-spacing can reduce the rivers that appear when the browser stretches gaps to fill a line.

Judging It By Eye

Numbers get you close; the eye finishes the job. The traditional test is to squint at a line until the letters blur into a grey band and look for dark clots or bright holes in that band. Even grey value means even spacing. A second test is to read the line at arm's length: if individual letters start to detach from their words, tracking is too open.

The Letter Spacing Adjuster on this site exists for exactly this loop — set your real string, drag until the grey value evens out, then copy the letter-spacing and word-spacing declarations rather than guessing a value in your stylesheet. Pair it with the Text Line Spacing Calculator, because horizontal and vertical spacing are judged together: tightening tracking usually means you can also close the leading slightly without the block feeling dense.