Interactive online courses HTML Academy
2026-03-09 14:06 Diff
https://htmlacademy.org/courses/html-css-basics/typography/relative-line-height

These are the line-height options that we have already reviewed:

  • The relative value normal, which we do not control, as it is automatically calculated by the browser depending on the font-size.
  • The absolute value calculated in px.

But what if we need to assign a relative value, but not one that is the same as normal? This is also possible. To accomplish this, the line-height value can be assigned a percentage or a multiplier. In this case, the browser calculates the value dynamically depending on the font-size:

p { font-size: 10px; line-height: 150%; /* Calculated value: 10px * 150% = 15px */ line-height: 2; /* Calculated value: 10px * 2 = 20px */ }

As you have probably realised, relative values are more flexible than absolute ones. But for simple websites like ours, a fixed font-size and line-height will be totally adequate.