Kerning your Typography on the Web

Kerning is the process of adjusting the spacing between two specific letters or pairs within typography. It’s not to be confused with tracking which is the spacing between letters (letter-spacing) or leading which is the spacing between lines (line-height). The kerning process has been used throughout the history of printed text but is less commonly used on the web.

With the introduction and increasing popularly of custom web fonts the need to adapt and modify these fonts has become apparent and solutions to these problems have arisen.

View Examples / Demo{.btn.btn-primary}

There are two main options available to increasing the legibility and appearance of your fonts. The first is an in-built CSS browser property to improve the fonts legibility automatically and the second option is to manually change some text’s kerning manually.

Option 1) Text-Rendering CSS#

The first option is better for dynamic text or large amounts of text like paragraphs, as it just does it, but it won’t do anywhere near as complete job as doing it manually. It works by changing the kerning on certain letter pairs, for example ‘WA’ would be detected and looked up in a table and adjusted accordingly.

This can be used by adding the text-rendering property to your CSS and is supported in Safari 5, Chrome and Firefox Nightly — at the moment.

text-rendering: optimizeLegibility;

Read More About CSS Text Rendering

Option 2) LetteringJS#

The second option would be to use a JavaScript library like LetteringJS to manually adjust headlines. This is a better option for static sites with large headlines as you can adjust each character individually, changing the kerning, rotation, size and more. Although this gives you more flexibility it does mean loading an extra JS file and it is dependent on the jQuery library.

As an extra, to make using LetteringJS easier to use, you can use a bookmarklet called KernJS which allows you to make any adjustments by dragging the letters and giving you the CSS needed for LetteringJS.

View LetteringJS

Futher Reading#

Designshack has a good article which covers thoroughly what kerning is and how it can be used on the web which is worth a read.