Kerning

Kerning pairs are most critical at large display sizes, where optically awkward spacing becomes obvious. For body text at 16 to 18 px, individual letter spacing matters less because the eye blends it. Start with your font's built-in kerning (the font-kerning: normal CSS property) and only manually adjust specific pairs when the defaults produce visible gaps. Test kerning at the size you intend to use it, not at a different scale. The typography playground lets you adjust letter-spacing on real text to feel the effect of kerning changes.

Manually kerning body text. Kerning pairs are tuned for display sizes. Applying individual pair adjustments to body copy creates inconsistent spacing that the eye notices more at small sizes than the awkward pairs it was meant to fix. Use the font default kerning for body text and save manual adjustments for headings at 36 px and above.

Testing kerning at the wrong size. A pair that looks too loose at 72 px may look correct at 24 px. Always evaluate kerning at the intended display size, not at an arbitrary preview size.

The pairs that need help are the ones where a vertical stroke meets a diagonal or a wide bowl: AV, WA, To, Ty, and Fe are the usual suspects. At 16px the built-in kerning of a well-tuned font handles nearly all of them, which is why body text rarely needs manual work. At 48px and above the same pairs can show gaps or collisions that no amount of uniform letter-spacing can fix, because tracking applies the same value to every pair.

Browsers turn on kerning by default through the Kern feature requested by font-kerning: normal, whose default is whatever the font file ships. If a webfont is missing pairs, check the font page for an alternative family rather than fighting it in CSS. The typography playground exposes letter-spacing so you can feel how a uniform adjustment differs from real per-pair kerning; for a logo, do the per-pair work in a vector tool and export the mark.