font-kerning

The font-kerning CSS property controls the usage of the kerning information; that is, it controls how letters are spaced. The kerning information is stored in the font, and if the font is well-kerned, this feature allows spacing between characters to be very similar, whatever the characters are.

Initial value	auto
Applies to	all elements. It also applies to ::first-letter and ::first-line.
Inherited	yes
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

font-kerning: auto;
font-kerning: normal;
font-kerning: none;

/* Global values */
font-kerning: inherit;
font-kerning: initial;
font-kerning: unset;

Values

auto

This keyword defers to the browser regarding whether to use kerning. When the font size is small, font kerning may look strange and browsers will disable it. This is the default value.

normal

This keyword requires kerning to be applied.

none

This keyword prevents the browser from using the kerning information stored in the font.

Formal syntax

auto | normal | none

Examples

p {
  font-kerning: none;
}

Specifications

Specification	Status	Comment
CSS Fonts Module Level 3 The definition of 'font-kerning' in that specification.	Candidate Recommendation	Initial definition

Browser Compatibility

[1] Requires prefix -webkit-font-kerning. First version supporting this property is not known.

[2] Experimental implementation was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.

[3] OpenType layout features might be supported using font-feature-settings property, however individual font-kerning property is not supported.

Kerning Demo

HTML Content

<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>

CSS Content

#nokern, #kern {
  font-size: 2rem;
  font-family: serif;
}
#nokern {
  font-kerning: none;
}
#kern {
  font-kerning: normal;
}

JS Content

var input  = document.getElementById('input'),
    kern   = document.getElementById('kern'),
    nokern = document.getElementById('nokern');
input.addEventListener('keyup', function() {
  kern.textContent = input.value; /* Update content */
  nokern.textContent = input.value;
});
kern.textContent = input.value; /* Initialize content */
nokern.textContent = input.value;

See also

• font-variant, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-ligatures, font-variant-numeric, font-variant-alternates, font-synthesis, letter-spacing.