The font-kerning property controls whether the browser uses kerning data stored in a font. Kerning nudges specific letter pairs (such as AV or To) so spacing looks more even.
The initial value is auto. It is inherited. For uniform gaps between every character, use letter-spacing instead. Pair with a solid font-family that includes kerning tables.
Not deprecated and not experimental. Baseline widely available in modern browsers.
font-kerning: auto | normal | none | initial | inherit;Three keywords. Most pages leave the default auto alone.
font-kerningPick whether kerning should follow the browser, stay on, or stay off.
font-family that includes kerning pairs.auto for normal reading text in most layouts.normal when you want kerning forced on (headlines, logos).none only when you need raw, unadjusted spacing for comparison or a special effect.| Value | When to use |
|---|---|
auto | Default body text; let the engine optimize |
normal | Force kerning for polished display type |
none | Disable kerning for demos or unusual spacing needs |
Change only font-kerning. Watch pairs like AV and To on a serif face.
Each snippet focuses on font-kerning. Use text with classic kerning pairs so the change is easier to see. Use Try It Yourself for a live editor.
normal applies the font’s kerning pairs whenever they exist.
<style>
p {
font-kerning: normal;
}
</style>
<p>AV WAVE To</p>normal. Kerning must be used if the font has data.AV and To get pair-specific nudges.none ignores the font’s kerning tables.
<style>
p {
font-kerning: none;
}
</style>
<p>AV WAVE To</p>none. Pair adjustments from the font are disabled.normal to see what kerning was doing.auto or normal.Same text twice so you can spot the pair spacing difference.
<style>
.on { font-kerning: normal; }
.off { font-kerning: none; }
</style>
<p class="on">AV WAVE To</p>
<p class="off">AV WAVE To</p>font-kerning differs.normal uses pairs. Look closely at AV and To.none skips pairs. Spacing follows default glyph advances.Kerning is subtle and font-dependent. Do not confuse it with letter-spacing.
If the font has no kerning tables, normal and none can look identical.
auto may disable at small sizesSome browsers skip kerning on tiny text for readability. Use normal if you must force it.
letter-spacing shifts every character equally. Kerning only adjusts stored pairs.
Text without kernable combinations (for example many monospace runs) will not demonstrate the property well.
For other OpenType toggles such as ligatures, see font-feature-settings.
font-kerning is a browser style property. Node.js, Deno, and Bun do not apply it.
Chrome 33+, Firefox 32+, Safari 9+, Edge (Chromium), Opera, Samsung Internet. Not supported in Internet Explorer.
Bottom line: Safe for modern sites. Leave auto for most body text; force normal only when you need guaranteed kerning.
auto — usually the right choice for body text.One line: font-kerning decides whether a font’s built-in letter-pair adjustments are used.
Control how large text renders on the page.
8 people found this page helpful