Formula
rem = px / base font size
Quick Reference (Base Font Size (px): 16)
| REM | Pixels (px) |
|---|---|
| 8 | 128 |
| 10 | 160 |
| 12 | 192 |
| 14 | 224 |
| 16 | 256 |
| 18 | 288 |
| 20 | 320 |
| 24 | 384 |
| 28 | 448 |
| 32 | 512 |
| 36 | 576 |
| 40 | 640 |
| 48 | 768 |
| 56 | 896 |
| 64 | 1,024 |
Calculators
REM to PX Converter
To convert REM to pixels, multiply the rem value by the root font size (default 16px). 1rem = 16px. 2rem = 32px. 1.5rem = 24px. Change the base font size if your project uses a different root.
Convert REM to pixels with a custom base font size. Free REM to PX calculator with reverse conversion, formula examples, and CSS guidance.
REM to PX Converter
To convert REM to pixels, multiply the rem value by the root font size (default 16px). 1rem = 16px. 2rem = 32px. 1.5rem = 24px. Change the base font size if your project uses a different root.
Convert REM to pixels with a custom base font size. Free REM to PX calculator with reverse conversion, formula examples, and CSS guidance.
How REM resolves in CSS
REM means root em. Every REM value is calculated from the computed font size of the root html element, not from the parent component. In a default browser setup, that root size is 16px, so 1rem equals 16px and 2rem equals 32px.
Projects sometimes change the root size. A common legacy pattern is html { font-size: 62.5%; }, which makes 1rem equal 10px when the browser default remains 16px. That makes mental math easy, but it can surprise users who increase their default font size for accessibility. Check the computed html font size before converting.
Common REM to PX values
| REM | 16px root | 18px root | 20px root |
|---|---|---|---|
| 0.5rem | 8px | 9px | 10px |
| 0.875rem | 14px | 15.75px | 17.5px |
| 1rem | 16px | 18px | 20px |
| 1.5rem | 24px | 27px | 30px |
| 2rem | 32px | 36px | 40px |
When designers need the pixel value
REM is the right unit for scalable CSS, but pixels are still useful when communicating with designers, comparing browser output, or matching screenshots. A design token such as 1.25rem is clearer to an engineer; the equivalent 20px value is clearer in a Figma spec or bug report.
- Use REM for type size, spacing tokens, layout width, and component rhythm.
- Convert to PX when checking computed browser output or comparing screenshots.
- Keep root-size changes documented, because every REM value depends on it.
Accessibility note
REM respects the root font size, so it responds better to user preferences than hard-coded pixel typography. If a user increases default text size, REM-based type and spacing can scale together. That is usually better than forcing a fixed 14px or 16px size everywhere.
Practical Quality Notes for REM to PX Converter
This calculator is most helpful when the result is tied to a real workflow, not treated as a loose number. For REM to PX Converter, verify the CSS reference value, the component context, and the viewport or font-size setting used by the layout. That context prevents the common mistake of copying a pixel value into a print, web, or CSS workflow where the reference size is different.
REM to PX Converter depends on the root font size, commonly 16px unless the site changes html font-size. If the number looks unexpectedly large or small, check the unit direction first, then check the DPI, base font size, viewport width, or physical measurement that controls the calculation.
A good review pass for REM to PX Converter is simple: calculate once, compare against a known example, and preview the final output at the size people will actually see. To convert REM to pixels, multiply the rem value by the root font size (default 16px). 1rem = 16px. 2rem = 32px. 1.5rem = 24px. Change the base font size if your project uses a different root.
Checks Before You Use the Result
- Confirm that REM to PX Converter is using the same input unit your source file or design brief uses.
- Save the DPI, viewport, or font-size setting next to the final REM to PX Converter value so another person can reproduce it.
- Preview the REM to PX Converter output on the target medium before sending it to print, publishing it, or adding it to CSS.
- Recalculate REM to PX Converter after resizing, cropping, changing aspect ratio, or changing the root font-size or viewport assumption.
When the Number Needs a Second Look
Recheck the result if the project moves from screen to print, from desktop to mobile, from one social platform placement to another, or from a draft export to a production file. Small context changes can make a correct REM to PX Converter answer wrong for the final job.
Sources
Reference Sources
These external references support the page's conversion formulas, resolution guidance, and unit explanations.
w3.org
W3C: CSS Values and Units Module Level 4
Specification covering absolute lengths and resolution units such as px, in, cm, mm, pt, and dpi.
Visit source
developer.mozilla.org
MDN: CSS values and units
Reference guide for CSS measurement units and how browsers interpret physical and relative sizes.
Visit source
developer.mozilla.org
MDN: <resolution>
Reference for resolution units including dpi, dppx, and dpcm used in screen and print discussions.
Visit source
developer.mozilla.org
MDN: image-resolution
Explains how raster image resolution metadata interacts with CSS and print-oriented image workflows.
Visit source
Frequently Asked Questions
Multiply the rem value by the root font size (default 16px). Formula: px = rem x 16. Examples: 1rem = 16px, 1.5rem = 24px, 2rem = 32px, 0.5rem = 8px. If your CSS changes the root font-size (e.g., html { font-size: 10px }), use that value as the base instead.
Only when the root font-size is 16px, which is the default in every major browser. Many design systems redefine html font-size for easier math (e.g., font-size: 62.5% makes 1rem = 10px). Always check the computed root font-size in DevTools before assuming.
Use REM for typography, spacing, and layout sizes that should scale with user font preferences. Use PX for borders, shadows, and hairline elements where the exact pixel value matters. REM improves accessibility because it respects the user's browser font-size setting.
Yes, and that is why you tune it at the project root. If you set html { font-size: 10px } mid-project, every rem-based measurement on the page rescales. This is useful for simplifying math but requires caution when adopting a new design system.
REM is always relative to the ROOT (html) font size. EM is relative to the parent element's font size. REM gives global consistency; EM cascades through nested components. See our EM vs REM guide for a full comparison.