4 ms·

I've just finished reading Refactoring UI, and the author has a good point against `em`: nested uses lead to fragmented sizes. Let's say you have a fixed list

I've just finished reading Refactoring UI, and the author has a good point against `em`: nested uses lead to fragmented sizes. Let's say you have a fixed list of font sizes (and you probably want to), that goes like this: 0.75em, 0.875em, 1em, 1.25em, and 1.5em. It's all good if you have an element with `font-size: 1.25em`, because that's on the scale. But if a nested element has 0.875em, it'll actually be 1.25*0.875 = 1.09375em, because it'll be relative to the parent font size. So if you don't want your UI to have 17 different font sizes with fractional pixels, "absolute" units like px or rem are preferable. They still don't map 1:1 to screen pixels, so it shouldn't be a problem for high DPI displays.

arp242 3y ago
The "rem" unit fixes that: it's "relative em" and relative to the root rather than parent. It's supported everywhere (even IE) and for new projects you should probably always use "rem" and never "em".
- BoppreH 3y ago
  You gotta love CSS naming, where "relative em" is the version of "em" that is not relative to the parent.
  - kaelig 3y ago
    That would have been a fun one, but rem stands for "root em"!
    - BoppreH 3y ago
      That's weird, I confirmed it on https://drafts.csswg.org/css-values https://drafts.csswg.org/css-values before posting that comment, but now I can't find it anymore. Thanks for the correction.