Kerning, Tracking & Letterspacing
Understand the difference between kerning, tracking, and letter-spacing — and when to adjust each for professional typography.
Three terms describe the horizontal spacing between characters, and conflating them leads to typographic decisions that range from subtly wrong to actively harmful. Kerning adjusts the space between specific letter pairs. Tracking adjusts spacing uniformly across a range of text. Letter-spacing — the CSS property — implements tracking on the web. Understanding what each does, when to use it, and when to leave spacing alone separates professional typography from amateur guesswork.
Kerning: Pair-by-Pair Precision
Kerning is the adjustment of space between individual character pairs to achieve visually even spacing. Type designers build kerning tables into fonts — thousands of pair-specific adjustments for combinations like "AV," "To," "ry," and "Wa" where default sidebearings produce awkward gaps or collisions.
Quality fonts kern well out of the box. System fonts, Google Fonts from reputable foundries, and professional commercial typefaces include comprehensive kerning. The problem arises with display sizes, unusual pairings, and custom lettering — contexts where default kerning may not suffice.
When Kerning Matters Most
Kerning becomes visible and important at display sizes (24px and above) and in logotypes, headlines, and short text strings where each letter is scrutinized individually. At body text sizes, kerning tables handle spacing invisibly — manual kerning is unnecessary and impractical.
Common kerning problems at display sizes:
- Diagonal-to-straight pairs (A/V, A/T, A/W, V/A): Default spacing leaves visible gaps
- Round-to-straight pairs (O/T, O/V, o/v): Uneven visual density
- Crossbar collisions (T/o, T/a, T/e): The crossbar of T sits over the following letter's counter, creating tight or loose appearance
- Serif interactions: Serifs extend into adjacent letter space differently than sans-serif forms
Tracking: Uniform Adjustment
Tracking (called letter-spacing in CSS) adjusts the spacing between all characters in a text range by a uniform amount. Unlike kerning, which targets specific pairs, tracking shifts every character relationship equally.
Tracking serves distinct purposes at different scales:
Positive tracking (letter-spacing above 0): Opens up text, improving legibility at small sizes and creating an airy, spacious feel at display sizes. Common applications include all-caps text, small captions, button labels, and letter-spaced brand headings.
Negative tracking (letter-spacing below 0): Tightens text, creating density and visual impact at large display sizes. Large headlines often benefit from slight negative tracking (-0.01em to -0.03em) because the default spacing designed for body text feels loose at 48px+.
Tracking Guidelines by Context
| Context | Tracking | Rationale | |---------|----------|-----------| | Body text (16px) | 0 (default) | Font metrics handle spacing | | Small caps / all caps | +0.05em to +0.1em | Caps need air to read clearly | | Headlines (32px+) | -0.01em to -0.03em | Tighten display-size looseness | | UI labels (12px) | +0.01em to +0.025em | Improves small-size legibility | | Captions (12–13px) | 0 to +0.02em | Subtle openness aids reading | | Button text | +0.025em to +0.05em | Clarity at compact sizes |
Letter-Spacing in CSS
The CSS letter-spacing property controls tracking. Values can be specified in em, px, or rem — but em is strongly preferred because it scales proportionally with font size.
.headline {
font-size: 3rem;
letter-spacing: -0.02em;
}
.overline {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.button-label {
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.025em;
}Kerning vs. Tracking: Key Differences
Understanding the distinction prevents common errors:
- Kerning is pair-specific and built into the font. You generally do not set it manually on the web except through design tools for logos and custom lettering.
- Tracking is uniform and applied via CSS
letter-spacing. It affects every character equally. - Positive tracking on body text makes fonts designed for text look broken.
- Negative tracking on small text causes characters to collide and reduces legibility.
- Excessive tracking at any size transforms text into an unreadable string of isolated letters.
Examples Across Quality Levels
A 48px headline with letter-spacing: 0.15em. Letters drift apart into individual elements rather than forming cohesive words. The text reads as "H E A D L I N E" — a decoration, not communication. Common mistake when designers apply uppercase tracking values to mixed-case display text.
A 48px headline with letter-spacing: -0.02em. Slightly tightened from default, creating visual density appropriate for display size. Words remain cohesive. Character pairs look evenly spaced thanks to the font's built-in kerning tables working at this size.
Headline at 48px with -0.025em tracking. Overline label above it in 11px all-caps with +0.08em tracking and font-weight 500. Body text below at 16px with default spacing. Each level uses spacing appropriate to its size, case, and reading context. The hierarchy feels refined because spacing supports rather than fights the typeface.
Special Cases
All-Caps Text
Capital letters are designed with spacing optimized for word formation with lowercase neighbors. Isolated in all-caps settings, they appear too tight. Always add positive tracking — typically 0.05em to 0.1em depending on size and typeface. Larger all-caps text needs less additional tracking; smaller sizes need more.
Monospaced Fonts
Monospace fonts allocate equal width to every character, eliminating kerning by design. Do not apply tracking to monospace body text. For monospace labels or code at small sizes, minimal positive tracking (0.01em) can help, but the fixed-width nature makes tracking adjustments less necessary than with proportional fonts.
Variable Fonts
Variable fonts can include a kern axis in some implementations, but the primary web application remains the standard kerning tables activated by font-kerning: normal. Variable font axes for width and weight do not replace kerning — they operate independently.
Justified Text
Justified text adjusts word spacing (and sometimes letter-spacing) to fill line widths. Aggressive justification algorithms that also adjust letter-spacing create uneven character spacing that is harder to read than ragged-right text with proper measure. Avoid letter-spacing-based justification on the web.
Interactive Playground
Use the playground below to experiment with font size, weight, line height, and letter-spacing together. Observe how tracking interacts with other variables — a change that works at one size may fail at another.
Practical Workflow
For most web projects, follow this decision sequence:
-
Choose a well-kerned font. Reputable foundries and major open-source fonts (Inter, Source Serif, IBM Plex) include quality kerning. Verify with
font-kerning: normal. -
Leave body text alone. No letter-spacing adjustments on paragraphs. The font handles it.
-
Tighten large headlines slightly. Apply -0.01em to -0.03em at sizes above 32px. Test with your specific typeface — some display faces need no adjustment.
-
Open up all-caps and small labels. Apply +0.05em to +0.1em for uppercase text; +0.01em to +0.03em for small UI labels.
-
Test at actual size. Tracking that looks correct at design-tool zoom may appear wrong in the browser. Always verify in context.
-
Document in your design system. Define tracking tokens alongside your type scale so the team applies consistent values:
:root {
--tracking-tighter: -0.03em;
--tracking-tight: -0.015em;
--tracking-normal: 0;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
}Kerning, tracking, and letter-spacing operate at the finest level of typographic control. Used with restraint and context awareness, they elevate type from functional to refined. Used carelessly, they undermine even the best typeface choices.