This article needs a technical review. How you can help.
Our volunteers haven't translated this article into عربي yet. Join us and help get the job done!
Summary
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
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
<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;