CSS font-kerning Property

CSS font-kerning Property

The font-kerning property in CSS controls the spacing between specific pairs of characters, improving readability and typography. Kerning adjusts character spacing based on predefined font rules, ensuring visually pleasing text.

1. Syntax

selector {
  font-kerning: value;
}

2. Property Values

Value	Description
auto	Default. Uses the font’s built-in kerning information.
normal	Enables kerning (same as auto).
none	Disables kerning, using uniform spacing between letters.

3. Example Usage

A. Enabling Kerning (Default)

p {
  font-family: "Georgia", serif;
  font-kerning: normal;
}

✅ Uses the font’s built-in kerning pairs.

B. Disabling Kerning

h1 {
  font-family: "Arial", sans-serif;
  font-kerning: none;
}

✅ Turns off automatic kerning adjustments, using uniform spacing.

4. Why Use font-kerning?

• Enhances readability and visual appeal.
• Ensures consistent text spacing in professional typography.
• Useful for fine-tuning text layouts in branding, logos, and headings.

5. Browser Support

🔹 Supported in: Chrome, Edge, Firefox, and Safari.
🔸 Alternative: Use letter-spacing for manual adjustments:

p {
  letter-spacing: 0.05em;
}

6. Visual Example

Text without kerning	Text with kerning
AV (too much space)	AV (proper kerning)