Controlling Space between Words

FAQ

Is line-height in CSS the same as leading?

Yes. In the print-publishing game, leading is the name for the amount of space between lines of type. In the olden days, when print-shop apprentices needed extra space between lines of type, they physically inserted thin lead plugs. The lead plugs are long gone in modern, electronic typesetting, but the name remains.

Another way to improve legibility, particularly when you work with small type sizes, is to increase the amount of space between words, as in Figure 49.4.

Figure 49.4. Just three pixels of extra word spacing make the paragraph on the left easier to read.

The attribute for the job is word-spacing. This attribute is different from the others so far in that the browser adds whatever value you give to its default amount of word space. So, the following style definition:

 word-spacing: 3px; 

doesn't set the word spacing to 3 pixels, but puts three additional pixels of space between words. Similarly, the style definition:

 word-spacing: -3px; 

TIP

When it comes to long passages of on-screen text, a good rule of thumb is to set the line height to one and one-half times the type size. For example, if the type size is 10 pixels, set the line height to 15 pixels.

If you want even more space, try double-spacing, just as you did when you typed your high school book reviews. For double-spacing, multiply the font size by 2, and set this as the line height.

takes away three pixels of space, making your lines of type tighter. To set word spacing to the browser's default, type this in your style definition:

 word-spacing: normal;