Tracking and kerning

Both words are about the space between letters, but they work at completely different scopes: tracking loosens or tightens everything evenly, kerning corrects specific pairs. In design software they are usually two separate fields; in CSS they are letter-spacing and font-kerning.

Tracking: uniform adjustment#

Tracking adds or removes space between all characters in a run. Its job is to compensate for size:

• large type (headlines, posters) usually wants negative tracking, because spacing designed for text looks loose when scaled up;
• small type (captions, footnotes) wants positive tracking, otherwise letters blur together.

In CSS that is letter-spacing:

.display {
  font-size: 64px;
  letter-spacing: -0.02em;
}

.caption {
  font-size: 12px;
  letter-spacing: 0.01em;
}

Use em, not px, so the ratio survives a size change.

⚠️ A CSS detail: letter-spacing is added after every character (including the last), so centred or right-aligned text looks slightly off-centre — that extra space is really there.

Start with the overall looseness, then look at the pairs: the last option turns kerning off, and the gaps in WAVE and To open up.

Kerning: pair corrections#

Kerning adjusts only certain pairs. The classic cases are AV, To, TA, yo: their shapes naturally leave a large hole, so the designer writes a negative value for exactly that combination.

It lives in the kern feature of the GPOS table (see GSUB / GPOS); very old fonts put it in a separate kern table.

In CSS that is font-kerning:

body {
  font-kerning: normal;   /* the default: use the font's kerning */
}

Turning it off generally makes typography worse, unless you are setting code or tables where strict equal spacing matters.

Telling them apart#

A quick test:

• "the whole block looks too loose / too tight" → tracking;
• "the gap between these two letters is too big" → kerning.

Marking AV to be tightened on a layout is kerning; "body at -10" is tracking.

Chinese and mixed setting#

Chinese has no notion of kerning: Han characters sit in equal-width frames and need no pair corrections. What Chinese calls 字距 is closer to tracking, and it also has to consider:

• full-width punctuation: a full stop or comma carries half-width white space and looks hollow next to Latin letters;
• mixed Chinese and Latin: a little space between them is desirable (CSS text-spacing-trim / text-autospace do this, with uneven support);
• line-start and line-end rules (avoiding punctuation at the edges): a line-breaking rule, not a spacing one.

That is why copying Western tracking values into Chinese type looks bad.

Adjusting it here#

The type preview has a spacing control in em — exactly letter-spacing, so what you see is what CSS would do.

Kerning is baked into the font and has no switch here; it is on by default (font-kerning: auto, applied when the font has kern data).

One easily missed consequence#

More letter-spacing means fewer characters per line, so every line break moves. When adjusting spacing, look at the whole paragraph, not one line — watch for ugly breaks at line ends.

Further reading#

• MDN: letter-spacing, font-kerning
• OpenType spec: the kern feature in GPOS
• This site: GSUB / GPOS