CSS line-height Property

CSS line-height Property

The CSS line-height property controls the height of each line of text and therefore affects the vertical spacing between lines.

Line height plays an important role in readability, especially in paragraphs and other blocks of multiline text. CSS allows line height to be specified with the normal keyword, a unitless number, a length, or a percentage.

line-height Syntax

The line-height property sets the height of a line box. When text wraps onto multiple lines, this determines the vertical distance used for each line.

p {
  line-height: 1.5;
}

In this example, the line height is 1.5 times the element's own font size.

normal Line Height

The initial value of line-height is normal. This allows the browser to determine an appropriate line height based on the font being used.

p {
  line-height: normal;
}

The exact computed value of normal is not a fixed number and can vary depending on the font and browser.

Unitless Line Height

A unitless number multiplies the element's own computed font size to determine its line height. For example, a 20px font with a line height of 1.5 produces a used line height of 30px.

p {
  font-size: 20px;
  line-height: 1.5;
}

Unitless values are especially useful because the number itself can be inherited and each descendant calculates its line height using its own font size.

Length Values

The line-height property can also use CSS length values such as px, em, and rem.

.pixels {
  line-height: 28px;
}
.em-units {
  line-height: 1.5em;
}
.rem-units {
  line-height: 1.5rem;
}

A fixed length such as 28px sets a specific line height. Relative length units calculate the line height according to the rules for that unit.

Percentage Values

A percentage line-height is calculated from the element's own font size. For example, 150% of a 20px font size produces a line height of 30px.

p {
  font-size: 20px;
  line-height: 150%;
}

Although 150% and 1.5 can produce the same line height on the element where they are declared, they behave differently when inherited.

line-height and Inheritance

The line-height property is inherited, but the type of value used affects what descendants inherit. This is an important difference between unitless and calculated line-height values.

.parent {
  font-size: 20px;
  line-height: 1.5;
}
.child {
  font-size: 30px;
}

With the unitless value 1.5, the child inherits the number and calculates its own line height from its 30px font size, resulting in 45px.

When a percentage or length such as 150% or 1.5em is declared on the parent, its computed line height can be inherited as a calculated length instead. This can produce unexpected spacing when descendants use different font sizes.

Line Height and Readability

Line height that is too small can cause lines of text to appear crowded, while excessive line height can make related lines feel disconnected. The appropriate amount depends on the font, font size, line length, and design.

For body text, a unitless line height is often a practical choice because it scales naturally when descendant elements use different font sizes.

line-height Example

The following example uses a unitless line-height of 1.5. Open the example in the editor and change the value to compare the spacing between lines. Try 1, 1.25, 1.75, 2, 30px, or 150%, then run the code to see how each value affects the paragraph.

p {
  line-height: 1.5;
}