CSS - 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.

Example

 

CSS
p {
  font-kerning: none;
}

Syntax  

CSS
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

CSS
auto <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> normal <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> none

Description  

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.

Example of font-kerning

Initial valueauto
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

See Also  

Specifications  

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

Browser Compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 32[1] 34 (34)[2] 10[3] ? 7
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 34.0 (34)[2] ? ? 7

[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

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

CSS Content

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

JS Content

JavaScript
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;

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/font-kerning

CSS CSS Property Fonts Property Reference