optical-kerning-and-pairs

name	optical-kerning-and-pairs
description	Use when crafting display-size typography. Default browser kerning is mechanical; optical kerning adjusts pair-by-pair for visual balance.

Optical Kerning and Pairs

Optical kerning > metric kerning at display sizes. Pair-by-pair adjustment for 'Av', 'To', 'WA', 'fy' eliminates awkward gaps.

CSS for kerning

h1, h2, .display {
  font-feature-settings: 'kern' 1;
  font-kerning: normal;
  letter-spacing: -0.02em; /* slight tightening at display size */
}

For display fonts (Fraunces, etc.) with built-in optical pair tables, this enables them. Inter Tight has metric kerning only.

Problem pairs

Common pairs that need attention:

• 'A' + 'V' (gap)
• 'T' + 'o' (gap)
• 'W' + 'A' (gap)
• 'f' + 'y' (collision)
• 'r' + 'n' (looks like 'm')
• 'l' + 'i' (looks like 'h')

Manual override per pair: letter-spacing on inline span.

When to optical-kern

1. Display headlines (40pt+)
2. Logo type
3. Section headers
4. Hero CTAs
5. Pull-quotes

Don't bother with body text — default metric kerning is fine at 14-18pt.

Where this fits in the X3 empire

Applied to CardPrepAI hero headlines and CTAs. Eliminates the 'web-default' look.