CSS px ↔ rem Converter

The mockup comes in px, the project uses rem, and you catch yourself dividing 24 by 16 in your head for the tenth time today, or worse, botching 13 divided by 16 and guessing 0.8. This page does the math both ways: type a px value and the rem appears; type rem and the px updates. The :root base is configurable, with the browser default of 16px already filled in.

Rem is relative to the root element's font-size, and that is exactly why it matters: the default is 16px, but users can raise it in their browser settings, and everything set in rem scales along while anything in px stays frozen. There is also the old trick of setting the html font-size to 62.5%, which makes 1rem equal 10px for easier math; if your project uses that convention, switch the base to 10 here and the numbers come out right.

Use rem for font sizes, spacing and widths that should follow the user's font preference; px still makes sense for 1px borders and details that should not scale. Be careful not to confuse it with em, which is relative to the element and compounds through inheritance, while rem always points at the root. The result comes out unrounded (13px at base 16 gives 0.8125rem) and can be copied as is: browsers accept as many decimal places as you give them. Everything runs locally.