CSS font-kerning Property

What You’ll Learn

The font-kerning property controls whether the browser uses a font's built-in kerning data to adjust spacing between letter pairs. It helps headings and display text look more polished.

Introduction

The font-kerning property in CSS controls the usage of kerning information stored in a font. Kerning adjusts the spacing between certain pairs of characters to make the text look visually appealing.

Definition and Usage

This property can enhance the readability and appearance of your text by fine-tuning spacing based on the font's kerning data. Use it on headings, logos, and large display type where uneven gaps between letters are most noticeable. For uniform spacing across all characters, use letter-spacing instead.

📝 Syntax

The syntax for the font-kerning property is straightforward. It can be applied to any text-containing element:

element {
  font-kerning: value;
}

Here, value can be one of the following:

• auto
• normal
• none

Basic Example

h1 {
  font-kerning: normal;
}

Default Value

The default value of the font-kerning property is auto, which lets the browser decide whether to use kerning information based on the font and other text settings.

Syntax Rules

• Accepts exactly three keyword values: auto, normal, and none.
• Effects depend on the font including kerning tables.
• The property is inherited.
• Kerning is most visible at larger font sizes and in uppercase text.
• Do not confuse with letter-spacing, which affects all characters uniformly.

💎 Property Values

Kerning vs letter-spacing

Kerning adjusts individual letter pairs using font metrics (for example, pulling A and V closer). letter-spacing adds the same amount of space between every character, which is useful for tracked uppercase labels but is not true kerning.

Examples Gallery

In this example, we compare the effect of different font-kerning values on text — plus headings, display type, and when to disable kerning.

<style>
  .kerning-auto { font-kerning: auto; }
  .kerning-normal { font-kerning: normal; }
  .kerning-none { font-kerning: none; }
</style>

<p class="kerning-auto">Kerning auto: AVATAR</p>
<p class="kerning-normal">Kerning normal: AVATAR</p>
<p class="kerning-none">Kerning none: AVATAR</p>

h1 {
  font-family: Georgia, serif;
  font-kerning: normal;
  letter-spacing: 0;
}

.hero-title {
  font-size: 3rem;
  font-kerning: normal;
  text-transform: uppercase;
}

.no-kerning {
  font-kerning: none;
}

♿ Accessibility

• Kerning generally improves readability for body and heading text when used appropriately.
• Do not reduce contrast or size assuming kerning alone will fix legibility issues.
• Avoid extreme letter-spacing plus kerning tweaks that make words hard to parse.
• Test at real reading sizes, not only large demo headings.
• Keep content readable if you disable kerning for stylistic reasons.

💡 Best Practices