Line Height

CSS Line Height

The CSS line-height property controls the height of each line of text and therefore the vertical spacing between lines. Appropriate line height can make paragraphs easier to read and improve the overall appearance of text.

The line-height Property

The CSS line-height property specifies the height of a line box. When text wraps onto multiple lines, this affects the vertical distance between the lines.

p {
  line-height: 1.5;
}

A unitless value of 1.5 makes the line height 1.5 times the element's own font size.

Unitless Line Height

A unitless number specifies line height as a multiplier of the element's own font size. For example, a value of 1.5 creates a line height equal to one and a half times the font size.

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

With a font size of 16 pixels, the resulting line height is 24 pixels.

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

Line Height with Length Values

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

p {
  font-size: 16px;
  line-height: 24px;
}

This example gives the paragraph a line height of 24 pixels.

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

Because 1.5em is relative to the element's font size when used for line-height, this example also produces a 24-pixel line height.

Line Height with Percentages

A percentage value for line-height is calculated from the element's own font size.

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

A value of 150% with a 16-pixel font size produces a computed line height of 24 pixels.

Although percentages can be used, unitless values are often simpler when line spacing needs to work consistently with inherited and changing font sizes.

The normal Value

The initial value of line-height is normal. This allows the browser and font to determine an appropriate line height.

p {
  line-height: normal;
}

The exact amount of spacing produced by normal can vary depending on the font and browser, so it should not be treated as a specific numeric value.

Try Different Line Heights

Edit the line-height values in the example to compare tighter and more widely spaced lines of text.

Line Height and Inheritance

The line-height property is inherited, but the way inheritance works depends on the type of value used. A unitless value is inherited as a number, allowing each descendant to calculate its line height from its own font size.

body {
  line-height: 1.5;
}

h1 {
  font-size: 32px;
}

p {
  font-size: 16px;
}

Both the heading and paragraph inherit the 1.5 multiplier. The heading calculates its line height from 32 pixels, while the paragraph calculates its line height from 16 pixels.

This behavior is one reason unitless values are commonly used for general line spacing.

Line Height and Readability

Lines that are too close together can make paragraphs difficult to follow, while excessive spacing can make related lines feel disconnected. Comfortable line spacing helps readers move naturally from one line to the next.

The most appropriate line height depends on factors such as font family, font size, line length, and the type of content. Body text generally benefits from more line spacing than short headings or labels.

Choosing a Line Height

Unitless values such as 1.4, 1.5, or 1.6 are common starting points for body text because they scale with the element's font size. The best value depends on the font and design rather than one fixed number that works for every page.

Use tighter line heights carefully with large headings and other short text, and make sure paragraphs remain comfortable to read across different screen sizes.

Summary

The CSS line-height property controls the height of lines of text and the vertical spacing between them. It accepts values such as normal, unitless numbers, lengths, and percentages. Unitless values are particularly useful because they scale with each element's font size and behave well with inheritance.

The next tutorial covers Text Alignment and how CSS positions inline content within an element.