The formula
rem = pixels ÷ root font size
Where it comes from
The rem is relative to the font size of the root element, which is 16 pixels by default in every browser: 24 px is 1.5 rem. Using it instead of pixels matters for a specific reason, not an aesthetic one: when someone raises the text size in their browser preferences — because they cannot see well, not on a whim — what changes is that root, and a design built in pixels ignores that preference entirely.
How to work it out by hand
- Check the root font size; 16 px by default
- Divide the size in pixels by that root
- The result is the value in rem
- For the scale, multiply by the ratio at each level
What is worth knowing
A modular scale takes its names from musical intervals, and that is not a pretty coincidence: they are the same ratios. A major third is 1.25, a perfect fifth 1.5 and the golden ratio 1.618. The larger the ratio, the greater the contrast between body text and headings: 1.125 gives a subtle hierarchy that works in dense interfaces, while 1.5 gives a very marked one, more at home on a landing page. A word on the em, which gets confused with the rem: the em is relative to its parent element and therefore compounds when nested, so two levels of lists at 0.9 em end up at 0.81. The rem always looks at the root and has no such problem.