PX to REM Converter — CSS Pixels to REM Calculator
Convert pixels to rem (and rem to px) for responsive web design, Tailwind CSS, and accessible typography. Free online CSS unit converter.
🔒 Private by design. This tool runs entirely in your browser — the values you enter never leave your device.
Convert CSS pixels (px) to relative rem units instantly. Enter your pixel value and root base font size (standard browser default is 16px) to get the exact rem equivalent and CSS snippet.
Formula / method
Examples
1.0rem
1.5rem
0.5rem
2.0rem
How the conversion works
A rem is a length unit equal to the font size of the root html element. By default browsers set that root size to 16px, so 16px equals 1rem, 8px equals 0.5rem, and 24px equals 1.5rem. To convert, you divide the pixel value by the root font size; to go the other way you multiply. This tool does that arithmetic for you and lets you change the base if your project uses a different root size.
Because the whole layout scales from one number, switching from px to rem makes a design respond cleanly when a user changes their browser's default text size for accessibility.
rem versus em, and common pitfalls
The frequent mistake is confusing rem with em. A rem is always relative to the root element, but an em is relative to the font size of its own parent, so nested em values compound and can drift unexpectedly. Use rem when you want predictable, document-wide scaling.
Another trap is the '62.5% trick', where the root is set to 62.5% so that 1rem becomes 10px for easy mental maths. It works, but remember to set your calculator's base to 10 in that case, otherwise the numbers will not match your stylesheet.
Where it's used
- Converting a designer's pixel spec into rem for scalable CSS
- Building responsive typography that respects the user's base font size
- Migrating a stylesheet from fixed px values to relative rem units
- Setting margins, padding, and font sizes in accessible units
- Matching a design-token system that expresses spacing in rem
Real-world examples
- A front-end dev converts a 24px heading to 1.5rem against a 16px root.
- A 12px caption becomes 0.75rem so it scales if the reader enlarges their browser font.
- Spacing of 32px is written as 2rem in a shared design-token file.
Did you know?
The name rem is short for 'root em': it's sized relative to the root element's font size. Browsers default that to 16px, so 1rem = 16px unless changed — and because rem scales with the reader's own font setting, sizing in rem instead of px is a common accessibility win.
FAQ
What is the formula to convert PX to REM?
The formula is: REM = Pixels ÷ Root Font Size. For example, with a standard root size of 16px, 24px becomes 24 ÷ 16 = 1.5rem.
What is 16px in rem?
At the standard browser default base of 16px, 16px is exactly 1rem.
How do I convert REM back to PX?
To convert REM back into pixels, multiply the REM value by your base root size: Pixels = REM × Root Font Size. For example, 1.25rem × 16 = 20px.
Why should I use REM instead of PX in modern CSS?
REM units scale automatically when users adjust their default font size in browser settings for accessibility or readability. Using fixed PX units ignores user preferences and can harm accessibility.
What is the difference between REM and EM?
REM (Root EM) is always calculated relative to the root <html> element (usually 16px). EM is calculated relative to the parent element font size, which can compound unpredictably in nested components.