| px | rem |
|---|
About this tool
The rem (root em) is a CSS length unit relative to the font size of the root <html> element, while px is an absolute device pixel. At the browser default root size of 16px, 1rem equals 16px, so 24px is 1.5rem and 10px is 0.625rem. Because rem scales with the root size, switching the base re-bases every rem value at once — this converter lets you set that base and translate values in either direction.
Use it to migrate a px-based design system to scalable rem units, size typography and spacing that respects a user's browser font-size setting, sanity-check a Tailwind or design-token scale, or reverse-engineer the pixel value behind a rem declaration in someone else's stylesheet. The reference table gives you the rem equivalent of common px steps at your chosen base in one glance.
rem is relative to the root (<html>) font size, not the parent element — that's the only difference from em, which is relative to its own parent.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. At the default 16px root, 24px ÷ 16 = 1.5rem and 10px ÷ 16 = 0.625rem. Change the base and the same px value maps to a different rem.
Is 1rem always 16px?
Only when the root font size is the browser default of 16px. 1rem equals whatever font-size is set on the <html> element, so if the root is 10px then 1rem is 10px.
What's the difference between rem and em?
rem is always relative to the root (<html>) font size, so it stays consistent across the page. em is relative to the font size of its own element/parent, so nested em values compound and can drift.