Tuesday, September 14, 2010

Setting letter-spacing and word-spacing

The letter-spacing and word-spacing properties work in the same way, taking length
values or a default of normal. For letter-spacing, the value increases whitespace between
characters, and for word-spacing, the defined value increases whitespace between words.
Negative values are permitted, which cause characters or words to bunch together (or
kern, if you’re a graphic designer). A certain amount of experimentation is recommended
if you decide to use these properties. Because the Web’s resolution is low, subtle kerning
changes are hard to achieve online, and the results often end up looking clunky. Also,
spacing varies from platform to platform. One occasion when letter-spacing is worth
experimenting with, however, is when styling headings for web pages: a small increase in
the letter-spacing value can help further distinguish headings from body copy.
Examples of these properties in use are shown in the following code block:

h1 {
letter-spacing: 3px;
}
h2 {
word-spacing: 2px;
}

No comments:

Post a Comment