CSS - font-kerning Property

Quiz

CSS font-kerning property controls the use of kerning information in fonts. Kerning refers to the adjustment of space between specific pairs of characters to improve readability and visual appeal. Not all fonts have kerning data.

Syntax

font-kerning: auto | normal | none;

Property Values

Value	Description
auto	Browser decides whether font kerning should be applied or not. Default.
normal	Information of font kerning stored in the font must be used.
none	Information of font kerning stored in the font is disabled.

Examples of CSS Font Kerning Property

The following examples explain the font-kerning property with different values.

Font Kerning Property with None Value

To disable the kerning property of a font, we use the none value. This prevents the application of any kerning adjustments defined for specific character pairs in the font, resulting in uniform spacing between characters. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .kerning-disabled {
            font-family: 'Times New Roman', serif;
            font-size: 56px;
            font-kerning: none;
        }
    </style>
</head>

<body>
    <h2>
        CSS font-kerning property
    </h2>
    <p>
    <strong>
        font-kerning:
    </strong> 
        none (notice the space difference
        between these characters)
    </p>
    <p class="kerning-disabled">
        AV To Wa
    </p>
</body>

</html>

Font Kerning Property with Normal Value

To use the kerning property of a font, we use the normal value. This ensures that the browser uses the font's built-in kerning information, applying the defined spacing adjustments between specific character pairs for better visual harmony. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .kerning-enabled {
            font-family: 'Times New Roman', serif;
            font-size: 56px;
            font-kerning: normal;
        }
    </style>
</head>

<body>
    <h2>
        CSS font-kerning property
    </h2>
    <p>
    <strong>
        font-kerning:
    </strong> 
        normal (kerning property 
        of the font is used)
    </p>
    <p class="kerning-enabled">
        AV To Wa
    </p>
</body>

</html>

Supported Browsers

Property
font-kerning	33.0	79.0	34.0	9.1	20.1

css_reference.htm

Print Page