Kerning

Kerning is the typographic adjustment of space between specific pairs of letters to achieve visually uniform spacing. The term comes from the kern -- the part of a metal type character that extends beyond its body. In digital typography, certain letter combinations like AV, To, WA, LT, or Yo naturally produce large visual gaps due to the shapes of the letters, and kerning reduces this space to create text that looks evenly spaced even when it is not mathematically uniform.

Why Kerning Is Necessary

In a perfectly monospaced system, every character occupies the same horizontal width -- this causes large gaps between certain diagonal-diagonal or diagonal-straight combinations. Proportional fonts use advance widths to get closer to visual evenness, but the geometry of certain pairs still produces awkward gaps:

Without kerning:
A V   (visually: wide gap between the two)
T o   (gap visible under T's arm)

With kerning:
AV    (gap removed -- characters moved closer)
To    (o tucked slightly under T's arm)

Kerning in OpenType Fonts

Fonts store kerning data in either the old kern table or the newer, more powerful OpenType GPOS (Glyph Positioning) table. The GPOS approach supports contextual kerning -- adjustments that depend on surrounding characters, not just the immediate pair.

CSS Kerning Control

/* Enable kerning -- usually on by default in modern browsers */
body {
  font-kerning: auto; /* default: browser decides */
}

/* Force enable kerning */
.kerned {
  font-kerning: normal;
  font-feature-settings: 'kern' 1;
}

/* Disable kerning -- useful for animated text where
   character-by-character animation should not shift positions */
.no-kern {
  font-kerning: none;
  font-feature-settings: 'kern' 0;
}

Kerning vs Tracking

Kerning and tracking (letter-spacing) are often confused:

/* These are independent -- both can be active simultaneously */
.heading {
  font-kerning: normal;  /* pair-specific adjustments */
  letter-spacing: 0.05em; /* uniform additional space for all pairs */
}

Kerning in SVG and Canvas

<!-- SVG text with kerning control -->
<text style="font-kerning: auto">AV</text>
<text style="font-kerning: none">AV</text>

// Canvas API -- kerning is applied by the browser text rendering engine
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '48px serif';

// Measure text (kerning typically applied by default)
const kerned = ctx.measureText('AV').width;
console.log('Width with kerning:', kerned);

When to Disable Kerning

Kerning should typically be disabled in these scenarios:

1. Letter-spaced headings -- Adding letter-spacing to already-kerned text can produce inconsistent results; disable kerning and use uniform spacing instead
2. Animated text -- Kerning shifts individual character positions; disabling it makes character-level animation predictable
3. Fixed-width tabular data -- In tables with column alignment requirements, kerning can shift characters

/* Letter-spaced display type: disable kern, use uniform tracking instead */
.display-heading {
  letter-spacing: 0.2em;
  font-kerning: none;
  font-feature-settings: 'kern' 0;
  text-transform: uppercase;
}

OpenType Pair Adjustment Records

At the font level, kerning is stored as a list of glyph ID pairs with associated x-offset values. A font might specify that glyph 36 (A) followed by glyph 57 (V) should have -80 units of horizontal space removed. These adjustments are in font units (typically 1/1000 or 1/2048 of an em) and are scaled proportionally to the rendered font size.