Line Height Guidelines

Define line-height tokens that keep text readable across headings, body copy

Use generous line heights for body and tighter for headings. Maintain rhythm across breakpoints and avoid cramped lines in long-form content.

Recommended Line Heights: Body (1.5 - 2.0), Headings (1.2 - 1.4)

Responsive Adjustments

On mobile, increase body line-height to ~1.7–1.75 to aid readability. Keep heading line-heights stable to preserve hierarchy.

Use clamp() where helpful; Avoid line-height < 1.2 for any text.

Do not override line-height per component unless necessary; rely on to

For multi-line buttons or badges, keep line-height ≤1.4 to reduce vertical bloat.

Ensure user-specified line-height scaling does not break layouts. Keep sufficient spacing between lines and paragraphs (paragraph margin-bottom ≥ 0.5em).

Frequently asked questions