What Is Kerning, and How Does It Affect Readability?

You set a big hero headline that reads "WAVE TOURS" and something feels off. There is a gaping hole between the W and the A, another between A and V, and the word looks like it is falling apart. Meanwhile, in the logo your client sent over, the letters r and n sit so close together that "turn" reads as "tum." Both are kerning problems, and once you notice them, you will start seeing them on shop signs, menus, and landing pages everywhere.

This article explains what kerning is, how it differs from tracking, how fonts store kerning information, when browsers apply it automatically, and how to control or correct it in CSS for body text, headlines, and logos.

What Is Kerning?

Kerning is the adjustment of space between two specific characters to achieve visually even spacing. It is applied to pairs of letters, not to whole words or lines.

Every glyph in a font has a default width and side spacing, called sidebearings. For most letter combinations, those defaults produce even spacing. But some pairs, because of their shapes, end up looking too far apart or too close together. Classic problem pairs include:

• AV, VA, AW, WA — diagonal strokes leave large triangular gaps.
• To, Ty, Te, Tr — the overhanging bar of the T leaves empty space underneath.
• LT, LY, LV — the open right side of L creates a hole.
• Yo, Ya, Wo — similar overhang issues.
• P., F., T., — punctuation sitting in the open space after these letters.
• r n, c l, l l in tight settings — pairs that can merge into new shapes.

Kerning moves the second character closer to (negative kerning) or further from (positive kerning) the first, so the optical space between letters looks consistent, even though the measured distances are different.

Kerning vs. Tracking vs. Spacing

These terms are often confused. They describe different scopes of adjustment:

Term	Scope	Who controls it	CSS property
Sidebearings / spacing	Every glyph, built into the font	Type designer	None (inherent to the font)
Kerning	Specific pairs of glyphs	Type designer (via kerning table), occasionally you	font-kerning, font-feature-settings: "kern"
Tracking	A whole range of text uniformly	You	letter-spacing
Word spacing	Gaps between words	You	word-spacing

Tracking loosens or tightens everything evenly — useful for all-caps labels or large headings. Kerning fixes the specific pairs that would look uneven no matter what tracking you choose. The full story on tracking lives in what tracking (letter-spacing) is.

How Fonts Store Kerning

Type designers spend a large share of their time on spacing and kerning. A professional text font can contain thousands of kerning pairs, often organized into kerning classes — groups of letters with similar shapes, such as A À Á Â Ã Ä Å, that share the same kerning values so the designer does not have to kern every accented variant individually.

In OpenType fonts, kerning data lives in one of two places:

1. The GPOS table, via the kern feature. This is the modern approach and supports class-based kerning, contextual adjustments, and kerning across scripts.
2. The legacy kern table. Older fonts store simple pair kerning here. Browsers still read it.

Variable fonts can also vary kerning values across their axes, so a bold instance may have different kerning from a light one.

You can inspect a font's kerning with fonttools:

pip install fonttools
# Dump the GPOS table to XML to inspect kerning lookups
ttx -t GPOS -o - Inter-Regular.ttf | less

# Check which OpenType features a font exposes
python -c "from fontTools.ttLib import TTFont; f=TTFont('Inter-Regular.ttf'); print(sorted({fr.FeatureTag for fr in f['GPOS'].table.FeatureList.FeatureRecord}))"

If kern appears in that feature list, the font has kerning data the browser can use.

Metric vs. Optical Kerning

Design applications like Adobe InDesign and Illustrator offer two automatic modes:

• Metric kerning uses the pairs built into the font by its designer.
• Optical kerning ignores the font's pairs and calculates spacing algorithmically from the letter shapes. It can help with fonts that have poor or missing kerning, or when mixing fonts.

Browsers only use metric kerning — the data in the font. There is no CSS equivalent of optical kerning, which is one more reason to choose well-made fonts for the web.

How Kerning Affects Readability

At body text sizes, kerning is subtle, but it matters more than it seems:

• Even texture. Good kerning produces an even "colour" — a consistent grey density across a paragraph. Uneven spacing creates distracting light and dark spots that pull the eye.
• Word shape recognition. Experienced readers recognize words partly by their overall outline. Gaps inside words weaken that outline; collisions can create false shapes.
• Character confusion. When r and n sit too close, they can read as m. When c and l collide, they can read as d. "Clicks," "modern," and "burn" are classic victims. This is more of a problem with tight tracking, condensed fonts, or low resolution.
• Perceived quality. Even readers who cannot name the problem perceive poorly spaced text as cheaper or less trustworthy.

At headline and display sizes, kerning problems are magnified. A 4px gap that is invisible at 16px becomes a 20px hole at 80px. This is why headlines and logos often need manual attention.

How Browsers Handle Kerning

Modern browsers apply the font's kerning automatically in most situations. The relevant property is font-kerning:

p {
  font-kerning: auto; /* default: browser decides */
}

h1 {
  font-kerning: normal; /* always apply the font's kerning */
}

.debug-no-kerning {
  font-kerning: none; /* disable kerning */
}

• auto — the browser decides. Historically, Safari on macOS and iOS skipped kerning for small text sizes as a performance optimization; today, Chromium, Firefox, and Safari generally apply kerning at all sizes, but auto leaves the decision to the browser.
• normal — kerning is applied if the font has it.
• none — kerning is not applied.

Setting font-kerning: normal on body is a harmless way to guarantee consistent behaviour:

