line-height has a initial value of normal. What normal means depends on the user agent (browser). Desktop browsers (including Firefox) use a default value of roughly 1.1~1.2, depending on the element's font-family. It's best set a line-height for consistent behavior across browsers.
Using a unitless value is the preferred way to set line-height to avoid unexpected results due to inheritance. Unitless values are multipliers against the font-size (eg. a 1.5 line-height on a 16px font-size yields a 24px line-height) and behave the same way a percentage line-height does if there is no inheritence.
They're both multipliers, but behave differently when inherited.
When used as a percentage, the percentage is calculated against the font-size of the element that declares the line-height. That's to say that if the line-height is inherited, the line-height is calculated using the font-size of the parent, rather than the element receiving it.
When used as a unitless value, the line-height is calculated using the font-size of the current element instead of the parent's. Demo
<!-- Inheriting a percentage line-height -->
<div style="line-height: 150%; font-size: 16px">
<div style="font-size: 20px">
My line-height would be 150% * 16px, which is 24px;
</div>
</div>
<!-- Inheriting a unitless line-height -->
<div style="line-height: 1.5; font-size: 16px">
<div style="font-size: 20px">
My line-height would be 150% * 20px, which is 30px;
</div>
</div>The unitless value is the only unit that calculates the line-height post-inheritence. Other relative units such as em also calculate the line-height to cascade down based on the parent (in this case, font-size).
Use a minimum value of 1.5 for line-height for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. W3C Understanding WCAG 2.1
- https://www.w3.org/TR/2011/PR-CSS2-20110412/visudet.html
- https://www.w3.org/TR/WCAG21/#visual-presentation
- https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
- https://www.w3docs.com/learn-css/line-height.html
- https://stackoverflow.com/questions/20695333/why-does-unitless-line-height-behave-differently-from-percentage-or-em-in-this-e