PX to REM Converter
Convert pixels to rem (and back) for responsive CSS.
Convert between pixels and rem units for CSS. Enter a pixel value and your root font size (usually 16px) to get the rem equivalent — handy for building scalable, accessible layouts.
Formula / method
Examples
1.5rem
0.5rem
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
Why use rem instead of px?
rem scales with the user’s root font size, so layouts respect accessibility settings. The default root size in browsers is 16px.