| 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. 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. To set the line height: 1. | Type line-height:. | 2. | Type n, where n is a number that will be multiplied by the element's font size (see page 156) to obtain the desired line height. Or type p%, where p% is a percentage of the font size. Figure 10.20. Spacing out the lines makes them more attractive and easier to read. Or type a, where a is an absolute value in pixels, points, or whatever. |
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.
|