REM to PX Converter
Convert rem values back to pixels. Adjust the root font size to match your project's configuration.
REM to PX Conversion Table
Complete reference: rem 1–100 converted to pixels.
| rem | px |
|---|
How to Convert REM to PX
Converting rem to pixels requires multiplying by the root font size:
px = rem × base-font-sizeWith the standard browser default of 16px, converting 1.5rem to pixels means 1.5 × 16 = 24px. For 2rem, that's 2 × 16 = 32px. The math is simple multiplication, but it helps to have a reference table handy, especially for less common values like 0.875rem (14px) or 1.125rem (18px).
If your project overrides the root font size — whether to 10px using the 62.5% trick, or to 18px for larger base text — enter that value in the settings above and the converter will adjust all calculations accordingly.
When to Convert REM Back to Pixels
There are several common scenarios where you need to know the pixel equivalent of a rem value:
- Design handoff: Designers typically work in pixels in Figma or Sketch. When implementing their specs, you'll write rem but need to verify the pixel output matches the design.
- Debugging: Browser DevTools often show computed values in pixels. Knowing that your 1.25rem heading computes to 20px helps verify CSS is working correctly.
- Third-party integrations: Some JavaScript libraries, canvas operations, and APIs expect pixel values. Converting your rem-based design tokens to pixels is necessary for interop.
- Print stylesheets: Print CSS often benefits from pixel or point-based sizing for precise physical output.
Remember: the pixel value of a rem unit depends entirely on the root font-size. If a user has changed their browser's default font size from 16px to 20px, then 1rem = 20px in their browser, even if your CSS doesn't explicitly set a root font-size.
Common REM to PX Values
At the default 16px base, here are the most frequently used conversions:
0.25rem= 4px — fine spacing, thin borders0.5rem= 8px — small gaps, compact padding0.75rem= 12px — small text, tight spacing1rem= 16px — body text, standard spacing1.5rem= 24px — headings, section padding2rem= 32px — large headings, generous spacing3rem= 48px — hero elements, major sections
Frequently Asked Questions
How many pixels is 1rem?
At the default browser font size, 1rem equals 16 pixels. This can change if the root font-size is overridden in CSS or if the user has modified their browser's default font size setting.
Why do browsers use 16px as the default font size?
The 16px default was established in the early days of the web and standardized across browsers. It was chosen as a readable size for body text on screen, roughly equivalent to 12pt in print.
How do I find the root font-size of a website?
Open your browser's DevTools (F12), select the html element, and look at the computed font-size. This is the value that 1rem equals on that page.
Can rem values be negative?
Yes, rem values can be negative when used for properties that accept negative values, like margins or transforms. For example, margin-top: -1rem would move an element up by 16px (at the default base).