Setting the value of REM for all the properties in CSS

Question

I would like to use rem everywhere (read for all the possible properties) in my site. However, using the default rem - px conversion rate isn't quite intuitive :

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

Thus I am using html { font-size: 62.5%; } which will set 1rem = 10px for the font size. How does that work however if I want to set the margin/padding/border/... to that conversion rate as well ?

Thanks !

Answer 1

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.

Answer 2

Setting your font-size at root level using an absolute unit overwrites the user’s browser settings (default is medium [16px]). It is better to use relative unit. eg.

// scss comments: use /* in css */
// 1rem = 10px
// 62.5*16px(base) = 10px
html {
  font-size: 62.5%; // will work when user change browser font
}