|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Manipulating Space with CSSby Christopher Schmitt, author of CSS Cookbook
One of the main strengths of Cascading Style Sheets (CSS) is how the technology handles web typography. Web designers and developers no longer have to use a puzzling array of nested fonts, b elements, and single-pixel GIFs (SPGs) to create compelling text treatments. For example, CSS easily renders effects like adjusting the space between two letters, or separating whole words within a paragraph.
Say you want to use CSS properties to apply spacing effects between the letters within words. For example, you want to tighten the space between the letters in the heading shown in Figure 1 so that they render as shown in Figure 2.
Here's the CSS code you'd apply:
In this article, we'll take a look at how to use CSS's
CSS's Letter-Spacing Property
The adjustment of the space between letters to create a better aesthetic is an old tradition in graphic design. There are two terms that describe how the change in the space is adjusted: kerning and tracking. Kerning is a design term used to describe the changing of the space between a pair of letters to create a better visual effect. An example of kerning is adjusting just the space between an uppercase T and a lowercase o. Tracking involves more than a pair of letters; it adjusts the space between letters over a large amount of text.
In Figure 2, tracking was used to create the letterspacing effect. The best way to adjust the space between letters within a block of text is to use the
Then, set up a CSS rule using a class selector:
Now we will kern the two letters of the
The use of CSS's
In addition to block-level elements, the
you simply apply the appropriate CSS rule:
CSS's Word-Spacing Property
CSS also has a
In terms of best practices, it's better that the letter- and word-spacing unit values are set in relative unit sizes instead of absolute length units. Since users can redefine the font sizes of their browsers, a fixed width value of 5 points originally intended for font size at 12 pixels will still be 5 pixels even if the user resizes the text to a larger value. In other words, the 5-point spacing between letters is barely going to be noticeable when the font size is set to, say, 72 pixels or larger. With relative units like
Also, it's best to employ the text effects so that the text being styled is still legible. If communication is important to you or your client, a subtle effect is better than creating esoteric text elements. If the text becomes illegible, you might annoy the very people you are trying to reach.
Christopher Schmitt has been working with the Web since 1993. He is the author of several books on web design and digital imaging, including O'Reilly's CSS Cookbook, as well as a contributor to many web development magazines.
In August 2004, O'Reilly Media, Inc., released CSS Cookbook.
Return to the Web DevCenter