PX to REM Converter

Type a value in px, rem or em and the other units update instantly. Change the root font size if your site doesn't use 16px, grab values from the 1-100px table, or paste a whole stylesheet to convert every px value at once.

How to use the PX to REM Converter

1. Set the root font size. Browsers use 16px by default. If your CSS sets html { font-size: 62.5% }, use 10.
2. Type a value in the PX, REM or EM box. The other two boxes update immediately.
3. Need em? Set the parent element's font size; em is relative to the parent, rem to the root.
4. Use the table for quick lookups. Click any cell to copy its rem value.
5. Convert a stylesheet: paste CSS into the converter below, choose the options and copy or download the converted CSS.

PX to REM formula

A rem ("root em") is a multiple of the font size of the root <html> element. Browsers set that root size to 16px unless the visitor or your CSS changes it, so:

• rem = px ÷ root font size   e.g. 20px ÷ 16 = 1.25rem
• px = rem × root font size   e.g. 2.5rem × 16 = 40px
• em = px ÷ parent font size   e.g. 12px inside an 18px parent = 0.6667em

If your stylesheet sets html { font-size: 62.5%; }, the root becomes 10px (62.5% of 16px) and 1rem = 10px. Set the root size above to 10 to match.

Common px to rem values (16px root)

rem vs em vs px: which should you use?

rem is the safest choice for font sizes and most spacing: every rem value on the page is based on the same root size, so it is predictable, and it grows when a visitor raises their browser's default font size. em is useful when something should scale with its own component, such as padding on a button that grows with the button's text, but nested em values multiply (1.2em inside 1.2em is 1.44 times the root). px is still fine for things that should not scale, like 1px borders, box-shadow offsets and some media query breakpoints.

The CSS converter on this page leaves comments, strings and url() paths untouched, keeps 1px values by default and, unless you untick the option, does not change the numbers inside @media queries.

Frequently asked questions

Related tools