CSS font-kerning Property

Kerning is the spacing between letters. It's part of the font file.

It can make text easier and more pleasing to read.

The font-kerning property enables kerning.

Example

#

Two lines of text: one with and the other without font-kerning. Notice how the word 'Text' in the first line appears more balanced than the second line.

Text with font kerning.

Text without font kerning.

<style>
  .kerning {
    font-kerning: normal;
    font-family: serif;
    font-size: 50px;
  }

  .nokerning {
    font-kerning: none;
    font-family: serif;
    font-size: 50px;
  }
</style>

<p class="kerning">Text with font kerning.</p>
<p class="nokerning">Text without font kerning.</p>
Note: Not all fonts come with kerning information.

Syntax

font-kerning: auto | normal | none;

Values

#

Values Description
auto Default. The browser determines whether font-kerning is beneficial or not.
normal Font-kerning is applied.
none Font-kerning is not applied.

Browser support

This table shows when font-kerning support started for each browser.

Chrome
32.0 Jan 2014
Firefox
34.0 Dec 2014
IE/Edge
10.0 Sep 2012
Safari
7.0 Oct 2013

You may also like

Guides