Saturday, October 23, 2010

Css Tutorial : 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;
}
■Note 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.

No comments:

Post a Comment