REM PX EM Converter
Convert between px, rem and em using your root and parent font sizes — the exact math the browser applies to CSS units.
How it works
px = rem × root · px = em × parent · rem = px ÷ root · em = px ÷ parent
rem is always relative to the root (<html>) font size, so it stays predictable no matter how deeply an element is nested — 1.5rem is 24px whenever the root is 16px. em is relative to the *parent* element’s font size, so it compounds: an em inside an em inside an em multiplies. Because users can change their browser’s default font size for accessibility, sizing type and spacing in rem lets the whole layout scale with their preference, while px is frozen.
Worked example
With the default 16px root, 24px = 24 ÷ 16 = 1.5rem. If a button’s parent font-size is 20px, that same 24px is 24 ÷ 20 = 1.2em inside the button.
Frequently asked questions
Should I size things in rem or px?
Use rem for font sizes, padding and media-query breakpoints so they respect the user’s chosen default font size. Reserve px for hairline borders and details that genuinely should not scale.
Why does em sometimes surprise me?
em compounds with nesting. If a parent is 1.2em and a child is also 1.2em, the child renders at 1.2 × 1.2 = 1.44 times the grandparent size. rem avoids this by always referring back to the root.
What is the default root font size?
Browsers default the root to 16px unless the user or your CSS changes it. Setting html { font-size: 62.5% } is an old trick to make 1rem = 10px for easier mental math, though it can interfere with user zoom preferences.
Related calculators
This calculator is for educational purposes. Double-check important results before acting on them.