REM to PX Converter
Convert rem to pixels for any root font size. Set your root and the tool returns the exact pixel value with the formula.
How do you convert rem to px?
To convert rem to px, multiply the rem value by the root font size. The formula's px = rem x root, where the root defaults to 16px in every major browser. So 1.5rem is 24px and 2rem is 32px. Change the root in the tool and the result updates instantly.
Here's why that default matters. A rem is a relative CSS unit, but it isn't relative to the parent element the way em is. It's anchored to the document root, the <html> element, so one rem means the same pixel size everywhere on the page. That's what makes rem predictable for spacing and type. If you haven't touched the root, 1rem equals 16px, 0.5rem equals 8px, and 3rem equals 48px.
Why is rem relative and not fixed?
rem is relative because it scales with the root font size, so your layout respects browser zoom and a reader's accessibility settings. Pixels stay locked. That's the core trade-off when you pick a unit.
Most modern front-end teams size type and spacing in rem for exactly this reason. When a user bumps their default font from 16px to 20px, every rem-based value grows with it, but a px value won't budge. Our converter shows both sides at once, so you can see what 2rem becomes at a 16px root versus a 20px root without doing the math by hand. The result's the same number the browser would compute at runtime.
When would you convert rem to px?
You convert rem to px whenever a tool or context only speaks pixels. Browser dev tools, design specs, JavaScript measurements, canvas and SVG drawing, and email templates all work in px, so a rem-based design system often needs translating back to fixed numbers.
Here are the cases front-end devs hit most:
- Checking a design spec. A designer hands you 1.5rem for a heading, but your QA sheet or a Figma export lists pixels. Convert it to confirm 24px actually landed.
- JavaScript and canvas.
getBoundingClientRect, the Canvas API, and most DOM measurements return and accept pixels, not rem. If your tokens live in rem, you'll convert before you draw or measure. - Email. Plenty of email clients ignore rem, so you flatten rem design tokens to fixed px before you ship a template.
- Debugging. Chrome and Firefox dev tools show computed sizes in px. When a 2rem gap looks off, converting tells you the browser resolved it to 32px, or 40px if someone changed the root.
- Matching fixed assets. Borders, icons, and raster images are often specced in px, so converting your rem spacing keeps everything aligned to the pixel grid.
Does the root font size change the answer?
Yes, it does. rem to px depends entirely on the root, so the same rem value gives different pixels at different roots. 1.5rem is 24px at a 16px root, 27px at an 18px root, and 30px at a 20px root. Always convert against the root your site actually sets.
One trick worth knowing: some teams set the root to 62.5%, which makes it 10px, so the rem math is easy to do in your head. At a 10px root, 1.6rem is 16px and 2.4rem is 24px, because you just shift the decimal one place. You don't have to remember which trick a codebase uses, though. Type the real root into the converter and it'll give you the exact pixel value either way.
REM to PX reference table (16px root)
This table assumes the standard 16px root. If you've set a different root, type your value into the tool above and it'll recalculate. These are the rem sizes you'll reach for most often in CSS.
| REM | Pixels (16px root) |
|---|---|
| 0.5rem | 8px |
| 0.75rem | 12px |
| 1rem | 16px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 2rem | 32px |
| 2.5rem | 40px |
| 3rem | 48px |
How to use the rem to px converter
You don't need to memorize the formula. Here's the quick path from a rem value to its pixel equivalent.
- Type your rem value into the converter, for example 1.5.
- Set the root font size if it isn't 16px. Most sites leave it at 16, but if yours uses 18px or 20px, enter that.
- Read the pixel result. At a 16px root, 1.5rem returns 24px.
- Copy the number straight into your CSS, or flip to the reverse direction when you've got a pixel value you want back in rem.
If you're going the other way and starting from pixels, use the PX to REM converter instead. It shares the same tool and root setting, so your numbers stay consistent across both pages.
Frequently asked questions
How do you convert rem to px?
Multiply the rem value by the root font size. The formula's px = rem x root, where the root defaults to 16px. So 1.5rem is 24px, and 2rem is 32px at a 16px root.
What is 1rem in px?
1rem is 16px at the default root font size. If you change the root to 18px, then 1rem becomes 18px. rem's always relative to the page root, so it tracks whatever you set there.
What is 1.5rem in px?
1.5rem is 24px at a 16px root. Multiply the rem value by your root size to get the pixel value for any root. At an 18px root, 1.5rem works out to 27px.
What is 2rem in px?
2rem is 32px at a 16px root, because 2 x 16 is 32. If you've set a 20px root, then 2rem becomes 40px. The tool recalculates it whenever you change the root.
Does rem depend on DPI?
No, it doesn't. rem depends on the CSS root font size, not on screen DPI. DPI affects physical units like inches, while rem and px are screen-space CSS units that stay consistent across displays.
Last updated: June 14, 2026