How to set base size for rem
CssCss Problem Overview
I have a simple question, where do you declare the base size that rem is calculated from?
<body>
<h1>Something</h1>
</body>
I can see that the font-size is <body> is set to 16px and the <h1> is set to 3rem, yet the font is rendering at 30px when I'd expect 48px. Can any parent redefine the base?
Css Solutions
Solution 1 - Css
> 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).
In other words, change the font size of your html element, and the calculation base for rem will change.
Example:
<html style="font-size: 10px">
...
</html>
Solution 2 - Css
rem units are based on the font-size of the html element, not the body element. The default size is usually 16px on html, however that's not guaranteed, and users can change that default value. A common practice is to manually set the font-size explicitly on html, usually to that 16px value, and then use rems in other places to set the final display value.
However, that practice has accessibility problems for when users want or need to increase the default font size, so you should design your pages and layouts so that they can adapt to different sizes.
From https://developer.mozilla.org/en-US/docs/Web/CSS/font-size:
> rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.