How to calculate REM for type?

Question

How do I convert PX into REM for my type? I've read Jonathan Snook's article about using REM, but he was using font-size:62.5%, which defaults to your font size to 10px (for easier calculating). How would I convert my PX units into REM if I was to use 100%, 75%, and so forth?

Answer 1

Target Size / Base Size = Value

Since we can assume that browsers use 16px as default (after all, that's what Jonathan Snook did to assume that 62.5% is 10px), then your Base is 16. If you want 32px, then 32 / 16 = 2, want 40px then 40 / 16 = 2.5, want 24 then 24 / 16 = 1.5.

The same goes for 75%... Determine what 75% is (it's 12) and perform the same calculation. If you want 32px, then 32 / 12 = 2.666, want 40px then 40 / 12 = 3.333, want 24 then 24 / 12 = 2.

Answer 2

if u just add this code to your style file

html {
  font-size: 62.5%;
}

it will convert 1 rem=10px. Now you will be working 10px base. So

body {
  font-size: 1.6 rem;
}

u will have font size 1.6*10=16 px.