px and accessibility
Hey folks I came across this component library by radix called
@radix-ui/themes they use px for most of the css property like font-size isn't px bad for accessibility or am I missing something2 Replies
I'm not authority on this, but I believe it is considered bad practice to set a px value on font size because the user might have set their own base font size to make things easier to read.
If you are using em/rem they are based off the root font size (from the browser) so it will respect the browser settings.
If you use em/rem elsewhere things like zooming will work better too.
Mike hit it pretty much on the head, yeah. Almost anything that's not
em or rem overrides any changes the user could have made to their font size. Any of the viewport units (vw, vh, dvh, etc), px, any of the print units (cm, in, pc, etc), and even the oft-misused % are all culprits of not allowing user changes nor zooming.
Of course, you can always combine em/rem with some of the above to make more fluid-but-still-accessible font sizes. As an example, my default go-to is this:
Adjust the middle value to better work with the chosen font family, but basically the font size is never smaller than 1rem, larger than 2rem, and grows with the viewport (using vmin) in-between. But since 0.875rem is part of the calculation it still respects any user overrides.