Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS font-kerning

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


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides