This issue has been really vexing me for a while.

Across the web (and in CSS frameworks like Bootstrap), REM is commonly used for everything from padding (example: padding: 2rem;) to border-radius (example: border-radius: 1rem;).

Ok, fine, that's reasonable. But why isn't there also a global unit which includes a line-height modifier? Assuming you're using a typical grid that's based on typography, your type scaling PLUS your type leading is your true baseline, and thus it seems like a FAR more important unit than just plain REM.

For example, say your REM is set to 16px, and your body text line-height is 1.6.:

body {
  font-size: 16px;
  line-height: 1.6;

This is a relatively common configuration. So why is REM (which will typically be interpreted as 16px in this example) used almost everywhere and not a unit that represents your actual grid baseline (which will typically be 25.6px or 16px * 1.6)?

In other words, why is this standard practice

my-padding: {
   padding: 2rem; // typically will be 32px;

but not this

my-padding: {
   padding: 2rlh; // typically will be 51.2px;

(I realize that rlh, or root line height, doesn't exist in CSS. My question is why doesn't it exist?).

  • I'm a bit confused by your question... You can use rems or any valid CSS unit for line-height too, doesn't that solve your problem?
    – Cai
    Aug 31, 2016 at 9:39
  • @Cai I'm not sure what you mean. The problem isn't setting a line height. The problem is that there's no equivalent to REM for line height. Aug 31, 2016 at 10:34
  • 1
    I don't know what you mean, what is an equivalent to rem for line-height? If you use rem to set your line-height then your hypothetical rlh is the same as using rem. For example you set line-height: 2rem; then padding: 4rem; is the same as doing padding: 2rlh;
    – Cai
    Aug 31, 2016 at 10:39
  • 1
    The problem with unitless line-height is that it's relative to the font-size, so what you're proposing is a relative unit of a relative unit
    – Cai
    Aug 31, 2016 at 11:28
  • 1
    specifying line-height without a unit means "ems." So 1.2 line height = 1.2em
    – Yorik
    Aug 31, 2016 at 14:08

2 Answers 2


The reason for this is because it is too specific to warrant the cost.

In your specific case of wanting to use root line-height, the answer is also that most of the time the line-height is based on the font-size (it is by default), so it'd be useless since we already have rem.

More generally, we can ask ourselves: "What if I want to use the root's margin-top as a spacing for the rest of my margins and padding? Why isn't there a rmt unit for that?" and do this for any property. We quickly see that it's silly to have units for every property. em and rem were chosen based on the font-size because it provides a good base for other properties to be styled off of.

With that being said, if you want to use the line height (or any other value) in other property's values, you can use either CSS's custom properties (essentially variables) or use a CSS preprocessor like SASS or LESS.


Just wanted to update the answer. CSS now provides the lh and rlh units. https://www.w3.org/TR/css-values-4/#font-relative-lengths

  • Keep in mind browser support for this. At the moment, it's not supported or planned to be supported by every major browser (Firefox is missing) Jun 20 at 15:45
  • Yes, I didn't mention that. Just that the spec does now cover them. So, indeed, you need to check if your browser support requirements will allow you to use them.
    – dutchcelt
    Jun 21 at 7:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.