Accessibility: px or rem?

The genre of this post is: I am having opinions on something I am not an expert at, so hopefully the Internet would correct me.

The specific question in question is:

Should you use px or rem units in your CSS?

I am not a web developer, but I do have a blog where I write CSS myself, and I very much want to do the right thing. I was researching and agonizing over this question for years, as I wasnt able to find a conclusive argument one way or another. So I am writing one.

This isnt ideal, but I am lazy, so this post assumes that you already did the research and understand the mechanics of and the difference between px, em, and rem. And so, you position is probably:

Of course rem, because that honors users setting for the font-size, and so is more accessible, although

Although there are buts:

But the default font-size is 16px, and thats just too small. If you just roll with intended defaults, than the text will be painful to read even for folks with great vision!

But default font-size of x pixels just doesnt make sense: the actual perceived font size very much depends on the font itself. At 16px, some fonts will be small, some tiny, and some maybe even just about right.

But the recommended way to actually use rem boils down to setting a percentage font-size for the root element, such that 1rem is not the intended font size of the root element, but is equal to 1px (under default settings). Which, at this point, sounds like using pixels, just with more steps? After all, the modern browsers can zoom the pixels just fine?

So, yeah, lingering doubtsIf you are like me, you painstakingly used rems everywhere, and then html { font-size: 22px } because default is unusable, and percentage of default is stupidly ugly :-)

So lets settle the question then.

The practical data we want is what do the users actually do in practice? Do they zoom or do they change default font size? I have spent 10 minutes googling that, didnt find the answer.

After that, I decided to just check how it actually works. So, I opened browsers settings, cranked the font size to the max, and opened Google.

To be honest, that was the moment where the question was mentally settled for me. If Googles search page doesnt respect user-agents default font-size, its an indirect, but also very strong, evidence that thats not a meaningful thing to do.

The result of my ad-hoc survey:

Dont care:
  • Google
  • Lobsters
  • Hackernews
  • Substack
  • New Reddit

  • Wikipedia
  • Discourse
  • Old Reddit

Google versus Wikipedia it is, eh? But this is actually quite informative: if you adjust your browsers default font-size, you are in an Alice in the Wonderland version of the web which alternates between too large and too small.

The next useful question is: what about mobile? After some testing and googling, it seems that changing browsers default font-size is just not possible on the iPhone? That the only option is page zoom?

Again, I dont actually have the data on whether users rely on zoom or on font size. But so far it looks like the user doesnt really have a choice? Only zoom seems to actually work in practice?

The final bit of evidence which completely settled the question in my mind comes from this post:

It tells us that

Using the wrong units of measurement in your Cascading Style Sheets (CSS) is a big barrier for many visually impaired users, and it can cause your website fail the Web Content Accessibility Guidelines (WCAG) 2.1 on 1.4.4 Resize text.

That WCAG document is really worth the read:

The scaling of content is primarily a user agent responsibility. User agents that satisfy UAAG 1.0 Checkpoint 4.1 allow users to configure text scale. The authors responsibility is to create Web content that does not prevent the user agent from scaling the content effectively. Authors may satisfy this Success Criterion by verifying that content does not interfere with user agent support for resizing text, including text-based controls, or by providing direct support for resizing text or changing the layout. An example of direct support might be via server-side script that can be used to assign different style sheets.

The author cannot rely on the user agent to satisfy this Success Criterion for HTML content if users do not have access to a user agent with zoom support. For example, if they work in an environment that requires them to use IE 6.

If the author is using a technology whose user agents do not provide zoom support, the author is responsible to provide this type of functionality directly or to provide content that works with the type of functionality provided by the user agent. If the user agent doesnt provide zoom functionality but does let the user change the text size, the author is responsible for ensuring that the content remains usable when the text is resized.

My reading of the above text: its on me, as an author, to ensure that my readers can scale the content using whatever method their user agent employs. If the UA can zoom, thats perfect, we are done.

If the readers actual UA cant zoom, but it can change default font size (eg, IE 6), then I need to support that.

Thats most reasonable I guess? Just make sure that your actual users, in their actual use, can read stuff. And I am pretty sure my target audience doesnt use IE 6, which I dont support anyway.

TL;DR for the whole post:

Use pixels. The goal is not to check the I suffered pain to make my website accessible checkbox, the goal is to make the site accessible to real users. Theres an explicit guideline about that. Theres a strong evidence that, barring highly unusual circumstances, real users zoom, and pixels zoom just fine.

As a nice bonus, if you dont use rem, you make browsers font size setting more useful, because it can control the scale of the browsers own chrome (which is fixed) independently from the scale of websites (which vary).