font-kerning
Definition
The font-kerning property in CSS is used to control the spacing between characters in a text element. Kerning refers to the adjustment of the space between individual characters to improve the visual appearance of the text. The property takes a value that specifies the desired level of kerning, with options for enabling or disabling kerning and adjusting the kerning value.
Examples
Enable kerning for headings:
h1, h2, h3, h4, h5, h6 {
font-kerning: normal;
}
Disable kerning for all text:
body {
font-kerning: none;
}
Increase the kerning value for a specific element:
blockquote {
font-kerning: 2em;
}
Values
| Value | Description |
|---|---|
auto | The default value. The kerning is automatically determined by the font and the browser. |
normal | Enables kerning, using the values defined by the font and browser. |
none | Disables kerning for the text element. |
<length> | Sets the kerning to a specific length value, such as em or px. |
Best Practices
- Use font-kerning sparingly, as excessive kerning can reduce readability and legibility of text.
- Use kerning values that are appropriate for the font and content, and consider the intended audience when choosing the level of kerning to apply.
- Test your kerning settings on different devices and browsers to ensure that they are supported and display correctly.
- Consider using other text spacing properties, such as letter-spacing and word-spacing, in conjunction with font-kerning to achieve the desired text appearance.
- Be aware that disabling kerning may have a negative impact on the visual appearance of certain fonts, particularly those with complex letter shapes or ligatures.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |