PX to REM Converter
Convert px to rem and rem to px instantly with a custom root font size, a full 1–64px conversion table and CSS best-practice notes.
About the PX to REM Converter
The PX to REM Converter changes pixel values into rem units and back, live in both directions. The default root font size is the browser standard 16px, but you can set any base — useful for projects using the 62.5% root trick where 1rem = 10px.
Below the converter, a full 1–64px table shows every conversion at your chosen root size, so you can translate a whole design spec (paddings, font sizes, breakpoints) in one glance instead of typing values one at a time.
Rem units respect the user's browser font-size preference, which is why accessibility guidelines favour them over px for typography — the included notes explain when to use rem, and the common pitfalls.
How to Use the PX to REM Converter
- 1Type a px value to get rem, or a rem value to get px — both update live.
- 2Adjust the root font size if your project doesn't use the 16px default.
- 3Copy the rem value or the ready CSS snippet.
- 4Use the 1–64px table to convert a full set of design values at once.
Frequently Asked Questions
How much is 16px in rem?
1rem, at the default browser root font size of 16px. Likewise 24px = 1.5rem and 32px = 2rem. Change the root size in the tool and every conversion updates.
What is the formula for px to rem?
rem = px ÷ root font size. With the default 16px root: 20px ÷ 16 = 1.25rem. Going back: px = rem × root size.
Should I use px or rem in CSS?
Use rem for font sizes, spacing and media queries so the layout scales when users increase their browser font size. px is fine for things that shouldn't scale, like 1px borders.
What is the 62.5% root font-size trick?
Setting html { font-size: 62.5% } makes 1rem = 10px, so mental math is easy (1.6rem = 16px). It preserves user preferences because it's a percentage — set the root to 10 in this tool to work with it.