Manipulating Space with CSS

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.

Figure 1. The default rendering of spacing between letters

Figure 2. The styled letterspacing of the text in the heading

Here's the CSS code you'd apply:

h2 { 
 font: bold italic 2em "Helvetica Nue", serif; 
 margin: 0;
 padding: 0;
 letter-spacing: -0.1em;
} 

In this article, we'll take a look at how to use CSS's letter-spacing and word-spacing properties.

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 span element. First, apply the span tag with a class attribute:

<h2><span class="tracking">Ti</span> quande lingues coalesce, li grammatica</h2>

Then, set up a CSS rule using a class selector:

.tracking {
 letter-spacing: -0.1em;
}

Now we will kern the two letters of the span element marked up by tags. With the CSS property set within a class selector, it's possible to reuse the effect. For example, kerning of multiple letter pairs is possible within an h2 element:

<h2><span class="kerning">Ti</span> quande lingues c<span class="tracking">oa
</span>lesce, li gramma<span class="tracking">ti</span>ca</h2>

The use of CSS's letter-spacing property is ideal for creating space between letters in part because it enjoys widespread support in a majority of the popular browsers: Internet Explorer for Windows 4+, Netscape Navigator 6+, Opera 3.5+, Firefox, and Safari all support the CSS property.

In addition to block-level elements, the letter-spacing property is also ideal for providing emphasis to words. Inline elements like em and strong are perfect containers for this sort of use. For example, in this sentence:

As principal, I'm your <em>pal</em>. 

you simply apply the appropriate CSS rule:

em {
 letter-spacing: 0.5em;
}

CSS's Word-Spacing Property

CSS also has a word-spacing property for adjusting the space between words. Figure 3 shows an example of this property in use. Here's the CSS code you'd apply:

h2 { 
 font: bold italic 2em "Helvetica Nue", serif; 
 margin: 0;
 padding: 0;
 word-spacing: 0.33em;
}

Figure 3. Words in the heading are spaced farther apart

Related Reading CSS Cookbook By Christopher Schmitt

The word-spacing property is supported in Internet Explorer for Windows 6+, Internet Explorer for the Macintosh 4+, Netscape Navigator 6+, Opera 3.5+, and Safari.

Best Practices

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 em, however, a value of 1.5 em for the letter-spacing property scales along with the resizing of the text.

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.

Resources

For more information on the properties, I recommend checking out the CSS 2.1 specification for the letter-spacing and word-spacing properties.

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.

• Sample Chapter 2, Page Elements, is available free online.

• You can also look at the Table of Contents, the Index, and the full description of the book.

• For more information, or to order the book, click here.

Return to the Web DevCenter

Comments on this article

---

1 to 2 of 2

2. Trackback from http://channels.lockergnome.com/web/archives/20040923_spacing_with_css.phtml
   Spacing with CSS
   2004-09-23 06:18:51  [View]
   
   
4. Trackback from http://jameszambon.com/articles/archives/2004_09.html#000418
   O'Reilly Network: Manipulating Space with CSS
   2004-09-22 19:36:37  [View]
   
   

1 to 2 of 2