PX to REM / REM to PX
Convert pixel and rem values using your document root font size.
When to use this tool
- Translating a design spec in pixels into accessibility-friendly rems.
- Aligning a design system's spacing scale to a consistent base font size.
- Debugging why a component renders larger than designed at non-default root sizes.
How it works
- Set the root font size (default 16px).
- Enter the value to convert.
- Read the rem and px equivalents.
- Use rems for fonts and spacing; reserve pixels for fixed borders and media queries.
Privacy: This tool runs entirely in your browser. Your input is not sent to our servers.
rem = px ÷ 16; px = rem × 16
Advertisement
Frequently asked questions
Why prefer rems over pixels?
Rems scale with the user's browser font size preference, which is a real accessibility win for users who zoom.
Should I use rems in media queries?
Yes. Em-based or rem-based media queries respect user font scaling, pixel media queries do not.
What if my root is not 16?
Change the root in the tool. 10px roots (the `62.5%` trick) are common but add an indirection for non-designers.