Why is there no unit for (EM * line-height) or (REM * root line-height)?

Question

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?).

Answer 1

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.

Answer 2

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