6 ms·

> Why use relative units? ... because today there are different assistive technologies so that users can modify the base styles of an application web among thos

by graup 4y ago

> 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).

encryptluks2 4y ago
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.
- lelandfe 4y ago
  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.
  - encryptluks2 4y ago
    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.
    - lelandfe 4y ago
      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.
piskerpan 4y ago
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.
- masklinn 4y ago
  Users can still have their own style sheets, including fonts scaling.
  - piskerpan 4y ago
    Yes, that's 1 of the 3 users I mentioned. How many people do that in practice? Just a tiny subset of CSS enthusiasts.
- chriswep 4y ago
  > 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.
  - piskerpan 4y ago
    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
rob74 4y ago
> 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...
- oneeyedpigeon 4y ago
  > 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.
otikik 4y ago
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.
alex3305 4y ago
> 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.
- projektfu 4y ago
  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.
  - alex3305 4y ago
    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.
    - 4y ago

by graup 4y ago

encryptluks2 4y ago

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.

lelandfe 4y ago
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.
- encryptluks2 4y ago
  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.
  - lelandfe 4y ago
    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.

piskerpan 4y ago

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.

masklinn 4y ago
Users can still have their own style sheets, including fonts scaling.
- piskerpan 4y ago
  Yes, that's 1 of the 3 users I mentioned. How many people do that in practice? Just a tiny subset of CSS enthusiasts.
chriswep 4y ago
> 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.
- piskerpan 4y ago
  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

rob74 4y ago

> 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...

oneeyedpigeon 4y ago
> 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.

otikik 4y ago

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.

alex3305 4y ago

> 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.

projektfu 4y ago
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.
- alex3305 4y ago
  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.
  - 4y ago