REM to PX Converter
Convert between REM, PX, and EM units for CSS sizing, with an adjustable base font size.
How this tool works
Choose your input unit
PX, REM, or EM - whichever unit your starting value is already in.
Enter the value and base font size
The base defaults to 16px, the common browser default, but can be changed to match your stylesheet.
See all three units at once
PX, REM, and EM update together, each with its own copy button.
Adjust the base to check responsive scales
Change the base font size to see how the same REM value renders at a different root size.
Quick facts
- Category
- Converters
- Best for
- Translating a designer's px spec into the rem values a codebase expects
About this tool
Enter a value in pixels, REM, or EM and see all three units at once, calculated against an adjustable base font size (16px by default, matching the typical browser default). REM is always relative to the root element's font size, so a page that sets a different root font size - a common technique for responsive type scales - changes what a given REM value actually renders as; adjusting the base font size here lets you check that math without opening dev tools. EM is treated the same way here, relative to the base font size you enter, which covers the common case of a single-level conversion; a fully accurate EM value in a deeply nested stylesheet also depends on any intermediate parent font sizes, which this tool can't see from a plain number input. Useful for translating a designer's px spec into the rem values a modern CSS codebase expects. Runs entirely client-side.
Why use this tool
All three units at once
See PX, REM, and EM together instead of converting one pair at a time.
Adjustable base font size
Check how a REM value renders against a non-default root font size, not just the 16px assumption.
Built for design handoff
Quickly translate a designer's pixel spec into the rem values a modern CSS codebase actually uses.
No math required
Skip manually dividing pixel values by the base font size every time a design spec comes in px.
Frequently asked questions
REM stands for "root em" and is always calculated relative to the root (html element) font size, which defaults to 16px in every major browser unless a stylesheet overrides it. If a site sets the root font size to, say, 20px for a larger type scale, then 1rem equals 20px instead of 16px everywhere on that page - adjusting the base font size here lets you see that conversion without needing to inspect the live page.
In this tool, yes - both are calculated against the base font size you enter, which covers the common case of a single level of nesting. In real CSS, EM is relative to the font size of its own element, which can compound through nested parents with different font sizes (an em inside an em inside an em), something a plain number input can't represent - for deeply nested EM math, treat this as a starting point rather than the final word.
REM values scale with the user's font size preferences and the root font size, which makes an entire page's spacing and type scale respond correctly if someone increases their browser's default font size for accessibility - a fixed PX value ignores that setting entirely. This is why most modern CSS codebases prefer REM for font sizes and spacing, reserving PX for things that genuinely shouldn't scale, like a 1px border.
Explore more free tools
Formatters, converters, validators, and generators - all free and running entirely in your browser.
Browse more tools