Let's say that end user has issues reading smaller text, so they've set their browser to default to 20px. If I set the rem size like this:
html {
font-size: max(1rem, 2.5vh);
}
Will it override their preference, or would it set "rem" to their preference (20px, in this case)? I don't want to break accessibility, but also want to scale the font with the screen-size. It seems to work on my end, but I want to be sure this is the best method.
"rem" refers to computed value of font-size of the root element, so the result of the font-size: max(1rem, 2.5vh);
setting.
1rem applied to the font-size of the root element = 1em, so the rem size is the result of max(20px, 2.5vh)
if the user has set the default to 20px.
To cite MDN on the <length>
unit rem
rem
Represents the font-size of the root element (typically
<html>
). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).