Articles · Craft · 25 May 2026 · 8 min read

Kerning, Tracking, and Leading: A Practical Spacing Guide

Typography's open secret: the space matters as much as the letters. Three different kinds of space have three different names — kerning, tracking, and leading — and they're confused so constantly that even design tools mislabel them. This guide untangles the three and gives you working numbers for each.

The thirty-second disambiguation

  • Kerning — space between one specific pair of letters ("AV", "To").
  • Tracking (letter-spacing) — uniform space applied across all letters in a run of text.
  • Leading (line-height, pronounced "ledding") — vertical space between lines.

Mnemonic: kerning is surgery, tracking is climate, leading is gravity.

Kerning: trust the font, intervene rarely

Certain letter pairs create optical potholes. "AV" slopes lean away from each other, leaving a gap that measures normal but looks huge; "To" tucks the small letter under the crossbar. Type designers pre-solve hundreds of these pairs in the font's kerning table, so your main job is simply not to turn that work off. In CSS, kerning is on by default in modern browsers; ensure it with:

body { font-kerning: normal; }

Manual kerning — nudging individual pairs yourself — is worth the effort in exactly one place: large display text. Logos, hero headlines, poster titles. At 60px, a pothole the font's table didn't cover becomes visible to civilians. Design tools expose per-pair adjustment (in Figma/Illustrator, cursor between two letters + modifier keys); on the web, a manually kerned logo is better delivered as SVG. If you want to train your eye, the classic browser game Kern Type teaches more in ten minutes than any article.

One caution: cheap or amateur fonts often ship with poor kerning tables — persistent awkward gaps at display sizes are a font-quality signal worth heeding before a project depends on it.

Tracking: small doses, specific occasions

Tracking (CSS letter-spacing) adjusts every gap equally. The rules of thumb that survive contact with real projects:

  • Body text: leave it alone. Fonts are spaced by their designers for reading sizes. Tracking body text — positive or negative — almost always reads worse than the default. Resist the itch.
  • ALL CAPS and small caps: track out. Capitals were designed to sit next to lowercase; run together they crowd. Add letter-spacing: 0.05em–0.12em to caps-only labels, buttons, and overlines. This is the single most common professional touch missing from amateur sites (this site's little "AD SLOT" labels do it too).
  • Very large headlines: consider tracking in. Display sizes make default spacing look loose; large type often benefits from letter-spacing: -0.01em to -0.03em. Many display fonts pre-tighten, so look before you squeeze.
  • Tiny text: track out slightly. Captions below ~12px gain legibility from letter-spacing: 0.01–0.02em, which is exactly what optical-size axes in variable fonts automate.
  • Always use em units so spacing scales with the font size.

Never letter-space lowercase for style. As the typographer Frederic Goudy is (probably apocryphally, and more colourfully) said to have put it: anyone who would letter-space lowercase would steal sheep.

Leading: the biggest lever on the page

Nothing transforms a wall of text like line spacing. Too tight and descenders tangle with ascenders while the eye loses its place returning to the left margin; too loose and paragraphs disintegrate into separate strips. The working numbers:

  • Body text: line-height 1.4–1.6 (unitless, in CSS — e.g. line-height: 1.5). WCAG's accessibility guidance points at 1.5; this site uses 1.7 for its slightly airy voice.
  • Longer lines need more leading. A wide measure makes the return journey to the next line longer; compensate upward. (Better: shorten the measure to ≤75 characters.)
  • Bigger x-height needs more leading. Fonts like Inter fill more of the line box, so they need more breathing room than a small-x-height face like EB Garamond at the same size.
  • Headlines: 1.05–1.25. Large multi-line headings at body-text leading look scaffolded; tighten until ascenders and descenders nearly touch, then stop.
  • Use unitless line-height in CSS so nested elements inherit the ratio rather than a fixed pixel value — a classic source of squashed child text.

Word spacing and the fourth dimension

For completeness: space between words is its own property (word-spacing), and the main way it goes wrong is justified text, where the browser stretches word gaps to fill lines, carving distracting "rivers" through paragraphs. Web hyphenation support remains inconsistent, so the durable advice stands: left-align body text and let the right edge rag naturally.

A tuning procedure that works

  1. Set body size (16–20px) and measure (~65ch) first — spacing depends on both.
  2. Tune line-height until a full paragraph reads without effort: start at 1.5, adjust ±0.1 by eye.
  3. Track out anything ALL-CAPS; tighten only large headlines; leave body tracking at 0.
  4. Check kerning only at display sizes, and only per visible pothole.
  5. Re-read on a phone. Spacing that's right on a 27-inch monitor often wants +0.1 line-height on mobile's narrower measure — media queries handle it.

Spacing is the least glamorous part of typography and the highest-yield. Fonts get the compliments; spacing does the work.