CSS Font Kerning

Please Share On:

Definition:

CSS font-kerning is used to define the space between letters.

Syntax:

font-kerning: auto | normal |none;

Property Value:

Property Value	Description
1. auto	This is a default font-kerning. Your browser decides a font-kerning should be applied or not.
2. normal	applies font-kerning in normal spacing.
3. none	does not applies font-kerning.

1. auto

Definition:

This is a default font-kerning. Your browser decides a font-kerning should be applied or not.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .kerning{
      border: 3px solid black;
      background-color: pink;
      font-kerning: auto;
    }
    </style>
  </head>

  <body>
  	<div class="kerning">This is a paragraph with an auto font-kerning.</div>
  </body>
</html>

Output:

try it yourself

2. normal

Definition:

This property value applies font-kerning in normal space.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .kerning{
      border: 3px solid black;
      background-color: pink;
      font-kerning: normal;
    }
    </style>
  </head>

  <body>
  	<div class="kerning">This is a paragraph with a normal font-kerning.</div>
  </body>
</html>

Output:

try it yourself

3. none

Definition:

This property value does not apply font-kerning and also removes the previously defined font-kerning.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
    .kerning{
      border: 3px solid black;
      background-color: pink;
      font-kerning: none;
    }
    </style>
  </head>

  <body>
  	<div class="kerning">This is a paragraph with a none font-kerning.</div>
  </body>
</html>

Output:

try it yourself

Donate to support writers

You may be interested in the following topics:

Post Views: 319

Definition:

Syntax:

Property Value:

1. auto

Definition:

Source Code:

Output:

2. normal

Definition:

Source Code:

Output:

3. none

Definition:

Source Code:

Output:

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.