font-kerning CSS property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The font-kerning CSS property sets the use of the kerning information stored in a font.
Try it
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
"We took Tracy to see 'THE WATERFALL' in W. Virginia."
</div>
</section>
section {
font-family: serif;
}
Kerning affects how letters are spaced. In well-kerned fonts, this feature makes character spacing more uniform and pleasant to read by reducing white space between certain character combinations.
In the image below, for instance, the examples on the left do not use kerning, while the ones on the right do:
Syntax
css
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
/* Global values */
font-kerning: inherit;
font-kerning: initial;
font-kerning: revert;
font-kerning: revert-layer;
font-kerning: unset;
Values
auto-
The browser determines whether font kerning should be used or not. For example, some browsers will disable kerning on small fonts, since applying it could harm the readability of text.
normal-
Font kerning information stored in the font must be applied.
none-
Font kerning information stored in the font is disabled.
Formal definition
| Initial value | auto |
|---|---|
| Applies to | all elements and text. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
font-kerning =
auto |
normal |
none
Examples
Enabling and disabling kerning
HTML
html
<div id="kern"></div>
<div id="no-kern"></div>
<textarea id="input">AV T. ij</textarea>
CSS
css
div {
font-size: 2rem;
font-family: serif;
}
#no-kern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
JavaScript
js
const input = document.getElementById("input");
const kern = document.getElementById("kern");
const noKern = document.getElementById("no-kern");
input.addEventListener("keyup", () => {
kern.textContent = input.value; /* Update content */
noKern.textContent = input.value;
});
kern.textContent = input.value; /* Initialize content */
noKern.textContent = input.value;
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-kerning-prop |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
font-kerning
|
|
|
|
|
|
|
|
|
|
|
|
|
auto
|
|
|
|
|
|
|
|
|
|
|
|
|
none
|
|
|
|
|
|
|
|
|
|
|
|
|
normal
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Requires a vendor prefix or different name for use.
- Has more compatibility info.