Pixel360REM to PX formula
px = rem × root font size
A rem is one multiple of the root font size, which is the font-size of the <html> element. When a stylesheet doesn't set it, browsers use 16px, so converting rem to px means multiplying by 16. If the root is set to 62.5% (10px), multiply by 10 instead. This is the reverse of the px to rem converter.
Worked examples
- 0.875rem, 16px root: 0.875 × 16 = 14px
- 2.25rem heading, 16px root: 2.25 × 16 = 36px
- 1.5rem with a 62.5% (10px) root: 1.5 × 10 = 15px
- 1.2rem with an 18px root: 1.2 × 18 = 21.6px
REM to PX conversion table (16px root)
Common rem values from spacing scales and type scales, converted with the default 16px root font size.
| REM | Pixels | REM | Pixels |
|---|---|---|---|
| 0.125rem | 2px | 1.75rem | 28px |
| 0.25rem | 4px | 2rem | 32px |
| 0.5rem | 8px | 2.25rem | 36px |
| 0.625rem | 10px | 2.5rem | 40px |
| 0.75rem | 12px | 3rem | 48px |
| 0.875rem | 14px | 3.5rem | 56px |
| 1rem | 16px | 4rem | 64px |
| 1.125rem | 18px | 5rem | 80px |
| 1.25rem | 20px | 6rem | 96px |
| 1.5rem | 24px | 8rem | 128px |
When you need to convert rem to px
Most of the time you write rem and let the browser do the work. Converting back to pixels is useful when you need to compare code against a design file, since tools like Figma measure in px. It also helps when you audit a stylesheet you inherited and want to know what 1.375rem actually looks like, or when you check that a tap target or icon meets a minimum pixel size.
It matters for layout maths too. If a container is 40rem wide, you need to know that's 640px at the default root before you decide where a breakpoint should go or how many columns fit.
Converting a whole type scale
Type scales are often defined as rem multiples, which makes their pixel sizes hard to picture. A scale with a 1.25 ratio starting at 1rem converts like this at a 16px root:
- 1rem = 16px (body)
- 1.25rem = 20px
- 1.5625rem = 25px
- 1.9531rem = 31.25px
- 2.4414rem = 39.06px
Seeing the pixel values makes it easier to decide whether the largest step is too big for mobile. If it is, you can keep the small sizes fixed and let the headings scale with the screen using the CSS clamp() generator.
Remember that the result depends on the user
The pixel value you calculate is the size at a given root font size, not a fixed size. If a reader sets their browser default to 20px, your 1.5rem becomes 30px on their screen. That's the point of rem: it lets type and spacing follow the reader's preference. MDN's CSS length reference covers exactly how rem is resolved.
Common mistakes
- Assuming 16px everywhere. Check the html element first. A
62.5%or125%root changes every result. - Mixing up rem and em. Em is relative to the parent element's font size, not the root, so the same em value can be different sizes in different places. Use the px to em converter for those.
- Rounding too early. Keep the decimals in your CSS. 0.9375rem is exactly 15px at a 16px root, and rounding it to 0.94rem gives 15.04px.
Frequently asked questions
How many pixels is 2rem?
2rem is 32px with the default 16px root font size. If your root is 10px (html { font-size: 62.5% }), 2rem is 20px. Multiply 2 by whatever the root font size is.
How do I find the root font size of a website?
Open your browser developer tools, select the html element and look at its computed font-size. If nothing in the stylesheet sets it, it is the browser default, which is 16px unless the user has changed it.
Is 1rem always 16px?
No. 16px is only the browser default. A stylesheet can change the root font size, and users can raise or lower their default font size in browser settings. When they do, every rem value changes with it.
Why does my rem value render at a different pixel size than I expected?
Usually the root font size is not 16px. Check for a font-size on the html element, including percentage values like 62.5% or 125%, and check whether a media query changes it at certain screen widths.
Can rem values produce fractional pixels?
Yes. 0.9375rem at a 16px root is 15px, but 1.1rem is 17.6px. Browsers handle fractional sizes fine, though very thin lines can look blurry, which is one reason borders are often kept in px.