Letter-Spacing (Kerning)

In the real (print) world, the spacing of characters has the professional name of kerning. Again, CSS has enabled web designers to emulate this tight text control with the letter-spacing property. Where line-height creates extra whitespace between lines of text, so letter-spacing is used to adjust the spacing between characters. Again, normal can be declared to override inherited letter-spacing, but mostly you will declare letter-spacing in pixels. In the following example, letter-spacing is declared only for the grouped headings:

/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px
font: 12px Verdana, Arial, Sans-serif;
line-height:150%;
}

h1, h2 {
letter-spacing:3px;
}

The result can be seen in Figure, where the headings have 3 pixels of whitespace between each character.

On the right, the headings benefit from 3 pixels of letter-spacing.

It is worth noting that unlike line-height, here negative values are allowed, so something like letter-spacing:-0.5em can be used to bunch up the characters if required. Using the em measurement will ensure that the spacing scales if text sizes are increased. This approach is unlikely to aid legibility, however, so use negative spacing with caution. Use letter-spacing only when absolutely necessary. Increasing the whitespace between characters rarely makes text more legible, and only serves to make life more difficult for those with reading difficulties.

Many designers like to ensure many other font properties are set first, and leave line-height and letter-spacing until last. It can be that final touch that sets a design apart, and shows that the designer has a good approach to legibility and type design.

[Back] [Contents] [Next]