#Kerning, Tracking & Letter-Spacing Demystified

#The Confusion, Clarified

Kerning, tracking, and letter-spacing are three distinct concepts that get conflated constantly — in design conversations, in software interfaces, and in CSS documentation. Getting them right matters because they address different problems and are applied at different scales.

The short version: kerning is specific to particular letter pairs; tracking (or letter-spacing) is applied uniformly across a range of text; and letter-spacing in CSS behaves like tracking, not like kerning.

#Kerning: The Art of the Pair

Kerning is the adjustment of horizontal space between specific pairs of letters to produce optically consistent spacing. It is needed because letters have irregular shapes, and mechanical equal-spacing between them produces unequal visual spacing.

The classic example: the letter pair AV. In a mechanically spaced setting, A and V have a visible gap between them because the legs of A and the arms of V slope away from each other. Kerning tightens this pair so it reads as similarly spaced to, say, HH. Other problematic pairs include To, Wa, LT, FA, PA, Te, and Yo.

Professional type designers spend enormous effort building kern pairs into their fonts — a comprehensive kern table may contain thousands of pair-specific adjustments. CSS respects these built-in kern pairs by default, but you can explicitly control this behavior:

/* Ensure OpenType kerning is active (it is by default in most browsers) */
body {
  font-kerning: normal;          /* Default: use built-in kern pairs */
  font-feature-settings: "kern" 1;
}

/* Disable kerning — rarely needed, but available */
.monospace-fallback {
  font-kerning: none;
}

Kerning is particularly visible at display sizes (32px and above). At body text sizes (14–18px), individual kern adjustments are typically too small to perceive, though their cumulative effect still contributes to text color evenness.

#Tracking: Uniform Spacing Across Text

Tracking (in print terminology) or letter-spacing (in CSS) applies a uniform adjustment to the space after every character in a range of text. Unlike kerning, it does not vary by letter pair — it shifts everything equally.

Tracking is measured in points in print software (InDesign, Illustrator) and in ems in CSS. A tracking of +50 in InDesign corresponds to approximately letter-spacing: 0.05em in CSS; +100 corresponds to approximately letter-spacing: 0.1em.

#When to Tighten Display Type

Large display type (heading text at 40px and above) frequently benefits from negative tracking — slightly reduced letter spacing. At display sizes, the built-in letter spacing of a typeface can appear too loose because each character's metrics were designed for a range of sizes, not specifically for large display use. Tightening produces a more cohesive, intentional look:

/* Tighten large display headings */
.hero-title {
  font-size: clamp(3rem, 6vw, 5rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.section-heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.015em;
}

The rule of thumb: begin with -0.02em to -0.03em for very large display text (above 60px) and adjust from there. Never apply negative tracking to body text — it will become illegible. Negative tracking at text sizes is one of the most common amateur typography mistakes.

#When to Open Up All-Caps

All-caps text — labels, navigation items, section dividers, button text — almost always benefits from positive tracking. The reason: capital letters were designed with the expectation of lowercase neighbors. Set in all-caps with default spacing, they can appear cramped because the proportions assume the wider gaps created by mixed-case settings.

The working range for all-caps is letter-spacing: 0.05em to letter-spacing: 0.1em (equivalent to +50 to +100 in print software). For very small all-caps text (10–12px), go higher — up to 0.15em:

/* All-caps label treatment */
.label,
.nav-item,
.tag {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Large all-caps heading */
.eyebrow {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

#How CSS letter-spacing Actually Works

CSS letter-spacing adds space after each character, including the last character in a word or line. This means:

1. It does not replace kern pairs — it is applied on top of kerning. If a typeface has a -20 units kern for AV, and you set letter-spacing: 0.1em, the final space between A and V is kerning + letter-spacing.

2. The last character in a justified or centered text block also receives the spacing, which can push the visual endpoint of text slightly right of where you expect it.

3. letter-spacing in ems scales with font-size, so a value set on a parent element will apply proportionally to all children. This is generally what you want.

4. letter-spacing has no effect on monospaced fonts (all characters already have equal width), though the value is applied — it simply adds to the already-equal spacing.

#The OpenType Kerning Problem

Some older fonts have kern pairs encoded in older, less efficient KERN tables rather than modern GPOS tables. Browsers handle GPOS more reliably. If you are working with a typeface that seems to have kerning issues (irregular pair spacing that does not respond to font-kerning: normal), this may be the cause. The fix is usually to use a modern version of the typeface or a typeface with proper GPOS kerning.

#Key Takeaways

• Kerning is pair-specific optical spacing; tracking (letter-spacing) is uniform space applied across text
• CSS font-kerning: normal enables the font's built-in kern pairs (already the default)
• Tighten large display headings with letter-spacing: -0.02em to -0.03em
• All-caps text should be tracked out: letter-spacing: 0.05em to 0.1em, more for small sizes
• Never apply negative tracking to body text
• CSS letter-spacing adds space after every character, including the last in a word — this can affect visual alignment

#Further Reading

• OpenType Features You Should Be Using
• Hierarchy: Guiding the Eye Through a Page
• Widows, Orphans & Rivers: Microtypography
• Typography Glossary: 100 Terms Every Designer Should Know