What is Leading (Line Height)?

Leading (pronounced "ledding") is vertical space between lines of text, measured in CSS as line-height. Body text: 1.5-1.75; headings: 1.1-1.3; short text: 1.3-1.5. Unitless values (1.5 instead of 150%) are preferred for responsive scaling.

When Should You Use This?

Set appropriate leading for all text—default browser leading (1.2) is too tight for body text. Especially important for long-form content. Accessibility guidelines (WCAG) recommend 1.5 minimum for body text.

Common Mistakes to Avoid

• •Too tight—line-height: 1.2 on body text feels cramped; use 1.5+ for readability
• •Too loose—line-height: 2 makes text feel disconnected; stick to 1.5-1.75 for body
• •Same for all text—headings need tighter leading (1.1-1.3); body needs more (1.5-1.75)
• •Using px/% units—use unitless values (1.5) so leading scales with font size
• •Ignoring measure—longer lines need more leading; adjust line-height with line-width

Real-World Examples

• •Medium—uses line-height: 1.58 for body text (optimal for online reading)
• •Material Design—specifies line heights for all type styles in design system
• •Apple accessibility—offers increased line spacing option for better readability
• •Web typography—most modern sites use 1.5-1.6 for body, 1.2 for headings