How to convert rem to px
- Type a rem value in the Rem box. The pixel size appears below as you type, with the multiplication behind it.
- Set Root font size to the font size of your page’s html element. Leave it at 16 if your stylesheet does not change it.
- For several values, paste one per line into the Batch box and read the pixel sizes in the Batch result box.
- Click Copy to copy a result, or Download .txt to save the batch output.
Why use this tool
Checking a stylesheet against the design
The CSS says 1.125rem and the mockup says 18px. Convert the rem values to see whether they match, without opening the browser’s developer tools for every element.
Rebuilding a page in a design tool
Figma, Sketch and Penpot work in pixels. Turn a site’s rem-based type scale and spacing into pixel values to recreate a page or a component library there.
Reading a framework’s spacing scale
Utility frameworks and design systems often publish their sizes in rem, such as 0.25rem steps. Paste the scale into the Batch box to see every step in pixels at once.
Seeing what a root change does
Thinking of moving the root from 16px to 18px or 10px? Change Root font size and watch every value update, or compare the 16px, 10px and 20px columns in the table below.
Private by design
Every calculation runs in this browser tab, so results update the moment you change a value. There is nothing to upload, no account to create and nothing to install.
Good to know
The formula. px = rem × root font size. At the default root of 16px, 1.5rem × 16 = 24px. The root font size is the font-size of the html element, 16px in every major browser unless the reader or your stylesheet changes it.
What you can type. 1.5, 1.5rem, .75, 0,875 (decimal comma) and negative values all work. A comma is read as a decimal point, so 1,000 means 1, not a thousand. A value that ends in px is already in pixels, so it is flagged rather than multiplied. Results keep at most four decimals, with trailing zeros removed.
Fractional pixels are normal. 0.875rem at a 10px root is 8.75px. Browsers lay out text and boxes at fractional sizes and round only when drawing, so a result like this is not a mistake in your CSS.
Batch mode. One value per line; blank lines are skipped. Each line that cannot be converted becomes a CSS comment such as /* 3px: Already in px */, so failures are easy to spot.
Sharing a root font size. A root font size other than 16 is added to the address, for example ?base=20, and the link to the px to rem converter keeps it. The values you type are never put in the address.
Why the result may differ in the browser. If the reader has raised their browser’s default font size, the root is no longer 16px and every rem grows with it. That is the point of rem: the pixel sizes here are what the page uses at the root size you enter.
In — Batch, root font size 16px
0.875
1.25rem
2.5
3pxOut — Pixel values, one per line
14px
20px
40px
/* 3px: Already in px */| rem | 16px root | 10px root | 20px root |
|---|---|---|---|
| 0.125rem | 2px | 1.25px | 2.5px |
| 0.25rem | 4px | 2.5px | 5px |
| 0.375rem | 6px | 3.75px | 7.5px |
| 0.5rem | 8px | 5px | 10px |
| 0.625rem | 10px | 6.25px | 12.5px |
| 0.75rem | 12px | 7.5px | 15px |
| 0.875rem | 14px | 8.75px | 17.5px |
| 1rem | 16px | 10px | 20px |
| 1.125rem | 18px | 11.25px | 22.5px |
| 1.25rem | 20px | 12.5px | 25px |
| 1.375rem | 22px | 13.75px | 27.5px |
| 1.5rem | 24px | 15px | 30px |
| 1.75rem | 28px | 17.5px | 35px |
| 2rem | 32px | 20px | 40px |
| 2.25rem | 36px | 22.5px | 45px |
| 2.5rem | 40px | 25px | 50px |
| 3rem | 48px | 30px | 60px |
| 3.5rem | 56px | 35px | 70px |
| 4rem | 64px | 40px | 80px |
Frequently asked questions
How many pixels is 1rem?
1rem equals the root font size, which is 16px by default in every major browser. If the page sets html { font-size: 62.5% }, 1rem is 10px; if the reader has raised their default font size, 1rem is larger.
How do I convert rem to px?
Multiply the rem value by the root font size. At 16px, 2.5rem × 16 = 40px and 0.875rem × 16 = 14px. Enter another root size in the converter if your stylesheet changes it.
How do I find my page’s root font size?
Open your browser’s developer tools, select the html element and read font-size in the Computed tab. That number is what 1rem equals on the page, and it is the value to put in Root font size.
Can a rem value give a fraction of a pixel?
Yes. 0.875rem at a 10px root is 8.75px, and 0.125rem at 10px is 1.25px. Browsers handle fractional sizes and round when they draw. If you need whole pixels, pick rem values that are multiples of 1 ÷ root size, such as 0.0625rem at 16px.