What is kerning and how does it differ from tracking?

Kerning is the adjustment of space between specific pairs of letters so that they look evenly spaced, such as tucking the o under the arm of a T in "To" or pulling the A and V closer in "AV". Tracking is a uniform adjustment of space across a whole run of text, applied equally between every character in a word, line or paragraph. Kerning is usually built into the font by its designer as a table of pair adjustments, and browsers apply it automatically for most text. Tracking is a choice you make for a particular use, and in CSS it's controlled with the letter-spacing property. In short, kerning fixes the spacing of individual pairs, while tracking changes the overall looseness or tightness of text.

The two are easy to confuse because both change the space between letters, but they solve different problems and are controlled in different ways. In this article you'll learn why some letter pairs need kerning, how fonts store kerning information, how to turn kerning on and off in CSS, how tracking works and when to use it, and how to fine-tune a logo or headline when the font's built-in kerning isn't enough.

Why Letters Need Kerning

Every character in a font has a fixed width, called its advance width, plus a little space on each side called sidebearings. A designer sets these so that most letters look evenly spaced next to most other letters. This is called spacing, and it's the foundation of how a font looks in text.

Some combinations of shapes defeat even good spacing. Letters with diagonal strokes, overhanging arms or open sides create awkward gaps when they meet:

• T, V, W and Y followed by lowercase letters: "To", "Va", "We", "Yo".
• Capital pairs with diagonals: "AV", "AW", "AT", "LT", "LY".
• Letters followed by punctuation: "T.", "y,", "r.".
• Quotation marks next to letters: "‘A" or "f’".

In "AVATAR" set without kerning, the gaps around the V and T look far larger than the gaps between straight-sided capitals in a word like "MINE". Kerning tells the renderer to move those particular pairs closer together, or occasionally further apart, so the word looks even.

The goal is optical, not mathematical. Equal distances between letters' bounding boxes don't look equal to the eye. Kerning aims for equal-looking areas of white space.

How Fonts Store Kerning

Kerning information lives inside the font file, created by the type designer.

• Older fonts may use a kern table, a simple list of pairs and adjustments.
• Modern OpenType fonts store kerning in the GPOS (glyph positioning) table, using the kern feature. This supports class-based kerning, where whole groups of similar letters share values, and contextual adjustments.

A well-made text font can contain thousands of kerning pairs, often organised by class so that, for example, A, À, Á and Â all kern the same way against V. A poorly made or hastily converted font may have very few, which is one reason free fonts sometimes look uneven in headlines.

You can inspect a font's kerning with the fonttools Python package:

pip install fonttools
ttx -t GPOS -o kerning-dump.ttx MyFont-Regular.ttf
grep -c "PairValueRecord\|Class2Record" kerning-dump.ttx

1842

The count gives a rough sense of how much kerning data the font has. A count near zero for a font you plan to use in large headlines is a warning sign.

Kerning in CSS

Browsers apply a font's kerning automatically for most text, so you rarely need to do anything. CSS gives you control with the font-kerning property:

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

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

code,
pre {
  font-kerning: none;   /* turn kerning off */
}

• auto: Lets the browser decide. Most modern browsers kern by default, though some platforms have historically skipped kerning for very small text to save processing time.
• normal: Always applies the font's kerning data.
• none: Disables kerning.

For headings, logos and any large text where spacing is very visible, setting font-kerning: normal makes your intent explicit.

Kerning and font-feature-settings

You may see older code that enables kerning through low-level OpenType settings:

/* Older approach, avoid when font-kerning will do */
h1 {
  font-feature-settings: "kern" 1;
}

This works but font-feature-settings overrides all features set on that element at once, which makes it easy to switch off other features accidentally. Prefer font-kerning and the font-variant-* properties, and reach for font-feature-settings only for features with no high-level equivalent.

You may also see text-rendering: optimizeLegibility, which was once used to force kerning and ligatures in some browsers. Modern browsers apply kerning without it, and it can slow down rendering of long pages, so there's little reason to add it today.

Monospace Fonts and Kerning

Monospace fonts depend on every character having the same width so that columns line up. Most monospace fonts include no kerning, and applying any would break the grid. Setting font-kerning: none on code is a harmless safeguard.

What Tracking Is

Tracking adds or removes the same amount of space between every character in a selection. It changes the overall texture, or colour, of text: positive tracking makes it lighter and airier, negative tracking makes it darker and denser.

In CSS, tracking is the letter-spacing property. It's best expressed in em so it scales with the font size:

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

Common Tracking Adjustments

