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

Chapter 4. Text Controls > Adjusting Leading

Adjusting Leading

Anybody who has ever typed a term paper knows that these papers usually have to be double-spaced, to make reading easier and to allow space for comments to be written on the page. Space between lines (leading) also can be increased for a dramatic effect by creating areas of negative space between the text. The line-height property adds space between the baselines (the bottoms of most letters) of lines of text.

In this example (Code 4.3 and Figure 4.3), the copy has been double-spaced, and the citation text has its line height set slightly above the font size.

Code 4.3. Text with the class copy will be double-spaced while the <cite> tag will have less than a single space between each line.

Figure 4.3. The text is double-spaced for regular text. The leading is closer for quotes.

To define leading in a rule:


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

Type the value for the line height (Table 4.3), using one of these options:

  • A number to be multiplied by the font size to get the spacing value (2 for double spacing, for example).

  • A length value, such as 24px. The space for each line of text is set to this size regardless of the designated font size. So if the font size is set to 12px and the line height is set to 24px, the text will be double-spaced.

  • A percentage, which sets the line height proportionate to the font size being used for the text.

  • normal, which overrides inherited spacing values.

Table 4.3. line-height Values
Value Compatibility
normal IE3, N4, CSS1
<number> IE4, N4, CSS1
<length> IE3, N4, CSS1
<percentage> IE3, N4, CSS1


Adding space between lines of text enhances legibility—especially in large amounts of text. Generally, a line height of 1.5 to 2 times the font size is appropriate for most text.


To double-space text, set the line-height value as either 2 or 200%. Likewise, 3 or 300% results in triple-spaced text.


You can use a negative value to smash text lines together. Although this effect may look neat, it probably won't ingratiate you with your readers.


Line height can also be defined in the font property (see "Setting Multiple Font Values" in Chapter 3).

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