CSS line-height: Default Value, Units & Best Practice
Contents
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 line height in browsers
The default value of line-height is normal. It isn’t a fixed number: the browser calculates it from the font’s own metrics (ascent, descent and line gap), so it changes with the font.
For common fonts, normal works out to roughly:
- Arial / Helvetica: ~1.15
- Times New Roman: ~1.15
- Georgia: ~1.14
- Roboto: ~1.17
- Verdana: ~1.22
That’s why you’ll often read that the browser default line height is “about 1.2”. Chrome, Firefox and Safari all work this way, so the same font gives about the same result in each.
Because normal depends on the font, a fallback font can change your line spacing while the web font loads, which causes layout shift. Set an explicit unitless value on body instead:
body {
line-height: 1.5;
}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
Happy coding!
Further reading CSS Tutorial.
