CSS line-height

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.


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.


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.


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-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|percentage
4 . Recommended type to use: number, not less than 1.5

Happy coding!

Further reading CSS Tutorial.

Did you like this article? Share it with your friends: