REM to PX Converter

How rem values become pixels

Browsers never render rem directly. During style computation every rem length is multiplied by the root element’s computed font size and turned into a pixel value — the "computed value" you see in DevTools. The formula is px = rem × root font size, so 2.25rem on a 16px root is 36px.

The root size is not always 16px. It depends on three things: the browser’s default font size (16px in Chrome, Firefox, Safari and Edge), the user’s own font size setting, and any font-size you put on html. A user who chooses "Large" in Chrome gets a 20px default, so 1.5rem renders at 30px for them — exactly the scaling rem is designed to provide.

This converter answers the practical question "how big will this actually be?" for any root size. It is useful when checking a design system’s spacing scale against a pixel mockup, debugging a layout in DevTools, or translating rem-based framework utilities back into the pixels your designer speaks.

How to use the REM to PX Converter

1. Enter the root font size your page uses — 16px unless html has a different font-size.
2. Type a rem value such as 1.75 and read the pixel size immediately. Several values like 0.5 1 1.5 convert together, which is handy for padding or margin shorthands.
3. Switch the root size to see how the same rem value renders for users who enlarge their default font (try 20px).
4. To turn a whole stylesheet into pixels — for an email template or a legacy environment — paste it into Bulk convert CSS and copy the output.

Example

A rem-based spacing scale and what it computes to with the default 16px root and with a user who set 20px:

/* rem      16px root   20px root */
0.25rem   →   4px        5px
0.5rem    →   8px       10px
1rem      →  16px       20px
1.5rem    →  24px       30px
2rem      →  32px       40px
3rem      →  48px       60px

Checking computed sizes in DevTools

• Open DevTools, select the element and switch to the Computed tab: font-size, padding and friends are listed in pixels after rem has been resolved.
• Run getComputedStyle(document.documentElement).fontSize in the console to see the real root size, including the user’s browser setting.
• Browser zoom (Ctrl/Cmd +) does not change the computed root size; it scales the whole page. Only the default font size setting and your CSS change what 1rem means.

When you need pixels instead of rem

HTML email clients have patchy rem support, canvas drawing APIs take pixel numbers, and some JavaScript measurements (such as IntersectionObserver root margins) only accept px. In those cases convert with the real root size. For new CSS, go the other way with the PX to REM Converter.