css/unitless-line-height

Why

A length or percentage line height is computed once on the element and inherited as a fixed value, so a heading inside it gets the parent's line height and its lines overlap. A px line height also stays put when the person enlarges text or sets their own spacing, which clips text in fixed-height boxes.

Fix

Write the ratio: line-height: 1.5 for body text (at least 1.5 for paragraphs), about 1.1–1.3 for headings. To centre one line in a control, use padding or flex alignment, not a line-height equal to the height. With design tokens, keep the token unitless too (--leading-body: 1.5).

Examples

/* bad */
.btn { font-size: 16px; height: 40px; line-height: 40px; }
/* good */
.btn { font-size: 1rem; min-height: 2.5rem; padding-block: 0.5em; line-height: 1.5; }

Sources

• MDN, line-height (values, and the example "Prefer unitless numbers for line-height values")
• WCAG 2.2, Understanding SC 1.4.12 Text Spacing

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/unitless-line-height