Setting the Line Height

Line height refers to a paragraph's leading, that is, the amount of space between each line in a paragraph. Using a large line height can sometimes make your body text easier to read. A small line height for headers (with more than one line) often makes them look classier.

Tips

You can specify the line height together with the font family, size, weight, style, and variant, as described on page 159.
If you use a number to determine the line height, this factor is inherited by all child items. So if a parent's font size is 16 pixels and the line height is 1.5, the parent's line height will be 24 (16 x 1.5). If the child's font size is 10, its line height will be 15 (10 x 1.5).
If you use a percentage or em value, only the resulting size (or "computed value") is inherited. So, given a parent at 16 pixels with a line height of 150%, the parent's line height will still be 24 pixels. However, all child elements will also inherit a line height of 24 pixels, regardless of their font size.

Setting the Line Height

Figure 10.19. Assuming a default `body` element of 16 pixels, the font size of the `p` element will be 87% or about 14 pixels. The line height will be 170% of those 14 pixels, or about 24 pixels.

Figure 10.20. Spacing out the lines makes them more attractive and easier to read.

Setting the Line Height

Figure 10.19. Assuming a default body element of 16 pixels, the font size of the p element will be 87% or about 14 pixels. The line height will be 170% of those 14 pixels, or about 24 pixels.

Figure 10.20. Spacing out the lines makes them more attractive and easier to read.

Figure 10.19. Assuming a default `body` element of 16 pixels, the font size of the `p` element will be 87% or about 14 pixels. The line height will be 170% of those 14 pixels, or about 24 pixels.