What is a REM to PX converter and why use it?
A rem to px converter shows how large a rem value renders in pixels. Because rem is relative to the root font size, the same 1.5rem can be 24px or 15px depending on your base.
It helps when you need to match a rem-based stylesheet to a pixel-based design spec, debug spacing that looks off, or explain sizes to teammates who think in pixels.
How to use this tool
Enter the rem value
Type the rem size, such as 1.25.
Check the base font size
The default is 16px. Change it to match your html font-size.
Copy the pixel value
Press Copy px value to copy the result.
How REM to PX is calculated
Multiply the rem value by the root font size in pixels. At 16px, 1.5rem is 1.5 × 16 = 24px.
Browsers let users raise or lower their default font size, so a rem-based layout can render larger than your calculation on their device. That is a feature, not a bug.
px = rem × root font size| REM | Pixels (16px base) |
|---|---|
| 0.5rem | 8px |
| 0.75rem | 12px |
| 1rem | 16px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 2rem | 32px |
| 2.5rem | 40px |
| 3rem | 48px |
| 4rem | 64px |
FAQ
How do I convert rem to px?
Multiply the rem value by the root font size. At 16px, 2.5rem × 16 = 40px.
How many pixels is 1rem?
1rem is 16px by default, or whatever font-size is set on the html element.
Why is my rem value not the pixel size I expect?
Check the html font-size. If it is set to 62.5%, 1rem is 10px, and if a user changed their browser font size it will differ again.