Line Height & Readability

Line height (or leading, from letterpress-era lead strips between lines) is the vertical distance between lines of text. It's one of the most critical factors in readability—too tight and lines blur together; too loose and the eye struggles to find the next line. Research in reading science shows optimal line height varies with font size, line length, and typeface characteristics. The CSS line-height property, expressed as a unitless multiplier, is one of the highest-impact typography settings in web design.

stellae.design

Visual Design

Why It Matters

Line height — the vertical space between baselines of text — is one of the most powerful yet frequently overlooked typographic controls affecting readability. Adequate line height prevents the eye from accidentally re-reading the same line or skipping to a non-adjacent one, especially in long-form content where users sustain focus for minutes at a time. Getting it wrong by even a few pixels can measurably increase reading fatigue, reduce comprehension, and drive users away from content-heavy interfaces.

Real-World Examples

Medium's article typography

Medium uses a line height of approximately 1.58 for its body text at 21px font size, creating generous vertical rhythm that makes long articles feel effortless to read. The ample spacing guides the eye smoothly from one line to the next without visual crowding, contributing to the platform's reputation for pleasant reading experiences. This careful tuning is a core reason users choose Medium for long-form content consumption.

Apple's system font defaults

Apple's San Francisco typeface ships with carefully optimized default line-height values that adjust dynamically based on text size — tighter at display sizes where line height matters less, and more generous at body sizes where readability is critical. Developers who use the system font with dynamic type get line-height best practices for free, without manual tuning. This approach demonstrates how type systems can encode readability knowledge directly into their defaults.

Counter-example

Dense data table with 1.0 line height

An analytics dashboard renders table cells with line-height set to 1.0 to fit more rows on screen, causing descenders from one row to nearly touch ascenders of the next. Users scanning columns of mixed-case labels and numbers frequently misread values because their eyes jump to adjacent rows. The space savings come at a direct cost to data accuracy and reading speed.

Role-Specific Guidance

Common Mistakes

• The most common mistake is applying a single line-height value universally across headings, body text, and captions, ignoring that each serves a different reading mode and optimal spacing varies accordingly. Designers also frequently compress line height in data-heavy interfaces to fit more content on screen, trading readability for density without measuring the impact on user error rates. Another error is specifying line height in pixels, which breaks the proportional relationship when users resize text and can cause overlapping lines at larger sizes.