How to set base size for 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).
Source
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>
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.