PX to REM Converter

How to use PX to REM Converter

1. 1
   Paste your values. One per line, or a whole declaration such as padding: 32px 8px — every number in it is converted.
2. 2
   Set the root font size. Leave it at 16 unless you have genuinely changed the size on the html element.
3. 3
   Copy the result. Switch direction to convert rem back to pixels against the same root.

About converting CSS units

The rem exists to solve a specific accessibility problem. Browsers let a reader change their default font size, and a substantial number of people do — for eyesight, for a distant screen, or simply from preference. A layout built in pixels ignores that setting entirely, because a pixel is a pixel whatever the reader asked for. A layout built in rem scales with it, because one rem is defined as the root font size, so changing the root changes everything derived from it in proportion. The default root is 16px in every major browser, which makes the conversion straightforward: divide by 16 to get rem, multiply by 16 to get pixels. A common shortcut sets the root to 62.5 percent so that one rem equals ten pixels and the mental arithmetic disappears — but that shortcut works by overriding the reader chosen size, which defeats the purpose of using rem in the first place. Converting properly costs nothing once a tool does it for you. The other unit worth understanding alongside rem is em, which is relative to the element own font size rather than the root. That makes em compounding: a 0.9em inside a 0.9em inside a 0.9em is 0.729 of the original, which is how text ends up mysteriously tiny four levels deep. Use rem for anything that should be consistent and em for things that should scale with their immediate context, such as padding inside a button that should grow with its label.

Frequently asked questions