How to Use CSS for Custom Kerning on Websites

Kerning, the adjustment of space between individual characters in text, is a subtle but powerful typographic tool. Proper kerning improves readability, enhances visual appeal, and gives digital text a polished, professional look. While many web designers rely on default browser spacing or font-inherent kerning, CSS offers various ways to control and customize kerning on websites.

In this article, we’ll explore what kerning is, why it matters in web design, how browsers handle it by default, and most importantly, how you can use CSS to apply custom kerning for better typography. We will dive into practical techniques and best practices that you can implement right away.

What Is Kerning?

Kerning refers to the adjustment of space between two specific characters to achieve visually consistent and aesthetically pleasing text. Unlike tracking (which adjusts spacing uniformly across a range of characters), kerning focuses on pairs of letters, for example, reducing the space between “A” and “V” because their shapes naturally fit closer together.

Traditionally, kerning was done manually by typographers when setting type. Today’s fonts often include kerning information (kerning tables) that automated systems use to adjust spacing automatically.

Why Does Kerning Matter for Websites?

Good kerning:

• Improves Readability: Proper spacing prevents letters from appearing too cramped or too loose, making text easier to read.
• Enhances Visual Balance: Balanced character spacing contributes to an appealing typographic rhythm.
• Reinforces Branding: Custom kerning can help match brand guidelines and maintain consistency across digital assets.
• Adds Professionalism: Attention to detail in typography signals quality and care.

Poorly kerned text can feel amateurish or cause distractions that pull readers out of your content.

How Do Browsers Handle Kerning by Default?

Most modern browsers and operating systems support a level of automatic kerning if the font provides kerning tables via OpenType features. By default:

• Browsers usually enable font-level kerning automatically.
• Some older browsers or specific fonts may not apply kerning consistently.
• There is limited user control over fine-tuning kerning pairs unless explicitly set via CSS or JavaScript.

CSS provides properties to influence this behavior, allowing web designers to enable, disable, or fine-tune kerning as needed.

CSS Properties Related to Kerning

The primary CSS property for controlling automatic kerning is font-kerning. Additionally, letter-spacing allows for uniform spacing adjustments but does not affect individual character pair spacing selectively.

1. font-kerning

This CSS property controls whether the browser should use the font’s built-in kerning information.

Syntax:

font-kerning: auto | normal | none;

• auto , The browser decides whether to apply kerning based on font metadata (default).
• normal , Forces the browser to apply kerning if available.
• none , Disables font-based kerning entirely.

Example:

p {
  font-kerning: normal;
}

2. letter-spacing

This property sets uniform space between all characters in an element but does not provide pair-specific adjustments.

Syntax:

letter-spacing: normal | <length>;

• normal , Default spacing defined by the font.
• <length> , Positive or negative length value (e.g., 0.05em, -0.02em) to increase or decrease space uniformly.

Example:

h1 {
  letter-spacing: 0.05em; /* Slightly expanded */
}

Limitations:

Neither font-kerning nor letter-spacing allows setting individual pair adjustments directly through CSS. To perform custom kerning on specific letter pairs, more nuanced techniques are required.

Techniques for Custom Kerning Using CSS

Since CSS alone doesn’t provide a direct way to adjust spacing between specific letter pairs globally, designers have developed several workarounds:

1. Using font-feature-settings with OpenType Features

OpenType fonts include advanced typographic features such as ligatures, small caps, stylistic alternates, and contextual alternates. Some fonts also provide additional kerning features controlled through OpenType settings.

You can enable or disable these features via the CSS font-feature-settings property:

p {
  font-feature-settings: "kern" 1;
}

Here "kern" enables the kern feature explicitly (equivalent to font-kerning: normal). To disable:

p {
  font-feature-settings: "kern" 0;
}

This method relies heavily on the font supporting these features and applies globally rather than pairwise.

2. Manual Kerning with <span> and letter-spacing

For ultimate control over specific letter pairs in headings or logos where precision is crucial, you can wrap problematic pairs in <span> elements and adjust their spacing individually using negative margins or letter-spacing tweaks.

Example HTML:

<h1>
  C<span class="kern-av">AV</span>e Design
</h1>

CSS:

.kern-av {
  letter-spacing: -0.05em;
}

