Line Height

line-height controls how tall each line of text is, and the gap between lines comes from it. If it's too small, multi-line text crams together and is tiring to read. If it's too large, the lines feel disconnected and your eye loses its place. For body text, 1.4–1.6 is recommended for English and 1.6–1.8 for Chinese. Large headings can tighten to 1.2–1.3.

Write it as a unitless multiplier, like line-height: 1.6. It's calculated from the current font size, so the ratio stays the same when the font size changes. A fixed 24px can make lines crash into each other once the font size goes up.

Line height also affects the height of single-line elements and vertical centering. When text in a button doesn't look centered, line height is often the cause. It's not the same as paragraph spacing. The distance between paragraphs is controlled with margin.