CSS font-kerning Property

The font-kerning property controls whether the browser uses a font’s built-in kerning information to adjust spacing between specific pairs of glyphs. Kerning is a pairwise correction supplied by the font designer to reduce visually awkward gaps (for example, between "A" and "V") and is distinct from uniform spacing adjustments such as letter-spacing. When enabled, kerning applies subtle, context-sensitive shifts that preserve the intended shapes and optical relationships of letters, improving typographic color and perceived rhythm.

Under the hood, kerning can come from different tables and shaping rules inside a font; shaping engines and layout systems consult those tables and apply the pair adjustments during text shaping and layout. Those adjustments are small but can be important at display sizes or in tightly set headlines. Kerning interacts with advanced font features: if you need to control OpenType features directly (for example turning specific positioning features on or off), that is typically done via font-feature-settings, and the final appearance will result from the combination of those feature settings and the font’s kerning data.

In practical use, kerning is most noticeable on larger display text and in tight tracking or when specific letter pairs occur frequently; for body text at small sizes the visual difference is subtler but still contributes to overall readability. Designers sometimes disable kerning in specific contexts (such as monospaced UI elements or all-caps labels) and prefer to apply explicit spacing with letter-spacing or to use font feature controls in carefully crafted type systems. Also consider how kerning works across scripts: some scripts and complex shaping systems rely on different positioning mechanisms, so kerning behavior and availability can vary by language and font.

When testing typographic adjustments, always inspect text at multiple sizes, weights, and letter combinations to see real-world effects. Kerning can affect line breaks, justification and optical balance; small pair adjustments can change whether a short word moves to the next line or how a headline reads at a glance. For rendering and performance considerations in tightly constrained environments, you may also want to be aware of how the browser’s rendering choices and optimization strategies influence the final output—some rendering-related controls can be examined via text-rendering.