The line-height property controls the vertical space allocated to each line of text. This spacing, traditionally called leading, strongly affects readability. section 7.1.1 section 7.5
Choose a value according to the typeface and the element:
- Use a unitless number such as line-height: 1.5; the browser calculates the spacing relative to the element’s font size. section 7.1.1
- Values with units, such as 5px or 2em, are available, but fixed or mismatched units can become unsuitable when text is scaled or child font sizes differ. section 7.1.1
- Paragraphs commonly benefit from line-height: 1.5; spacing between 1.5 and 2 can make line tracking easier for people with cognitive disabilities. section 7.1.1
- Display or cursive fonts may already have tall line boxes, so a tighter value such as 1 can produce more even spacing. section 7.2
Readable paragraphs and a compact quote
Set normal paragraphs to p { line-height: 1.5; }. For a large decorative blockquote, combine its larger font with blockquote { font-size: 2em; line-height: 1; } when the typeface already provides generous spacing. section 7.1.1 section 7.2
Listing 7.5 <blockquote> formatting
blockquote {
font-family: 'Passions Conflict', cursive;
font-size: 2em;
line-height: 1;
}
Inspect the complete blockquote rule, including its cursive font, enlarged size, and line-height value. section 7.2
