4 ms·

I prefer using rems over ems, as ems are a pain to deal with for large applications (due to the nature of compounding).

emn13 11y ago
However, rems don't compose as nicely. It kind of depends what you're building. E.g, if you're in a footnote or any context where the font-size differs from your general default, it's quite likely that whatever content you want to embed there also needs measurements that scale - you want ems, not rems. The nature of compounding really shouldn't be an issue - because if that's an issue, then your font size is going to be an issue in any case. I'd say rems are appropriate when you're making a component that has little to do with it's context. If you're conceptually emulating an iframe, then you probably don't care about the scale you came from. Most pages have a few components like this, but they tend to be the exceptions, not the rule.
- arnold_palmur 11y ago
  Right right - I'm working on a large framework (built-in ember) where everything is components, hence the appropriateness of rems. That being said, I'm not sure I follow your example about the footnote - I don't see any difference from what you are gaining with ems vs. rems as rems are also going to scale. The scaling would be from the root vs. the parent element which to me seems much more manageable allowing you avoid having to calculate the result of compounding needed to achieve your desired font-size.
  - emn13 11y ago
    Well, if you're going to use ems, you probably should think about compounding the reverse way - don't say, "I want X absolute font size, what scale do I need", instead say "I want something smaller. In the footnote example, imagine you'd want to include a button. That button will contain text, and that text should be just as large as surrounding text (or a bit larger - it doesn't matter for this case). You want to specify button layout using ems so that the button is reusable both in the small-font footnote context, and in the large-font body text context. Even moreso, if you decide than the footnote font needs changing, your button will scale naturally, rather than needing you to adjust the rem-based scale.

emn13 11y ago

However, rems don't compose as nicely. It kind of depends what you're building. E.g, if you're in a footnote or any context where the font-size differs from your general default, it's quite likely that whatever content you want to embed there also needs measurements that scale - you want ems, not rems. The nature of compounding really shouldn't be an issue - because if that's an issue, then your font size is going to be an issue in any case. I'd say rems are appropriate when you're making a component that has little to do with it's context. If you're conceptually emulating an iframe, then you probably don't care about the scale you came from. Most pages have a few components like this, but they tend to be the exceptions, not the rule.

arnold_palmur 11y ago
Right right - I'm working on a large framework (built-in ember) where everything is components, hence the appropriateness of rems. That being said, I'm not sure I follow your example about the footnote - I don't see any difference from what you are gaining with ems vs. rems as rems are also going to scale. The scaling would be from the root vs. the parent element which to me seems much more manageable allowing you avoid having to calculate the result of compounding needed to achieve your desired font-size.
- emn13 11y ago
  Well, if you're going to use ems, you probably should think about compounding the reverse way - don't say, "I want X absolute font size, what scale do I need", instead say "I want something smaller. In the footnote example, imagine you'd want to include a button. That button will contain text, and that text should be just as large as surrounding text (or a bit larger - it doesn't matter for this case). You want to specify button layout using ems so that the button is reusable both in the small-font footnote context, and in the large-font body text context. Even moreso, if you decide than the footnote font needs changing, your button will scale naturally, rather than needing you to adjust the rem-based scale.