|
@tomayac | |||||
|
#A11Y Tip: Don't set absolute font sizes! If someone has their default browser font size bumped up/down, you override their choice and force them to zoom. 😔
Instead, set the font size to `100%` on the `:root {}` level and make everything a function thereof via `em` or `rem`. 🎉 pic.twitter.com/q455OUjHO8
|
||||||
|
||||||
|
|
Thomas Steiner
@tomayac
|
18. pro |
|
Full credits to @matejlatin from whose article betterwebtype.com/articles/2019/… I have learned this from. We just fixed this issue on v8.dev (pending deploy).
|
||
|
||
|
Aaron Peters
@aaronpeters
|
18. pro |
|
So, using 1.1 rem in the root is bad?
|
||
|
|
||
|
|
Thomas Steiner
@tomayac
|
18. pro |
|
By doing that, you override and upscale the user's chosen default font size, which typically is 16px, to 17.6px. You can do that, but maybe only above a certain screen size (or more hand-wavily: on "big" screens).
|
||
|
|
||
|
Filip Stanis
@FilipStanis
|
19. pro |
|
I understand the rest, but I'm a bit confused about this: what's the purpose of setting :root to 100%?
Isn't that the default?
|
||
|
|
||
|
|
Thomas Steiner
@tomayac
|
19. pro |
|
It is the default, making it explicit mostly just makes sure you (or a CSS framework that you may include) don't set it to something else… ;-)
|
||
|
|
||
|
CJ Infantino
@cjinfantino
|
18. pro |
|
Can’t you use “rem” which is a relative value based on the browsers set font size?
|
||
|
|
||
|
|
Thomas Steiner
@tomayac
|
19. pro |
|
Yes, as long as you use `:root { font-size: 1rem; }`.
|
||
|
|
||
|
bruno (NOT Fernandes)
@theBashShell
|
19. pro |
|
Right. But this may cause content to overflow and you may get the ugly scrollbars
|
||
|
|
||
|
|
Thomas Steiner
@tomayac
|
19. pro |
|
If someone sets their default font size to very large, ugly scrollbars may be the least of their concerns…
|
||
|
|
||
|
Josh Goldberg
@JoshuaKGoldberg
|
18. pro |
|
Oh wow so that's why we do that! Ty 😆
|
||
|
|
||