Alternatively, use relative positioning:

.kern-av {
  position: relative;
  left: -0.05em;
}

This method is labor-intensive but allows precise control over any pair anywhere on your site.

3. Using SVG Text for Custom Typography

If your site requires very precise typography beyond what HTML and CSS offer, especially for logos or display text, you can create text elements in SVG where you can specify exact positioning for each character using attributes such as <text> with <tspan> elements and their dx/dy offsets.

Example SVG snippet:

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="10" y="50" font-family="Arial" font-size="40">
    C<tspan dx="-5">A</tspan><tspan dx="-5">V</tspan>e Design
  </text>
</svg>

While this approach offers maximum typing precision, it’s more suited for headings or logos rather than body copy due to scalability and maintenance concerns.

4. JavaScript-Based Kerning Libraries

There are JavaScript libraries designed specifically to provide fine-grained control over kerning in web typography by manipulating DOM characters dynamically:

• Kern.js , parses text nodes and adjusts letter spacing between specific pairs.
• Lettering.js , wraps letters or words individually in spans so you can target them with CSS.

Usage typically involves:

1. Splitting text into individual characters wrapped in spans.
2. Applying custom styles or offsets per character pair dynamically based on rules you define.

Example with Lettering.js:

$('h1').lettering();
$('.char2').css('margin-left', '-0.05em');

Such libraries add overhead but are powerful for projects needing detailed control without manual span markup everywhere.

Best Practices for Custom Kerning on Websites

When implementing custom kerning on websites, consider these tips:

Use Native Font Kerning When Possible

Enable native font-level kerning via:

body {
  font-kerning: normal;
}

This leverages fonts’ embedded tables for consistent results without manual tweaking.

Limit Manual Adjustments

Only manually kern pairs when necessary, usually in headings or logo text, since applying too much manual span wrapping harms maintainability and performance.

Use Relative Units (em) for Spacing Adjustments

When adjusting letter spacing or margins between characters, use relative units like em so spacing scales appropriately with font size changes and responsiveness.

Test Across Browsers

Kerning support varies slightly across browsers; test your site in Chrome, Firefox, Safari, Edge to ensure consistency especially when enabling/disabling features like font-feature-settings or font-kerning.

Consider Accessibility

Don’t over-tighten letterspacing excessively as it can impact readability especially for users with dyslexia or low vision.

Examples of CSS Custom Kerning Implementation

Here are some practical examples combining techniques discussed above:

Example 1: Enable Font Kerning Globally

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

This ensures all fonts that support kern feature will have it enabled by default enhancing overall text appearance.

Example 2: Manual Pair Adjustment in a Heading

HTML:

<h2>
  L<span class="kern-va">VA</span>NDERSON
</h2>

CSS:

.kern-va {
  margin-left: -0.08em; /* reduce space between V and A */
}

Result: The “V” and “A” appear closer improving visual form of the word “LVANDERSON”.

Example 3: Using Lettering.js For Fine Control (Simplified)

JavaScript:

$(document).ready(function(){
  $('h1').lettering();

  // Tighten space between 'T' (char1) and 'O' (char2)
  $('.char2').css('margin-left', '-0.06em');
});

HTML:

<h1>TOUCH</h1>

This approach automatically wraps each letter allowing CSS targeting individual letters/pairs dynamically without manual markup edits.

Conclusion

Custom kerning is a subtle yet impactful aspect of typography that significantly improves how text looks and reads on websites. While browsers handle basic automatic kerning via font metadata well today, web designers often need finer control, particularly when working with logos, headlines, or branding elements where typographic precision matters most.

CSS provides fundamental tools like font-kerning and letter-spacing, but custom pairwise adjustments require workarounds such as wrapping letter pairs in spans with adjusted spacing or employing SVG text with precise positioning. For scalable solutions on larger bodies of text requiring fine control, JavaScript libraries like Lettering.js offer practical assistance by manipulating character spans dynamically based on logic you define.

By combining native browser capabilities with thoughtful manual tweaking only where necessary, and always testing thoroughly, you can achieve elegant custom kerning tailored perfectly to your website’s typography style while maintaining accessibility and performance standards. With these approaches in your toolkit, your web typography can move beyond the defaults into a refined art form that delights users aesthetically while enhancing readability.