CSS font-kerning Property

The font-kerning property controls the use of the kerning information stored in a font. Kerning defines the spacing of the letters.

Kerning specifies how the letters are spaced. It makes character spacing more pleasant to the eye and easier to read.

Initial Value auto
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.fontKerning = "none";

Syntax

font-kerning: auto | normal | none;

Example of the font-kerning property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      div {
      font-family: serif;
      font-size: 20px;
      }
      div.example1{
      font-kerning: normal;
      }
      div.example2{
      font-kerning: auto;
      }
    </style>
  </head>
  <body>
    <h2>Font-kerning property example</h2>
    <div class="example1">The text is with font kerning.</div>
    <div class="example2">The text is without font kerning.</div>
  </body>
</html>

Values

Value Description
auto It depends on the browser if font-kerning should be set or not. This is the default value of the property.
normal Sets the font kerning.
none Does not set the font kerning.

Browser support

33.0+
29.0-32.0 -webkit-
x 34.0+ 9.1+
7.0-9.0 -webkit-
20.0+
16.0-19.0 -webkit-


Do you find this helpful?

Related articles