Use rem for font size instead of px?

[j-maas]

This is not an easy decision, so I'll try to give the pro and cons.

The reason why I bring this up is that most simply that px does not respect the user preferred font size. If they choose a bigger default font size in the browser's settings, it would get overridden. (They can still zoom the page to increase the size of everything.) rem on the other hand are relative to that default font size, so they would adapt without extra work.

Now after doing some research there seems to be a different approach lurking beneatch this issue. A really nice article argues that different devices have different default font sizes for readability and some users do change their font size. So this is something that has value, even though in most cases it is not strictly needed.

But more fundamentally, specifying font size in px imposes the designer's choice. This is not responsive nor accessible. Rather, as hinted at in a StackOverflow response, there is an argument to give up the illusion of control of such details and strive to adapt to more situations. I even think that specifying the top-level heading as "50% bigger than body text" (with 1.5rem) is a pretty intuitive way of sizing your text.

In this light, I think that rem is the better choice. I do understand that this would be a substantial change, so I would not suggest changing it from under users. But a viable approach would be to introduce a Element.Font.scale that, like rem, is relative to the default font size, together with a notice on Element.Font.size to prefer that function with a link to this issue (or a better argument).

I also noticed that in many other places, like for padding, px is used. I think it would make sense to change all those instances to use rem, too. However, this would break existing code when it is updated. A solution I could imagine is letting authors specify px but translating 16(px) to 1rem in the output. So 8(px) would be 0.5rem and 24(px) 1.5rem. That's not the cleanest option, but it would bring responsiveness without breaking existing code. (I'd choose rem over em as it is "absolute" like px and does not depend on its parent's font size.)

What are your thoughts?

[j-maas]

I've stumbled upon https://css-tricks.com/accessible-font-sizing-explained/ as another good exploration of this problem.

I'm starting to think that the best option would be to keep the current API and simply output rem instead of px, based on the assumption that authors are developing at 1 rem = 16 px which is the default font size in major browsers. The effect of that would be that changing the font size scales up the entire layout, just as if it was enlarged with the zoom controls, but without requiring any further action.

[lucamug]

Adding this here for reference: