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

Therefore, I'm setting the font size to 1rem = 10px using the HTML syntax font-size: 62.5 percent ;. But what if I also want to set the margin, padding, border, etc. to that conversion rate?

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.