Hacker News Reader

Comment by graup | Hacker News Reader

> Why use relative units? ... because today there are different assistive technologies so that users can modify the base styles of an application web among those the font size, using this type of relative units ensures that the elements are displayed correctly on all devices.

I'm not convinced by this. Afaik all browsers support font size increasing/decreasing even if you don't specify your sizes in em/rem.

Relative sizes can be useful for developers/designers when targeting different screen sizes, see also units like `vw` and `vh`. But that's not UX (user experience), just DX (developer experience).

View on HN

> Afaik all browsers support font size increasing/decreasing even if you don't specify your sizes in em/rem.

Yes and no. On desktop you are right, however on mobile it is a whole different story. I'm visually impaired and I need font scaling in my OS and browser. That's why I can only use Chrome on Android and nothing else comes close on mobile.

In Chrome I can just set my preferred text size and most sites just adhere to this setting. Most of the time the only the odd element on a page glitches. Most of them are headings, which are often set in pixels. That's annoying, but no deal breaker.

Recently I tried switching to Firefox Mobile. In Firefox I can also set a preferred text size. But after some initial testing with my most visited sites, I came to the conclusion that Firefox Mobile is just poorly supported. Text sizes were all over the place. And it was unusable for me.

I also considered switching to iOS. But Safari doesn't even have a text scaling / sizing option. The only thing I could do on iOS is reader mode in Safari, but that's also site dependent. And I still have to pinch-zoom to set my text size every time I open a page.

And yes, I know I can pinch-zoom to enlarge all websites (except Google Amp!), but having to both horizontally and vertically scroll all text is extremely tiring.

iOS Safari does have a "Page zoom" setting that can be set per-site or as default in its settings, which is really mainly increasing the font size. It's probably not exactly as you like in Chrome.

I have tried this setting multiple times, but it doesn't do what I expect it to. I just tried it again on my wife's iPhone 12. I set the default page zoom to 200% and opened one of my regular sites (tweakers.net (Dutch)). When opening an article the content is zoomed in. When I pinch-zoom out the text size is small again.

On Chrome (Android) whenever I set the font size to 200% the behavior is more or less the same as on desktop. So the content is zoomed in and text sizes are huge. On iOS Safari Reader Mode works the way I expect to, but I find this a bit of a faff to use.

Ah, I see. Safari also shrinks the relative viewport. That's not as good.

In iOS, Settings->Display & Brightness->View can be changed to Zoomed. Does that help?

Android has its own mechanisms: https://www.wikihow.com/Change-the-Screen-Resolution-on-Your...

Put another way, would it help to decrease the DPI rather than only adjusting text?

Thanks for this. I didn't know iOS had such an option. I've just tried this setting on my wife's iPhone and it enlarges text and elements quite significantly. However it still doesn't resolve my main issue with Safari.

On my Galaxy S21+ I use both a larger text size and zoomed in screen. Both are just basic sliders in the Display settings menu. Although not all apps or System UI elements adhere to these settings, unfortunately.

> I also considered switching to iOS. But Safari doesn't even have a text scaling / sizing option. The only thing I could do on iOS is reader mode in Safari, but that's also site dependent. And I still have to pinch-zoom to set my text size every time I open a page.

Apple basically invented the ability to dynamically resize browser text back in iOS 7 [1].

If you go to Settings > Accessibility > Display & Text Size and set Larger Text to On, you make the text as large as you like.

If you only want bigger text in iOS Safari, the popup menu allows you to resize the text on the fly.

[1]: https://www.tpgi.com/text-resizing-web-pages-ios-using-dynam...

> If you only want bigger text in iOS Safari, the popup menu allows you to resize the text on the fly.

Which also zooms in on the content, thus only letting me see part of the total width of the page. Which results in me having to both scroll horizontally and vertically.

Which also zooms in on the content, thus only letting me see part of the total width of the page. Which results in me having to both scroll horizontally and vertically.

Depends on the site; if they coded it correctly and met accessibility guidelines [1], it would support text sizing of 200% or more. Given the state of CSS today, it’s not difficult to make the text wrap within the viewpoint even at bigger sizes so you wouldn’t have to scroll.

[1]: https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=144#r...

> Depends on the site; if they coded it correctly and met accessibility guidelines, it would support text sizing of 200% or more.

I agree. But the cold, hard truth is that it just doesn't work.

It's not quite the same. Firefox can change the default font size and Safari can set the minimum font size. If the rest of your layout has sizes set in pixels, then you will have 6 words in that "400px-wide container", whereas a "30em-wide container" would have fit that better.

In reality however no one cares about this anymore, at least since browsers have implemented full-page zoom and especially since responsive design became a thing, meaning that one should be able to zoom into a whole page and have it fit properly anyway.

So for me this is outdated information useful to about 3 users per website. Long gone are the days of 62.5% font size trick.

Users can still have their own style sheets, including fonts scaling.

Yes, that's 1 of the 3 users I mentioned.

How many people do that in practice? Just a tiny subset of CSS enthusiasts.

> Long gone are the days of 62.5% font size trick.

Isn't the 62.5% trick about making the code easier to write/understand/maintain? Or are you advocating for not using relative units at all? That might work for some use cases however it breaks if you need any kind of scaling feature within the site/app.

62.5% was specifically to bring the default 16px to 10px, which meant now 1em = 10px, at least at the root. With that, you could easily size your entire layout in EMs and, yes, keep it readable:

    .main {
        width: 80em
    }
    .sidebar {
        width: 20em;
    }
    .content {
        width: 60em;
    }

There's no point in bringing the font down to 10px if you're not going to use EMs

As far as i understand it's about `rem`, not `em` (which is relative to it's parent not the 62.5-normalized root element). And as long as you don't go all-in with absolute units (and loose all control over custom scaling on your site/app), you still need `rem`.

The 62.5 hack has been around for a decade before rem was even thought of. The fact that rem would be a better fit for it is irrelevant to the conversation.

I'm just saying that using em and rem for sizing isn't as useful as it once was.

My rule of thumb is to only use them for things directly related to text, like inline icons, text spacing and whatnot.

> Afaik all browsers support font size increasing/decreasing even if you don't specify your sizes in em/rem.

They do now, because zooming just couldn't be implemented properly in any other way since everyone was using px (I still remember the days of IE zooming some elements of a page and leaving the rest as they were). And because of that, everyone will just happily keep using px...

> I still remember the days of IE zooming some elements of a page and leaving the rest as they were

Sounds like you're referring to the proper text sizing that all browsers used to support, rather than the 'zoom everything' approach which is far less accessible. One of the biggest web downgrades we've seen, imo.

You're assuming that font size increases in a browser are part of assistive technology and they are not. Relative font sizes are much more adaptable across a broad range of devices and technologies.

I gave this a test a few months back on some 40 popular websites and found only a few using relative units, and several had severe visual issues from changed base font sizes.

Browser zoom scaling seems to be the “much more adaptable” solution to me.

There are standard committees you can join if you want to share your opinion on how disabled people should be increasing their font size and having components run off page.

I think your sarcasm may have clouded the point you’re making :) I’m not sure what you’re getting at. Browser zoom generally does a much better job at overflow than font size scaling.

When you consider a single user reading a single website that might be DX. But if everyone needs to constantly tweak their font size in order every time they change websites, that is a UX problem.

Reply on news.ycombinator.com