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.
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.
Option 2) LetteringJS
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.
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.