Why font-size must NEVER be in pixels
fedmentor.dev
fedmentor.dev
rem was important 10+ years ago for accessibility, before responsive frameworks and browser accessibility tools made it more or less redundant. When we have done accessibility testing, we found that almost no users actually bother with adjusting text size via their browser - the majority either use the MUCH easier to find zoom tools (which work great with px based sizing), or simply turn down the resolution of the display.
So much of the text display is now controlled by the browser (especially on mobile!) that for most situations it doesn't matter what unit you use - the browser will interpret it for you and use whatever number of pixels it determines is best).
I would consider rem to be a legacy accessibility feature - it's probably fine to use pixels in 2023.
Until you zoom
Mobile browsers might zoom the content as if it's an image, scaling the entire viewport, but desktop browsers very much do not. Plus, working in rem instead of px is super easy, barely an inconvenience. And now it works on both mobile and desktop. Amazing.
What browser are you using? If you zoom up this very HN page in Chrome or Firefox it will grow the content without spilling over the readable area. This works just as well with pixels as it does with rem.
I've never found the rem made it harder to care about design.
This isn't really right (especially putting "NEVER" in caps).
Mainly because this is somewhat misleading:
> If you've used pixels to define any of the above style properties, these will not respect the user's font size preferences
The user is setting the default font size, which isn't quite the same thing as their preferred font size. And while only specifying relative font sizes will make this into a kind of global font size preference, there are other, usually better, ways to address accessiblity.
> I once walked in on my mum holding a magnifying glass up to her computer screen because she didn't know she could change the text size!
Do her a favor and show her the browser's "zoom" function (which works fine on font sizes specified by pixel or point), or, for that matter, show her accessibility features of her OS. These are probably going to work much better for her than adjusting the browser's default font size. e.g., font size isn't the only thing you might want to make bigger or layout differently when a person has issues seeing small things. (And it doesn't require getting the world of web devs to buy into a convention of dubious value.)
BTW, to follow the advice of this article, you can only use relative font sizes, so no "points" either.
All the possible values: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#s...
Is it true that people are usually making it larger? I'm making it smaller the majority of the time, because websites tend to make the fonts absurdly large (HN is an exception -- I read this with the fonts only reduced to 90% of their default size). I honestly can't remember the last time I had to increase the font size. Do I just have superhuman vision?
My issues are retinal, not a matter of focus, so glasses don't really do that much for me. And I have to say I hate, hate, hate apps that don't respect the OS configuration for text sizing. Facebook used to be one of the worst offenders, the only app I've used recently that's particularly bad has got to be the AliExpress app.
I'm actually not a fan of generalization in the article, as the "pixels" in a browser are not supposed to be device pixels, but a given fraction of an inch, similar to pt size. Typical text should be 6 lines per inch by default... this is and has been a relative standard for print forever. The issue is device scaling isn't always correct in the OS or browser... You may have a 4k display, but if the OS doesn't know if it's 24" or 42" it won't scale correctly, and generally doesn't.
Similarly, I wish more OSes had a way to override the scaling for a given application, especially older apps with a fixed size, if you could 2x-3x them for modern displays, even if it's "blocky" it would be nice. I have setup an app shortcut layer on Linux for this once, but it would be far better if it was in the UI instead of setting up scripts, and custom shortcuts.
Sorry for veering OT, just concerns me more and more as I get older and my vision is less than perfect.
But surely websites can tell if you're browsing from a phone or not, and only do that on the phone? I don't know, I very rarely browse the web from my phone.
It will vary of course, some technically advanced users will often prefer a more dense ui/ux. Also, scaling a UX as you suggest takes a LOT of additional up front design consideration and effort (roughly 3x the effort every time you add a single target variance). My own experience on the developer side, is that you rarely have good design or UX guidelines as it stands in most projects, let alone appropriately defining and testing how you transition or show more than one UX.
For example, how many times have you seen a website that's different for phone or desktop, and one side or the other are missing functionality completely, meaning you often have to force-switch leading to a poorer experience overall.