Articles · Craft · Updated 2 August 2026 · 11 min read

Kerning vs Tracking vs Leading: The Complete Guide

Typography's open secret is that 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 professional design software mislabels them. This guide untangles all three, with a live demo so you can see each one move.

See it for yourself

Reading about spacing is far less useful than watching it move. Drag the sliders below — the sample text updates live, and the CSS underneath updates with it. Pay particular attention to the kerning toggle: switch it off and watch the letter pairs in the large line fall apart.

Kerning: trust the font, intervene rarely

Certain letter pairs create optical potholes. "AV" has two slopes leaning away from each other, leaving a gap that measures normal but looks enormous. "To" leaves the small o stranded beneath the T's crossbar. "Wa", "Ty", "PA", and "LT" have the same problem.

Kerning is the correction: adjusting the space of that one specific pair so the rhythm looks even. Crucially, type designers have already done this work for you. A professionally made font ships with a kerning table containing hundreds — sometimes thousands — of pair adjustments. Your main job is not to switch it off.

Kerning in CSS

Modern browsers enable kerning by default for most text. You can state it explicitly:

body {
  font-kerning: normal;   /* use the font's kerning table (default) */
}

The values are auto (browser decides — in practice, on), normal (always on), and none (off). The one real gotcha: some older rendering paths disabled kerning at small sizes for performance, and setting font-kerning: normal overrides that.

Metric vs optical kerning

In design software you'll see two automatic modes. Metric kerning uses the pairs baked into the font file by its designer — the right default for any well-made typeface. Optical kerning ignores that table and lets the application judge spacing from the letterform shapes. Optical is worth reaching for in two cases: when a font has a poor or missing kerning table (common in cheap or free-for-personal-use fonts), and when you're mixing fonts or sizes within one line, where the original pairs don't apply.

When to kern by hand

Manual kerning — nudging individual pairs yourself — is worth the effort in exactly one place: large display text. Logos, hero headlines, poster titles, book covers. At 14px a flawed pair is invisible; at 90px it's a hole in the middle of your brand. Below roughly 24px, hand-kerning is a waste of your afternoon.

In Figma, Illustrator, or InDesign, place the cursor between two letters and nudge with Alt/Option + arrow keys. On the web, a hand-kerned logotype is better delivered as SVG, where you control each letter's position directly — which is also why finished logos are converted to outlines (see choosing a logo font).

If you want to train your eye, the browser game Kern Type teaches more in ten minutes than any article can, including this one.

A practical quality signal: if a font shows persistent awkward gaps at display sizes, its kerning table is thin. That tells you something about how carefully the whole font was made — worth knowing before a brand depends on it.

Tracking: small doses, specific occasions

Tracking — letter-spacing in CSS — adjusts every gap in a run of text equally. Where kerning is a scalpel, tracking is a thermostat. 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 — in either direction — almost always reads worse than the default. Resist the itch.
• ALL CAPS and small caps: track out. Capitals were drawn to sit beside lowercase letters; run together they crowd. Add letter-spacing: 0.05em to 0.12em on caps-only labels, buttons, and overlines. This is the single most common professional touch missing from amateur work.
• Very large headlines: consider tracking in. Display sizes make default spacing look loose. Try -0.01em to -0.03em. Many display faces are pre-tightened, so look before you squeeze.
• Tiny text: track out slightly. Captions below about 12px gain legibility from 0.01em–0.02em — which is exactly what optical-size axes in variable fonts automate.
• Always use em, not px, so spacing scales with font size instead of breaking at every breakpoint.

Never letter-space lowercase body text for style. As the typographer Frederic Goudy is supposed to have put it, anyone who would letter-space lowercase would also steal sheep.

Leading: the biggest lever on the page

Nothing transforms a wall of text like line spacing. The term comes from metal type, where strips of lead were physically inserted between lines — hence the pronunciation "ledding", not "leeding".

Too tight and descenders tangle with the ascenders below while the eye loses its place on the return journey to the left margin. Too loose and paragraphs disintegrate into unrelated strips. The working numbers:

• Body text: line-height: 1.4 to 1.6 (unitless). WCAG accessibility guidance points at 1.5; this site uses 1.7 for a deliberately airy voice.
• Longer lines need more leading. A wide measure makes the return trip longer, so compensate upward — or better, shorten the line to 45–75 characters with max-width: 65ch.
• Large x-heights need more leading. Fonts like Inter fill more of the line box than a small-x-height face like EB Garamond, so they need more room at the same size.
• Headlines: 1.05 to 1.25. Multi-line headings at body leading look scaffolded. Tighten until ascenders and descenders nearly touch, then stop.
• Use unitless values. line-height: 1.5 inherits as a ratio; line-height: 27px inherits as a fixed value and squashes any child element with a different font size. This is a genuinely common bug.

Side by side

If you only have time to adjust one thing on a page, adjust the leading. It affects comfort more than the other two combined.

Word spacing and justification

For completeness, there's a fourth kind of horizontal space: the gap between words, controlled by word-spacing. You rarely need to touch it directly, but it becomes a problem in justified text, where the browser stretches word gaps to force both margins flush. The result is distracting "rivers" of white space running down the paragraph.

Print designers solve this with sophisticated hyphenation and manual intervention. On the web, hyphenation support is still inconsistent across browsers and languages, so the durable advice is simple: left-align body text and let the right edge rag naturally. It reads better than badly justified text, every time.

CSS quick reference

/* Comfortable long-form body text */
body {
  font-size: 18px;
  line-height: 1.6;        /* leading — unitless */
  letter-spacing: 0;       /* tracking — leave body alone */
  font-kerning: normal;    /* kerning — use the font's pairs */
  max-width: 65ch;         /* measure — 45-75 characters */
  text-align: left;        /* avoid justification on the web */
}

/* A caps label or button */
.label {
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.09em;  /* caps need tracking out */
}

/* A large display headline */
h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.1;        /* tighten leading at display sizes */
  letter-spacing: -0.02em; /* tighten tracking too */
}

A tuning procedure that works

1. Set the body size (16–20px) and the measure (~65ch) first — spacing decisions depend on both.
2. Tune line-height until a full paragraph reads without effort. Start at 1.5 and adjust by ±0.1 by eye.
3. Track out anything in ALL CAPS. Tighten only large headlines. Leave body tracking at zero.
4. Check kerning only at display sizes, and only where you can see a visible pothole.
5. Re-read on a phone. Spacing that's right on a 27-inch monitor often wants a little more line-height on mobile's narrower measure — a media query handles it.

Spacing is the least glamorous part of typography and by far the highest-yield. Fonts get the compliments; spacing does the work. For the vocabulary behind the terms used here, keep the typography glossary open in a tab — and if you're choosing typefaces as well as setting them, the pairing tool lets you test combinations at real sizes.