Line height sets the vertical space allocated to each line of text. It supports readable body copy and creates a consistent vertical rhythm across a page. section 8.2.5 section 8.3
Use line height as part of an intentional typography system:
- Start with the body font size, then multiply it by a unitless line-height value to calculate the pixel line height. section 10.5
- Use 1.5 for 16px body text as a practical accessibility baseline; larger headings can often use 1.2–1.4 to avoid excessive space. section 8.2.5
- Align the resulting values with a baseline grid, adjusting margins and padding when a chosen line height does not land on the grid. section 8.2.5 section 10.5
- Judge readability in context because line length and font family also affect how comfortable the text feels. section 8.3 section 10.5
A compact body-text setting
For 16px body copy, a line-height value of 1.25 produces 20px line height. If the page uses a 12px baseline, add 16px of top margin to a paragraph: 20px + 16px = 36px, a multiple of 12. section 10.5
Table 10.2 Line height (view table figure)
Compare font sizes with their unitless line-height values and resulting pixel heights. section 10.5
