Using the Letter-Spacing Property


As with word spacing, increasing or decreasing the distance between the letters in a word should be done with moderation. Begin with small amounts if your intention is to improve readability.

Adjusting the letter spacing is seldom done in running text. When it is used, it is often because tradition calls for it. For example, a publisher producing a "critical edition" (a book comparing different versions of another book) often demands that letter spacing be used in certain types of footnotes. Professional designers often frown on the use of letter spacing for anything other than titles because it interferes with the spacing between the letters of a font. The font's designer has usually carefully determined the optimal distance between each pair of letters ab, bo, bi, Bl, and so on to achieve a uniform look for all pairs. Some pairs, such as VA, require less space between them, otherwise they look too spaced. Simply adding or subtracting a fixed amount of space is likely to give less-than-pleasing results. Increasing the spacing may cause nonuniform distribution of white space. Decreasing the spacing may cause some letters to touch each other while others don't. Also, if the shapes of certain combinations of letters don't match very well, the font designer may have provided ligatures to replace them. However, when a nonzero letter-spacing value is requested, those ligatures must be abandoned, and you end up with a displeasing match of characters.

Justification may also affect letter spacing. With the normal value, the browser is free to change the letter spacing to justify text. By setting letter spacing explicitly to 0 or another length value, you prevent the browser from doing this. A 0 value means the letter spacing will not be changed, while any other length value means the browser must change the letter spacing by that exact amount.

Figure 7.7 shows examples of two fonts, each with normal letter spacing, less than normal letter spacing, and more than normal letter spacing.

Figure 7.7. Examples of letter-spacing, using Helvetica and Times as examples: (a) normal text; (b) positive letter spacing; (c) negative letter spacing. As the examples show, letter spacing is useful for uppercase, but much less for lowercase text.


You may sometimes want to adjust the letter spacing to achieve a certain dramatic effect. For example, stretching a word is an alternative way of emphasizing it. This was commonly done in the nineteenth century, especially in German books, primarily because the font used in them didn't have an italic variant. (Onscreen, there are many other ways to emphasize text besides italicizing it; for example, by using color.) Figure 7.8 shows text in German Fraktur font with the word "emphasizing" stretched to draw attention to it.

Figure 7.8. Example of stretching a word for emphasis. This used to be common with the German Fraktur font, which is shown here.


Today, explicit letter spacing is still used in titles; often extreme values are used to achieve extreme effects. Figure 7.9 shows examples.

Figure 7.9. Examples of letter spacing: (a) lem; (b) 0.7em; (c) -0.25em for the word "NARROW" and 0.3em for "WIDE."




Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net