Reworking our font-size CSS: rem vs em

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.

3 posts - 2 participants

Read full topic