Search code examples
cssresponsive-designaccessibility

Does rem refer to the users preset size before its set in html tag?


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.


Solution

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