Should web developers use pixels or ems/rems for accessible fonts?
It’s an emotionally-charged question because there are a lot of conflicting opinions out there, and it can be overwhelming. Maybe you’ve heard that rems are better for accessibility. Or maybe you’ve heard that the problem is fixed and pixels are fine?
The truth is, if you want to build the most-accessible product possible, you need to use both pixels and ems/rems. It’s not an either/or situation. There are circumstances where rems are more accessible, and other circumstances where pixels are more accessible.
Joshua Comeau
The linked article isn’t just an explanation of why, but also a tutorial.
Yes, accessibility is important, even for those of us with good vision today, since everyone will eventually age. So thanks for sharing the article.
However, what makes me especially frustrated are those websites that try to “scale with” your zoom settings. Every time I try to zoom in (or in other zoom out) they rescale the content to reset my override.
They might do this to try to fit everything nicely in their mobile versions, or they might have “perfected” their pixel layouts. However it clearly is not working is the reason I try to change the zoom.
More worrisome when they also affect printing as well.
Fortunately there is not a “Reading Mode” in most browsers. And if that fails, I use an extension “Send to Kindle” which has a “preview” function that renders most websites in a clean easy to read text layout.
(Open to even more suggestions, especially those that could work on a mobile phone or on an ipad).
There’s an extension to force reading mode even on sites that don’t support it, but I forgot what it’s called.
Speaking of accessibility, is there a reason I can’t zoom in at all on osnews.com on mobile? It’s rare that I use mobile, but when I do having zoom locked out makes for a poor experience IMHO.
If we can identify the code responsible, would osnews consider removing it?
At least “Use Desktop Site” in FF allows zooming.
Both Firefox and chrome have a setting under accessability to force zoom on all pages which works reasonably wel
danber,
I didn’t know there was a setting to allow users to override zoom. I still don’t think it’s good practice to lock zooming in the first place, but at least now I know there’s a way to override it. Thank you.
Yeah, it is a major pita.
Almost at the same level as blocking right clicking on desktop heh
danber,
Speaking of that very thing, I’ve encountered it just recently. You’re right what a pain it was. Does anyone know of any way to disable scripts in FF after the page has loaded.
Obviously I know about noscript and others like it, but I don’t want to disable scripts based on a url or anything like that but instead pause/stop scripting & events on a loaded page.
I’ve come up empty handed in the past.
It’s an interesting read, but tbh I’m pretty sure half the web doesn’t take his advice about using rems for all text-related styling. Which means some web pages may not react at all to changing the default font size, because they’ve coded it in pixels, while others might see their layout break, because they are counting on rem to be 16px. It’s the sad but probably true state of affairs. Yes, being able to change the default font size is great in theory, for making text bigger without unnecessarily enlarging padding, borders etc., but in practice I’m guessing YMMV significantly.
So my guess is, a lot of end users just use the zoom function, because it’s guaranteed to work on all websites, even if the result isn’t always optimal. And despite the article’s claims that zooming is impractical due to needing a keyboard shortcut, as far as I can tell there is indeed a default zoom setting in every major browser, just like there’s a setting for default font size.
In general I’d be curious to find out what percent of web users actually have changed their default font size setting. I did find this article from 2018 where they found that 3% of visitors to the Internet Archive used a custom default font size, so there’s that.