The line-height
property is used to adjust the height of lines of text in CSS, but it is sometimes recommended that it be specified without units. This article details the reasons for this and its specific use.
Unitless line-height
indicates a value relative to the
element’s font-size
. For example, specifying line-height: 1.5;
would make the line height 1.5 times the font-size. The advantage of this method is that text readability and design consistency is maintained because the ratio of line-height is constant, even if the font-size changes.
Example: .
.text-example {
font-size: 16px;
line-height: 1.5; /* line height is 1.5 times the font size */
}
Using other units may result in line heights that are only appropriate for certain viewports or font sizes, but specifying without units is less likely to cause such problems. Unitless line-height
specifications are widely recommended for design flexibility and consistency.