1. css
  2. /properties
  3. /font-kerning

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

ValueDescription
autoThe default value. The kerning is automatically determined by the font and the browser.
normalEnables kerning, using the values defined by the font and browser.
noneDisables 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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes