0

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 '16 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. – yourfriendzak Aug 31 '16 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 '16 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 '16 at 11:28
  • 1
    specifying line-height without a unit means "ems." So 1.2 line height = 1.2em – Yorik Aug 31 '16 at 14:08
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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