body {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

text-rendering: optimizeLegibility historically enabled kerning and ligatures in some browsers. Modern browsers enable kerning by default anyway, so treat it as a legacy belt-and-braces setting rather than a requirement.

Kerning and letter-spacing Interact

When you apply letter-spacing, browsers disable optional ligatures (like fi and fl) because spacing them apart would break the combined glyph. Kerning itself is still applied, and your tracking value is added on top. If you want to switch kerning off explicitly while tracking, you can use the low-level feature syntax:

.tracked-label {
  letter-spacing: 0.08em;
  font-feature-settings: "kern" 0;
}

Prefer font-kerning over font-feature-settings for kerning. font-feature-settings overrides other features unless you repeat them, and is best reserved for features with no dedicated property. The guide to CSS font-feature-settings explains the cascade pitfalls.

Manual Kerning for Headlines and Logos

CSS has no per-pair kerning property. When a font's built-in kerning is not enough for a large headline, you wrap the problem character in a span and adjust its letter-spacing or margin. Remember that letter-spacing adds space after the character it is applied to, so you target the first letter of the pair.

<h1 class="hero-title" aria-label="WAVE TOURS">
  <span aria-hidden="true">
    <span class="kern-tight">W</span><span class="kern-tight">A</span>VE TOURS
  </span>
</h1>

.hero-title .kern-tight {
  letter-spacing: -0.06em;
}

The aria-label and aria-hidden combination ensures screen readers read the whole word rather than announcing fragmented letters. Some screen readers handle adjacent inline spans fine on their own, but this pattern is the safest for heavily split text.

A few rules for manual kerning:

1. Only do it at display sizes. Body text should rely on the font's kerning. Manual tweaks in paragraphs cannot survive reflow, translation, or CMS edits.
2. Use em units. Kerning values in em scale with the font size, so they stay correct across responsive breakpoints and zoom.
3. Kern by eye, not by measurement. Flip the headline upside down or blur your eyes; you will see spacing as shapes rather than words, which makes uneven gaps obvious.
4. Kern in context. Adjust the most problematic pair first, then look at the whole word again.
5. Consider SVG or outlined text for logos. A logo should be a designed asset, not live text with dozens of span adjustments.

Automated Pair Kerning with JavaScript

For marketing headlines where you need fine-grained control, small libraries can wrap pairs in spans automatically from a lookup table. It is usually unnecessary if you pick a well-kerned font, but a minimal approach looks like this:

const kernPairs: Record<string, string> = {
  WA: "-0.06em",
  AV: "-0.07em",
  To: "-0.05em",
  LT: "-0.08em",
};

export function applyKerning(el: HTMLElement) {
  const text = el.textContent ?? "";
  el.setAttribute("aria-label", text);
  const wrapper = document.createElement("span");
  wrapper.setAttribute("aria-hidden", "true");

  for (let i = 0; i < text.length; i++) {
    const span = document.createElement("span");
    span.textContent = text[i];
    const pair = text[i] + (text[i + 1] ?? "");
    if (kernPairs[pair]) span.style.letterSpacing = kernPairs[pair];
    wrapper.appendChild(span);
  }

  el.replaceChildren(wrapper);
}

Use this only for a handful of short display strings, and never for body copy.

Choosing Fonts with Good Kerning

Since browsers rely entirely on a font's built-in kerning, the quickest win is choosing well-made fonts. Signs of good kerning:

• Test strings look even: type "AVATAR Wavy Typography LT. To Yo P." and look for holes.
• Mixed case and all-caps both work: many fonts kern lowercase well but neglect caps-to-caps pairs.
• Punctuation is kerned: quotation marks next to A or T, periods after P, V, W, Y.
• Accented characters are covered: check pairs like Tô or Vá if you serve multilingual content.

Fonts from established foundries and well-maintained open source projects (Inter, Source Sans 3, IBM Plex, Roboto) generally have thorough kerning. Free fonts from random download sites often do not.

Kerning in Design Tools vs. the Browser

If you kerned a headline manually in Figma, the browser will not know about it. Figma's letter-spacing per selection gets exported as a value on that text layer, but per-pair adjustments need to be translated into spans and em values by hand. When handing off, flag any manually kerned display text so the developer can reproduce it — or export it as SVG. The Figma typography handoff guide covers how to communicate these details.

Kerning FAQ

Conclusion

Kerning is the pair-by-pair adjustment of spacing that makes letters look evenly spaced despite their different shapes. Type designers build thousands of kerning pairs into professional fonts, and browsers apply them automatically, which is why choosing a well-made font matters more than any CSS you write. At body sizes, good kerning creates even texture and prevents letter collisions; at display sizes, it is the difference between a polished headline and a broken one.

Leave body text to the font, set font-kerning: normal if you want certainty, and save manual adjustments for large headlines and logos — using em units, spans, and accessible labels. When something looks off, flip the text upside down, kern the worst pair first, and step back. Your eye is the final tool.

Here are some useful references for going deeper on kerning:

1. MDN Web Docs: font-kerning — values, defaults, and browser behaviour.
2. Google Fonts Knowledge: Glossary — definitions of kerning, sidebearings, and spacing.
3. Butterick's Practical Typography: Kerning — why kerning should almost always be on.
4. Microsoft Typography: OpenType GPOS table — how pair adjustment kerning is stored in fonts.
5. fontTools: Documentation — tools for inspecting and editing font tables, including kerning.