In traditional typography we kern type. It has been known for a very long time that for readability we need to set some letter closer together than others. This is partially true as the size of type increases. Consider the example below:
westwith no kerning applied there is too much space between the letters making it difficult for the visual reader.
In this example all of the letters are too far apart. In particular the W
and the e
resulting in a word that is difficult to read. Web designers often attempt to deal with this by using images which have had their letters kerned. Using images where text would do is not advisable as it is often not accessible to the blind. Rather we can use the letter-spacing command in CSS to kern type. Kerning type with CSS insures that the page will continue to be accessible to blind and print disabled users while providing the designer with the needed tools to produce visually appealing type. Consider the type below:
westwith kerning off -0.1em applied whole word. This makes the word more visually correct.
Visually this is much better but there still is an issue with the W
and the e
. These two letters need to be even closer together to be optically correct. We can use a <span> to do this:
westwith kerning off -0.1em applied whole word and -0.14em Kerning applied to the letter
Wcuasing it to move closer to the letter
e. This makes the word visually correct.
Kerning type is a very visual skill. Some typesetting programs such as TeX and adobe products have algorithms and tables to do kerning however at this time no such systems exist for CSS. As a rule as type size increses so doe the need for kerning and this seems partculy true in web browsers.
To see how kerning was done on this page please view the page code with your browser.
Greg Kearney, February 2008
>
