PX to REM Converter
100% private — runs on your device, never uploaded. Works offline once loaded.
Convert pixels to rem (or em) and back using any root font-size you like — the default is 16px. Type in either field for instant two-way conversion. Everything runs locally in your browser.
Why convert px to rem at all?
Designers hand off mockups in pixels, but building layouts in rem makes them respect the user's browser font-size setting. When someone bumps their default text size up for readability, a rem-based layout scales with them; a pixel-locked one does not. Converting your pixel values to rem is the bridge between a pixel-perfect design and an accessible, responsive front end.
The math is simple: rem = px ÷ root-font-size. With the standard 16px root, 24px becomes 1.5rem and 8px becomes 0.5rem. This tool does that division live in both directions so you never have to reach for a calculator mid-build.
rem vs em — the difference that trips people up
Both units are relative, but to different things. rem (root em) is always measured against the font-size on the <html> element, so it stays predictable no matter how deeply nested your element is. em is measured against the font-size of its own element or nearest parent, which means ems can compound — a 1.2em value inside another 1.2em element renders larger than you might expect.
Because this converter uses a single root value, its rem and em outputs are identical. Use rem for spacing, widths and most sizing where you want consistency; reach for em when you deliberately want a value to scale with its local text, such as padding inside a button that should grow with the button's font-size.
Setting the right root font-size
The default of 16px matches every major browser out of the box, so if you have not overridden it, leave the root at 16. Some teams set html { font-size: 62.5% } to make 1rem equal 10px, which turns the mental math into a simple 'move the decimal' trick — in that case set the root here to 10.
Whatever you choose, keep this converter's root in sync with the actual computed root font-size of your page, or the numbers will be off by exactly that ratio.
Tips for clean conversions
Aim for readable rem values rather than long decimals where you can — nudging a 15px design value to 16px (1rem) often reads better and keeps your stylesheet tidy.
- Body text at 1rem, headings at 1.5–2.5rem, and spacing on a rem scale keeps a design system coherent
- Avoid setting a pixel font-size on the html element — it overrides the user's accessibility preference
- Use the reference table below to memorise the handful of values you reach for most often
Frequently asked questions
How do I convert px to rem manually?
Divide the pixel value by your root font-size. At the default 16px root, 32px ÷ 16 = 2rem. This tool does the division for you and rounds to a clean decimal.
Why does 1rem equal 16px?
Because browsers ship with a default root font-size of 16px. 1rem simply means '1 times the root font-size', which is 16px unless you or the user change it.
Should I use px or rem for media queries?
Prefer rem or em in media queries so breakpoints respond to the user's font-size. A breakpoint written in px stays fixed even when someone zooms text, which can cut off content.
Does the tool round the result?
It trims to a clean value up to five decimal places, so common conversions like 0.5rem or 1.5rem stay tidy while unusual values still stay accurate.
Can I convert rem back to px?
Yes — type into the rem field and the px value updates instantly. Conversion works in both directions using the same root font-size.
Is there a file to upload?
No. This is a pure calculator — nothing is uploaded and no files are involved. Everything runs in your browser.
Advertisement