CSS font-kerning Property
The font-kerning CSS property controls the kerning information of the font. Read about values and try some examples.
The CSS font-kerning property controls whether the browser uses the kerning information stored in a font.
Kerning is the adjustment of spacing between specific pairs of characters so that the text looks evenly balanced. Without kerning, every glyph keeps its default side-bearing, which can leave awkward gaps after letters like A, V, T, or W. Type designers ship a font with a table of kerning pairs (for example AV, To, We) telling the renderer to pull those letters closer together. font-kerning decides whether that table is applied.
Kerning is purely about the space between glyphs. Don't confuse it with letter-spacing, which adds a fixed amount of tracking to every character regardless of the pair.
When to use it
For most pages you never need to touch font-kerning — modern browsers enable kerning by default for body text. You reach for it in two situations:
- Force kerning on small text. Some browsers turn kerning off below a certain size for performance. Setting
font-kerning: normalmakes it apply at all sizes — useful for fine typography like headings or pull quotes. - Turn kerning off with
font-kerning: none. This is occasionally needed for monospaced layouts, tabular data, or when you measure text width yourself and want predictable, kerning-free advances.
If the font has no kerning table, the property has no visible effect.
| Initial Value | auto |
|---|---|
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.fontKerning = "none"; |
Syntax
Syntax of CSS font-kerning Property
font-kerning: auto | normal | none;Comparing kerning on and off
The pairs AV, WA, and To show kerning most clearly. In the example below the first block forces kerning on, the second turns it off, so you can see the gaps grow:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
font-family: serif;
font-size: 60px;
}
div.kerned {
font-kerning: normal;
}
div.unkerned {
font-kerning: none;
}
</style>
</head>
<body>
<h2>font-kerning property example</h2>
<div class="kerned">AVATAR WAVE To</div>
<div class="unkerned">AVATAR WAVE To</div>
</body>
</html>The difference is most noticeable at large sizes and in serif fonts, which usually carry richer kerning tables.
Values
font-kerning accepts one of three keywords:
| Value | Description |
|---|---|
auto | Lets the browser decide whether to apply kerning. This is the default. Browsers usually enable it but may disable it at very small sizes. |
normal | Always applies the font's kerning information. |
none | Disables kerning; glyphs keep their default spacing. |
Related properties
font-kerning is part of the OpenType typography controls in CSS. These pair well with it:
letter-spacing— add or remove uniform space between all letters.font-feature-settings— low-level access to OpenType features (kernis the featurefont-kerningexposes through a friendlier name).font-familyandfont-variant— choose and refine the typeface.
Browser default behavior
Because the initial value is auto, leaving the property unset is fine for most text — kerning still happens. Set it explicitly only when you need to guarantee one behavior across browsers, such as font-kerning: normal on display headings.