Counterpoint: rem is a PITA for small coding projects unless you don't care about design or love doing math all of the time.
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.
Depends on what you are working on. Sometimes you will work with designers who need text and on-page elements to line up in certain ways or provide a certain amount of interactivity. In those cases REM can be a huge pain when you have to design everything in relation to everything else rather than just be able to pull over the design verbatim.
>The browser will interpret it for you and use whatever number of pixels it determines is best).
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.
> Mobile browsers might zoom the content as if it's an image, scaling the entire viewport, but desktop browsers very much do not.
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.
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.
rem is my go to, you can define your basic size in :root and then everything is based on that. Percentages cascade so if you move stuff around it can change size.
> A lot more people than you may think change their base text size, usually making it larger.
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?
Most of the "large by default" sizing and spacing is mostly so that you can handle finger based navigation on a phone/touch device. It's not necessarily for readability. Can't speak for you, but I have my android phone set to max font size and scaling under accessibility. Mainly in that I don't have great vision, and am far sighted, so don't generally wear glasses when not in front of my computer. And even then usually have to zoom in a bit.
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.
> Most of the "large by default" sizing and spacing is mostly so that you can handle finger based navigation on a phone/touch device.
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.
Many laptops also have touch screens. I'm not saying it's the only way... I'll also note that over-crowding a UI also leads to poorer quality UX in the end. People find more than a handful of options on the screen or in a given area at a time difficult to manage, at least initially.
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.
Instead of making browser text smaller, I have my OS to set use 100% UI scaling, instead of the default 150% (on Windows) or 200% (on MacOS). And then yes, you end up sometimes scalingwebsites up, but I've never had to scale down.
Font size numbers seem so arbitrary. The number includes some padding at the top, and some padding at the bottom. The bottom padding is sometimes occupied by the descender of letters like 'g', 'j', 'p', 'q', or 'y'. The real measurement to look for is the Cap Height, or the height of the typical capital letter. Even though that number will leave out the space of descenders.
It will also vary, often inaccurately from typeface to typeface. 12pt is supposed to be 12pt (6 lines per inch) and going between two differing typefaces, you may get upwards of a 50% variation. That doesn't even account for interface scaling to physical size, which no major OS does right, and only phone devices tend to come close.
Counterpoint to your counterpoint, most projects have 3 to 5 different font sizes and using rem units is a negligible effort.
As long as some people or accessibility tools change the base font-size then it's worth using them.
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.