line-height and Vertical Spacing

Syntax

line-height: number | length | %;

Examples

.good {
  font-size: 16px;
  line-height: 1.5; /* scales to 24px - stays proportional if font-size changes */
}

.risky {
  font-size: 16px;
  line-height: 24px; /* fixed - breaks proportionally if a child changes font-size */
}

body { line-height: 1.6; }         /* comfortable reading for paragraphs */
h1, h2, h3 { line-height: 1.2; }    /* tighter, since large text has more natural spacing already */

Parameters and values

• line-height (number | length | %): Vertical space per line; unitless numbers are recommended

Best practices

• Prefer unitless line-height values (like 1.5) over fixed pixel values, so it scales correctly if font-size changes anywhere down the tree
• Use a larger line-height (1.5-1.7) for body copy to improve readability, and a tighter one (1.1-1.3) for large headings
• Set a sensible default line-height on body and let individual elements override it only when needed
• Remember line-height also affects the height of inline elements and can influence vertical centering of single lines of text

At a glance

Purpose

Presentation and layout

File extension

.css

Runs in

Web browsers

Usually used with

HTML and JavaScript

Specifications & further reading

• CSS specifications (modules)

Related CSS documentation