CSS Line Height: An Explainer

Line height in CSS is a seemingly simple, but often misunderstood layout concept. In this article we’ll run through some best practices and how the property itself works.

1. The Difference Between Line-Height and Leading

Much of the CSS ‘line-height’ confusion comes from the assumption that it works the same way ‘leading’ does in the print world, which calculates the given distance between two baselines and adds the spacing above the font.

Line height in CSS however works by distributing the height evenly above and below the text.

CSS line-height (left) vs Print Leading (right):

2. Line Height Measuring Units

The line-height property can take one of five potential values:

line-height:  normal | <number> | <length> | <percentage> | inherit

Note: When using the CSS line-height property it is recommended that you use the ‘unitless’ <number> value (more on this a bit later).

A summary of the above values:

normal

This is the default line-height value dictated by the browser.

<number>

A unitless value which is a multiplier of the font-size (recommended).

<length>

This can be any one of the <span> measuring units used in CSS such as ems, rems, px etc.

<percentage>

A given value in relation to the font-size, where 100% is equivalent to the current font-size.

inherit

Results in the line height value being inherited from its parent element.

More About That Unitless <number> Value

The ‘unitless’ value effectively works as percentage scale. A line-height of 1.5 is essentially 150% of the font size.

p {
  line-height: 1.5;
}

Note: With a font-size of 16px, this would equate to 16px multiplied by 1.5, which would give you a line-height of 24px.

The browser will then take this extra 8px and split it in half, adding 4px of line height above and 4px of line height below the in-line height of the font.

If you are using line-height on a parent element such as a <div>, and you change the font-size of a child element, using the unitless <number> value will ensure the appropriate line spacing is created for the relative font-sizes. If you were to use <length> values such as px, or ems or <percentage> values in this situation you could end up with line-height that is visually incorrect for the font size, making the line height look broken / harder to read.

3. An Example:

A code example of the CSS line-height property:

<h2>A Heading With A Line Height Of 1.2</h2>
<p>A paragraph with it's line height set to 1.5 with the unitless number value. This is a good height for readability and accessibility</p>

h2 {
    line-height: 1.2;
}
p {
    line-height: 1.5;
}

Click the different tabs above to see the code or result.