css - 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.