Reworking our font-size CSS: rem vs em

Development
,
1

Hi!

Context

With the bootstrap LESS variables, the font-sizes in XWiki were based off pixel values. This system had shortcomings and we should definitely get rid of it when picking new defaults for CSS variables.
We started a dicussion about this on a PR with @MichaelHamann and didn’t agree on a solution, I think it’d be interesting to discuss it as a community.

Proposal

There are two viable options from where to go from here:

  1. Rely on rem units for our new font-sizes. (doc)
  2. Rely on em units for our new font-sizes (doc)

The difference between rem and em in a few words

Example of application

  • Option 1. If a H2 has a font-size of 1.5rem, it means that its font-size will be 1.5 times larger than the default font size, no matter where it is used in the page.
  • Option 2. If a H2 has a font-size of 1.5em, it means that its font-size will be 1.5 times larger than the neighboring regular text font-size. This means that the H2 would be smaller in a box where the text is smaller, and larger in a box where the text is larger.

Option 1.'s main advantage is consistency: a H2 will always look the same.
Option 2.'s main advantage is adaptability: a H2 will always have a size appropriate to its neighboring content.

Opinion

So far my +1 is for option 2. I think that XWiki would benefit from this system being more flexible. As far as I know, we don’t have a lot of UI blocks with specific font-sizes (probably because the current system makes it really painful to do anything like that) so in most places it would be the same result anyways. I think it’s not bad to keep the option open if that can avoid us having to, for example, create a --panel-font-size-h2 variable in the future because we want to tweak something in the design.

Conclusion

What do you think would be the best option? Do you see some pros and cons of both options I failed to highlight in this opening post?

Thank you in advance for your help and sharing your opinion on the matter!
Lucas C.

PS: I just thought about a 3rd option: Use both rem and ems depending on places. I think this is a bad idea for us, it would make styles more difficult to understand.

2

I haven’t thought about this much, but this (taken from the link you gave) makes sense to me:

keep px size adjustments at the document level so you can make easy/efficient sweeping size changes. But then each module on the page has a font-size set in rem. Actual text elements (h1, h2, p, li, whatever), if you size them at all, are sized in em, and thus become relative to the module.

Because the XWiki UI is extensible, so I can imagine how an XWiki extension that provides a UI component may want to easily scale up/down the font-side for its inner content.

But I guess this is the 3rd option you mentioned, which you think it’s a bad idea. Can you elaborate?

Thanks,
Marius

3

With the options 1 or 2 it’s easy to read two values and say: This one is larger than this one. With option 3 it will be harder to compare values.

E.g. I want to set the value for the margin on my box. I know that my title is 1.5em . I can just set the margin to .75em and expect it to be about half of the font-size of my title, without any testing.

If my title is 1.5rem and I want to set my margin in em, using .75em will possibly end up in something very far from half of the font-size of my title, I will probably need to fine tune this value directly in my browser devtools to get the result I want. Additionally, if the context of the UI I’m styling changes, the ratio between my title font-size and margin will change (and possibly end up in a state that I didn’t anticipate).

IMO this option 3 is a bit more volatile, but I’m not strongly opposed to it.

I just realized that the topic here is font-sizes. We could definitely choose to base font-sizes on ems and decide to settle with rems for other CSS <length>s. The idea shared in option 3 was a bit wider than the initial question.

Thanks for your feedback!
Lucas

4

Hi @CharpentierLucas thanks for starting this discussion. I’m all for using REMs everywhere as they are more predictable. Just as an example, 1rem would be equivalent to the body text everywhere, while 1em is somewhat unpredictable.

As a note, Bootstrap 5 is also using rem pretty much everywhere.

So, for me, +1 for 1.