• All caps and small caps: Add a little tracking, usually around 0.05em to 0.1em. Capitals are designed to sit next to lowercase letters and look cramped next to each other.
• Large headlines: Reduce tracking slightly, often by 0.01em to 0.03em. Spacing designed for text sizes looks loose when scaled up.
• Small text: Small sizes can benefit from a touch of extra tracking, especially in light text on dark backgrounds.
• Body text: Usually leave it at normal. The font designer spaced it for this purpose.

For a deeper look at those adjustments and their side effects, see letter spacing and when to adjust it.

Kerning vs Tracking at a Glance

	Kerning	Tracking
What it affects	Specific pairs of characters	Every character in the selection
Who usually sets it	The type designer, in the font	You, for each use case
Purpose	Even out awkward pairs	Change overall density of text
CSS control	font-kerning	letter-spacing
Typical use	Always on for proportional text	Headlines, all caps, small text
Applied after the other?	Kerning is applied first	Tracking is added on top of kerning

The last row matters. Tracking doesn't replace kerning. When you add letter-spacing, the browser still applies the font's kerning and then adds your tracking value to every gap, so well-kerned pairs remain balanced.

Manual Kerning for Logos and Headlines

Occasionally the built-in kerning isn't enough. A wordmark, a single large hero word or an unusual combination of characters may still have a gap that bothers you. In print design, you'd kern that pair by hand. On the web, you can do the same by wrapping a character in a span and adjusting its spacing.

<h1 class="wordmark">
  <span class="kern-tight">W</span>AVE
</h1>

.wordmark {
  font-family: "Your Display Font", sans-serif;
  font-size: 6rem;
  font-kerning: normal;
  letter-spacing: 0.02em;
}

/* letter-spacing adds space after the character it is applied to */
.kern-tight {
  letter-spacing: -0.06em;
}

Because letter-spacing adds space after each character, applying a negative value to the W pulls the following A closer.

Keep Manual Kerning Accessible

Splitting a word into spans can cause some screen readers to read letters individually. A safer pattern for a single decorative heading is to keep an accessible label on the element and hide the visual spans from assistive technology:

<h1 class="wordmark" aria-label="Wave">
  <span aria-hidden="true"><span class="kern-tight">W</span>AVE</span>
</h1>

Use this sparingly. Manual kerning only makes sense for fixed text you control, such as a logo or a hero heading. It doesn't scale to content that changes, and a logo is often better delivered as an SVG with the spacing already perfected.

Adjusting Kerning for Dynamic Text With JavaScript

If you need consistent manual kerning for a repeated phrase across a site, a small script can apply it. This example tightens every T that's followed by o inside elements with a data-kern attribute:

document.querySelectorAll("[data-kern]").forEach((el) => {
  const text = el.textContent;
  el.setAttribute("aria-label", text);
  el.innerHTML = "";

  const wrapper = document.createElement("span");
  wrapper.setAttribute("aria-hidden", "true");

  [...text].forEach((char, i) => {
    const span = document.createElement("span");
    span.textContent = char;
    if (char === "T" && text[i + 1] === "o") {
      span.style.letterSpacing = "-0.05em";
    }
    wrapper.appendChild(span);
  });

  el.appendChild(wrapper);
});

Splitting text into individual spans breaks ligatures and some OpenType features, and it adds DOM nodes, so keep it to short headings.

Common Kerning and Tracking Mistakes

• Tracking body text: Adding positive letter-spacing to paragraphs usually hurts readability and breaks ligatures.
• Tight tracking at small sizes: Negative letter-spacing on small text makes letters collide.
• Untracked all caps: Capitals set at default spacing look cramped, particularly in buttons and navigation.
• Using pixels for tracking: A letter-spacing: 2px that looks right at 14px is far too little at 48px. Use em.
• Forgetting trailing space: Browsers add letter-spacing after the last character too, which can make centred text look slightly off-centre. With wide tracking on short centred labels, you can compensate with a matching padding-left or a negative right margin.
• Assuming all fonts are well kerned: Free or converted fonts sometimes lack kerning data. Check headline sizes before committing.

---

FAQ: Kerning and Tracking

---

Conclusion

Kerning and tracking both change the space between letters, but at different scales. Kerning targets specific pairs such as "AV" and "To" to make spacing look even, and it's usually designed into the font and applied by the browser automatically. Tracking applies a uniform change to a whole run of text, and in CSS it's the letter-spacing property you set for particular uses.

In practice, leave kerning on, set font-kerning: normal where large text makes spacing very visible, and use tracking deliberately: a little extra for all caps and small labels, a little less for large headlines, and none for body text. Express tracking in em, check that your fonts actually contain kerning data, and save hand kerning for the rare logo or hero heading that really needs it.