Crowded paragraphs often come from the browser default line-height, usually about 1.15–1.2. The line-height property allocates vertical space to each line: the font size plus space shared above and below neighboring glyph areas. For body text, a value around 1.4 or 1.5 gives a more readable rhythm. section 8.1.1
Treat line height, font size, and line length as a connected system. Larger type calls for a smaller line-height value and a longer line length; smaller type calls for more line height and a shorter line length. A practical target is body text of at least 1.25rem, line height near 1.4–1.5, and lines of 45–75 characters. section 8.1.2 section 8.5
Scale a readable article from its font size
Start from a base font value of 16 and base line height of 1.45. For a 24px article, calculate line-height as 1.45 - (24 - 16) / 100 = 1.37, then pair it with a 720px maximum width. CSS custom properties keep the three values adjustable together. section 8.1.2 section 8.1.2
:root {
--base-font-value: 16; #1
--base-line-height: 1.45;
--base-width: calc(var(--base-font-value) * 30);
}
article {
--article-font-value: 24; #1
font-size: calc(var(--article-font-value) * 1px);
line-height: calc((var(--base-line-height) -
➥(var(--article-font-value) - var(--base-font-value))
➥/ 100); #2
max-width: calc(var(--base-width) +
➥(var(--article-font-value) - var(--base-font-value))
➥* 30) * 1px); #3
Use this CSS listing to inspect how unitless custom-property math derives a 1.37 line-height from a 24px font size. section 8.1.2
Inheritance changes the choice of value. A percentage line-height is computed from the parent font size, so a parent at 20px with 150% passes a computed 30px value to a 16px child. A unitless 1.5 remains a multiplier, letting that child compute to 24px instead; this preserves the intended proportion through the inheritance chain. section 3.4.6 section 3.1.3
Repair a cramped, overwide post
A post using 16px text, default 1.2 line height, and full-width lines is hard to scan. Set its font size to 1.25rem and calculate a 1.41 line-height with a 600px maximum width to produce a more balanced result. section 8.1.5
