PX to REM/EM Converter
Convert px to rem and em
🔒 In-browser · Method · · Disclaimer · PX to REM/EM Converter
PX to REM/EM Converter is built for converting px to rem and em — fast, free, and private. You supply Pixels (px) and Root Font Size (px) to PX to REM/EM; the answer follows at once. PX to REM/EM ties each output to its formula. PX to REM/EM works for one check or many. No sign-up is needed for PX to REM/EM. The math runs on your device. PX to REM/EM sits in the Tech & Digital section next to free online px to rem/em converter and px to rem converter font size em root. Run PX to REM/EM twice to find the driving input. PX to REM/EM answers the next Tech & Digital question you meet.
What the defaults give
16 pixels at a 16 pixel root font size is 1.000 rem, or 100%.
rem is relative to the root element, so the conversion is a straight division: px ÷ root. That single fact explains why the same pixel value maps to different rem values when the root changes.
The arithmetic
rem = px ÷ root font size. 16 ÷ 16 = 1.000 rem, and as a percentage that is 100%.
If the root is set to 20 px — some designs do this to scale the whole layout — then 16 px becomes 0.8 rem, not 1 rem. The pixel value stayed the same; the relative value did not.
Worked examples at a 16 px root
12 px → 0.75 rem (75%)
14 px → 0.875 rem (87.5%)
16 px → 1 rem (100%)
20 px → 1.25 rem (125%)
24 px → 1.5 rem (150%)
32 px → 2 rem (200%)
rem versus em
rem is fixed against the root element, so 1.5rem is the same size everywhere on the page. em is relative to the parent element’s font size, so nested elements compound: a 1.5em heading inside a 1.5em container renders at 2.25× the base. That compounding is useful for proportional spacing and a frequent source of unintended size.
Why this matters for accessibility
Users who increase their browser’s default font size expect text to grow. Sizes set in px ignore that setting; sizes in rem scale with it. Setting the root font size in px and everything else in rem gives the most predictable behaviour across both.
Mistakes worth avoiding
- Assuming a 16 px root. Check the CSS — a design with html { font-size: 62.5% } makes 1rem equal 10px.
- Mixing rem and px for related spacing. A rem gap beside a px padding breaks when the root scales.
- Nesting em without accounting for it. Two levels of 1.2em is 1.44×, not 1.2×.
- Rounding too early. Three decimal places is the common convention; more is noise.
Frequently Asked Questions
Why is 16 px equal to 1 rem?
Because rem is relative to the root font size, and the browser default is 16 px. 16 ÷ 16 = 1, so 16 px is exactly 1 rem unless the page overrides the root.
What if my root font size is not 16 px?
Change the root field. At a 20 px root, 16 px becomes 0.8 rem — the pixel value is unchanged but the relative value is not.
Is rem better than em?
rem is predictable because it always refers to the root. em is relative to the parent, so nested values multiply — useful for proportional components, risky for accidental sizing.
What is 1.5 rem in pixels?
At a 16 px root it is 24 px. Multiply the rem value by the root size: 1.5 × 16 = 24.
How do percentages relate to rem?
At a 16 px root, 1 rem is 100%. The percentage and rem values are the same number expressed two ways, so 0.875 rem is 87.5%.
AI Token Cost Estimator and other Tech & Digital tools
AI Token Cost Estimator · Hash Generator (MD5/SHA) · ASCII Table Reference · Download Time Calculator · API Cost Calculator · Video File Size Calculator · Tech & Digital Guides