How to Set Base Size for Rem

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>

What's the correct way to set a base REM value in CSS?

yes that's right. You need to make your html font-size to 16px as your base font-size and then use rem with the rest. Rem sizes the element relative only to html while em sizes relatively to its nearest parent.

what is the base font-size if the body element has already been set in rem

rem values are relative to the root html element, not to the parent element. That is, If font-size of the root element is 16px then 1 rem = 16px for all elements. If font-size is not explicitly defined in root element then 1rem will be equal to the default font-size provided by the browser (usually 16px).

And in your doubt the so in your doubt the answer is you have to assume that it will take the default font-size provided by the browser (usually 16px) of root html element.So 0.9 rem means it is 0.9 of 16px.

Using rem to set font-size inside :root element works. Why?

rem values are relative to the root element's font-size property which for HTML documents is the html element.

As per the CSS Values and Units Module Level 3 about rem values:

Equal to the computed value of font-size on the root element. When
specified on the font-size property of the root element, the rem units
refer to the property’s initial value

If there is no explicit value set on the root element it inherits it's value from the browser settings that the user can change; normally the default font size in the browser settings is 16px or medium.

So if you set rem on the root element you're setting it relative to the default value from the browser settings

Set Bootstrap 5 to custom REM font size

rem units are based on the font-size of the html element and the default size is 16px.

To achieve what you are doing, simple set the font-size: 10px to html. Example:

html { font-size: 10px; }
body { font-size: 1.6rem; } /* This will be 16px */

Now, doing it in Bootstrap 5 requires you to change the SCSS/CSS3 variable for body font-size. Below is an example of how to do it using CSS:

html { font-size: 10px; }

:root {
  --bs-body-font-size: 1.6rem;  /* Overwrite this variable */
  font-size: var(--bs-body-font-size);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
  <body>
    <p>This is 1.6rem or 16px.</p>
  </body>
</html>

Setting root font-size not affecting rem units in Safari for margin, padding, etc

Maybe that's some trouble with Safari setting minimum font sizes. Safari does not allow fonts to be "too small", so I guess your scaling does not work as expected in Safari.

This was discussed here:
Media Queries issue: Safari not scaling elements in REM

Setting the value of REM for all the properties in CSS

We've covered this in comments, but essentially the answer is to set the base font size to 10px rather than 62.5%.

html { font-size: 10px; }

Now, all your rem values work from 1rem = 10px. which mean your calculations actually got a lot simpler.

1.5rem = 15px
2rem = 20px

...and so on.

Now margin: 1rem really does mean margin: 10px.

How to Set Base Size for Rem