Recipe 2.23. Changing Line Spacing

Problem

You want to leave more or less space between lines. Figure 2-38 shows the browser default, and Figure 2-39 shows paragraphs with half again as much space.

Figure 2-38. The default leading of a paragraph

Figure 2-39. Increased leading between the lines of text

Solution

Use a line-height value:

p {  line-height: 1.5em; }

Discussion

As the line-height value increases, the distance between the lines of text grows. As the value decreases, the distance between the lines of text shrinks and eventually the lines overlap each other. Designers notice a similarity to line height and leading.

A line-height value can be a number and a unit such as points, just a number, or a number and a percentage symbol. If the line-height value is just a number, that value is used as percentage or a scale unit for the element itself as well as for child elements.

Negative values aren't allowed for line-height.

The following example effectively sets the font-size to 12px and the line-height to 14.4px (10px * 1.2) * 1.2px = 14.4px):

body {  font-size: 10px; } p {  font-size: 1.2em;  line-height: 1.2; }

You also can set the line-height property with the shorthand font property when paired with a font-size value. The following line transforms any text in a p element to have a font size of 1em, to have a line-height of 1.5em, and to display in a sans-serif typeface:

p {  font: 1em/1.5em sans-serif; }

Problem

Figure 2-38. The default leading of a paragraph

Figure 2-39. Increased leading between the lines of text

Solution

Discussion

See Also