CSS line-height

by Marko Denic | September 09, 2022

So, what is the line-height property?

The line-height CSS property sets the height of a line. You can use it to set the space between the lines of text.

Syntax

           
body {
  line-height: normal; /* default */
  line-height: 1.5; /* number */
  line-height: 2em; /* length */
  line-height: 55%; /* percentage */
}

Default value

The default value is normal and depends on the browser. Desktop browsers use a default value of ~1.2.

Number (unitless) value

When the number value is used, then the element font-size will be multiplied by this value. I recommend you use this option to set line-height to avoid unexpected results.

Example:

           
p {
    font-size: 20px;
    line-height: 1.2; /* So, the line-height will be: 20px * 1.2 = 24px */
}

Length value

When the length value is used, then the specified value is used for the calculation of the height of the line. Accepted values: px, em, rem, pt, cm, etc.

Examples:

           
p {
  line-height: 36px;
}

article {
  line-height: 2em;
}

section {
  line-height: 1.5rem;
}

Percentage value

Represents a percentage of the font size of the element itself. It may produce unexpected results.

Example:

           
.example-div {
  line-height: 150%;
}

Accessibility concerns

According to Web Content Accessibility Guidelines line height (line spacing) should be at least 1.5 times of the font size.

Quick recap:

1 . line-height is used to add space between the lines
2 . Default value is normal (~1.2)
3 . Accepted values: normal|number|length|percentage4 . Recommended type to use: number, not less than 1.5