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

chrome edge firefox safari opera
33.0+
29.0-32.0 -webkit-
34.0+ 9.1+
7.0-9.0 -webkit-
20.0+
16.0-19.0 -webkit-

Practice Your Knowledge

What is Font-Kerning in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?