line-height property, when applied to block-level element, defines, as its name literally suggests, the height of each line. It is not to be confused with the line spacing (a.k.a “leading”) found in most graphical softwares (like Photoshop) which determines the amount of space between lines in a paragraph. Although they both carry the same purpose (spacing lines of text), they do so in different ways.
line-height property uses the following units:
- unitless numbers, like
The unitless values basically act like percentages. So
150% is equal to
1.5. The latter is just more compact and readable.
Why line-height is important
The purpose of the
line-height is to define a readable line spacing for your text. Because readibility is dependent upon the size of the text, it is recommended to use a dynamic value that is relative to the size of the text. Using
px is therefore not recommended because it defines a static value.
In some cases, using
px does come in handy (when you wish to vertically align text according to another element and not according to the font size).
em values can have unexpected values, the recommended method is unitless numbers:
- for body text, a line height of 1.5 times the size of the text is recommended.
- for headings, a line height of 1.2 is recommended
The computed line height will thus be 16 * 1.5 =
line-height property is inherited by the child elements, it will remain consistent no matter what
font-size is subsequently applied.
blockquote element will have a line height of