• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Text Controls > Adjusting Word Spacing

Adjusting Word Spacing

Just like adjusting kerning, adjusting word spacing can both help and hinder legibility. Adding a little space between words on the screen can help make your text easier to read, but too much space interrupts the path of the reader's eye across the screen and, therefore, interferes with reading.

In this example (Code 4.2 and Figure 4.2), some of the words are being pressed illegibly close together, and others are separated to give the text a looser appearance.

Code 4.2. I've set up a class for the title to space out the words (and the letters). In addition, this code uses a negative value in <p> tags to press the text together, and overrides that setting with a positive tag in <p> tags with the copy class.

Figure 4.2. The space between letters is stretched slightly for a more relaxed appearance and, further down, compressed to be made illegible.

To define word spacing:


Type the property name, followed by a colon (:) in the CSS definition list.

8px ;

Set the value for word spacing (Table 4.2), using either:

  • A length value representing the amount of space between words (8px, for example)

  • normal, which overrides inherited values


A positive value for word spacing adds more space to the default, and a negative value closes the space. A value of 0 neither adds nor subtracts space but prevents justification (see "Aligning Text Left, Right, and Center" later in this chapter).

Table 4.2. word-spacing Values
Value Compatibility
normal IE4[1], N6, CSS1
<length> IE4[1], N6, CSS1

[1] Mac version only; not available in Windows

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint