PX to REM Converter
Convert pixels to rem or em against any root font size.
Why the root font size is the whole point
A rem is simply a multiple of the root element's font size. At the browser default of 16px,1.5rem resolves to 24px — which makes the conversion look like a pointless division until you remember that the root is not fixed. A reader who sets their browser's default text size to 20px shifts every rem on the page with it, and the layout grows to match. A page built in pixels ignores that setting completely.
That is also why rem beats em for most work. An em is relative to its parent's font size, so it compounds: nest three elements at 0.9em and you are at 0.73 of where you started, which is rarely what anyone intended. Reach for em only when you actively want a value to track its immediate context — padding inside a button that should grow with the button's own label, for instance.
You will still see the advice to set the root to 62.5% so that 1rem equals 10px and the mental arithmetic disappears. It works, but it does so by overriding the reader's preference — which is the one thing rem exists to preserve. Leave the root alone and let the table above do the arithmetic.
PX to REM conversion table (16px root)
Every value below assumes the browser default root font size of 16px, so1rem = 16px. If your root is different, use the converter above — the ratio changes with it.
REM to PX conversion table (16px root)
Doing it in your head
At a 16px root, halving works cleanly: 16px is 1rem, 8px is 0.5rem, 4px is 0.25rem and 2px is 0.125rem. Most sizes in a typical scale are sums of those four, so 24px is 16 + 8 = 1.5rem and 12px is 8 + 4 = 0.75rem. The awkward ones are multiples of 3 and 5 — 14px is 0.875rem and 18px is 1.125rem — which is exactly what the table is for.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. With the default root of 16px, 24px ÷ 16 = 1.5rem. To go the other way, multiply: 1.5rem × 16 = 24px.
What is the difference between rem and em?
rem is always relative to the root element’s font size, so it is predictable anywhere in the document. em is relative to the font size of the element’s own parent, which compounds through nesting — three levels of 0.9em leaves you at about 0.73 of the original, not 0.9.
Why use rem instead of px at all?
Because a reader who raises their browser’s default font size expects the page to respond. Lengths in px ignore that setting entirely; lengths in rem scale with it. It is one of the cheapest accessibility wins available.
Should I change the root font size from 16px?
Usually not. 16px is the browser default and the number every reader’s accessibility setting is expressed against. The old trick of setting the root to 62.5% to make 1rem equal 10px does make the arithmetic easier, but it overrides the reader’s preference, which is the thing rem exists to respect.
Do rem units work for anything besides font size?
Yes — padding, margin, width, border-radius, and media query breakpoints all accept rem. Using it for spacing as well as type means the whole layout scales together rather than text growing inside fixed-size boxes.