In traditional typography we kern type. It has been known for a very long time that for readability we need to set some letters closer together than others. This is particularly 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 of -0.1em applied whole word. This makes the word more visually correct.
<div class="kern">West<div>]Visually this is much better but there still is an issue with the W
and the e
. These two letters should to be even closer together to be optically correct. It is possible to do this with using a <span> however this approach causes problems with some screen readers which treat the various span elements as separate words and reading them accordingly. To see this example try reading the word west
below:
westwith kerning of -0.1em applied whole word and -0.14em Kerning applied to the letter
Wcausing it to move closer to the letter
e. This makes the word visually correct but interferes with some screen readers.
<div class="kern"><span style="letter-spacing: -0.14em;">W</span>est<div>]At this time we can only effectively kern letters at the whole division level due to the constraints of screen readers. 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 increases so doe the need for kerning and this seems particularly true in web browsers.
To see how kerning was done on this page please view the page code with your browser. Below are the styles used:
.typeex {
text-align: center;
font-size: 150pt;
}
.kern {
letter-spacing: -0.1em;
text-align: center;
font-size: 150pt;
}
Greg Kearney, February 2008
