Full credits to @matejlatin from whose article https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/ … I have learned this from. We just fixed this issue on http://v8.dev (pending deploy).
-
-
Show this threadThanks. Twitter will use this to make your timeline better. UndoUndo
-
-
-
So, using 1.1 rem in the root is bad?
-
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).
- 2 more replies
New conversation -
-
-
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?
-
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… ;-)
- 2 more replies
New conversation -
-
-
Can’t you use “rem” which is a relative value based on the browsers set font size?
-
Yes, as long as you use `:root { font-size: 1rem; }`.
End of conversation
New conversation -
-
-
Right. But this may cause content to overflow and you may get the ugly scrollbars
-
If someone sets their default font size to very large, ugly scrollbars may be the least of their concerns…
End of conversation
New conversation -
-
-
Oh wow so that's why we do that! Ty
Thanks. Twitter will use this to make your timeline better. UndoUndo
-
Loading seems to be taking a while.
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.
Dad-of-3. Developer Advocate at
), PhD from
), Postdoc at
).
Instead, set the font size to `100%` on the `:root {}` level and make everything a function thereof via `em` or `rem`. 