PX to REM Converter
Convert pixels to rem and rem to pixels with a custom root font size — for responsive, accessible CSS.
Convert PX to REM and back
The PX to REM Converter turns pixel values into rem units and rem back into pixels, based on a root font size you set (16px by default). It's an everyday helper for writing responsive, accessible CSS where rem units scale with the user's preferences. Conversion is instant and copyable, all in your browser.
Why use rem instead of px?
The rem unit is relative to the root font size, so when a user increases their browser's default text size for readability, everything sized in rem scales up with it — fonts, spacing, and layout. Pixel values stay fixed and ignore that preference. Using rem makes your site more accessible and easier to scale globally by changing one root value.
How to use it
- Set your root font size (usually 16px).
- Enter a value in px to get rem, or in rem to get px.
- Copy the converted value into your CSS.
Common conversions (16px base)
| Pixels | REM |
|---|---|
| 12px | 0.75rem |
| 16px | 1rem |
| 24px | 1.5rem |
| 32px | 2rem |
REM vs EM
Both are relative units, but they differ in what they're relative to. rem is always relative to the root element's font size, making it predictable. em is relative to the current element's font size, so it compounds when nested — useful for component-relative spacing but easy to lose track of. For most layout and typography, rem is the safer, more predictable choice; this converter works for both since the math is identical.
Tips
- Keep the default 16px base unless you've changed the root font size in your CSS.
- Use rem for font sizes, padding, and margins to make everything scale together.
- Reserve px for things that should never scale, like 1px borders.
Private and free
All conversion runs in your browser — nothing is uploaded. The tool is completely free with no sign-up.
Frequently asked questions
What is the default root font size?
Browsers default to 16px, so 1rem = 16px unless you change the root font size in your CSS.
Why use rem over px?
rem scales with the user's browser font-size preference, making your site more accessible and easier to scale globally.
What's the difference between rem and em?
rem is relative to the root font size; em is relative to the current element and compounds when nested. The conversion math is the same.
Is it free?
Yes, completely free with no sign-up, running entirely in your browser.