REM to PX Converter — Convert REM Units to Pixels

REM (root em) is a relative CSS unit that scales based on the root element’s font size — typically 16px in browsers. 1rem = 16px by default, so 1.5rem = 24px and 2rem = 32px.

Use the PX to REM Converter to convert between pixels and REM units with any base font size.

The REM to PX formula

px = rem × root_font_size

// Default root font size = 16px:
1rem   = 16px
1.5rem = 24px
2rem   = 32px
0.875rem = 14px
0.75rem  = 12px

To convert PX to REM:

rem = px ÷ root_font_size

14px ÷ 16 = 0.875rem
24px ÷ 16 = 1.5rem
32px ÷ 16 = 2rem

Why REM instead of pixels

User font size preferences: Browsers have a default font size setting (usually 16px) that users can change. If you use px for font sizes, user preferences are overridden. If you use rem, your typography scales proportionally when the user changes their base font size.

Accessibility: Users who need larger text (low vision, high-DPI displays) typically increase their browser’s default font size. Sites using pixels for typography don’t scale correctly for them. WCAG success criterion 1.4.4 requires text to be resizable to 200% without assistive technology — which rem enables and px often breaks.

Consistent scaling: Changing html { font-size: 18px; } scales everything defined in rem proportionally. This is useful for larger screens or responsive design without changing every individual value.

Component portability: A card component sized in rem will scale correctly when dropped into a context with a different base font size.

When pixels are appropriate

REM isn’t always the right choice:

• Borders: border: 1px solid #ccc — a 1px border should always be 1px. Using 0.0625rem is needlessly obscure and serves no practical purpose.
• Box shadows: Shadows defined in pixels don’t need to scale with text size.
• Media query breakpoints: These respond to viewport, not font size. Use px or em for media queries (not rem — rem in media queries responds to browser’s default, not your root font size).
• Fine-detail UI elements: 2px, 3px, 4px values for small decorative elements.

Common REM conversions

Based on the default 16px root:

Changing the base font size

Most modern CSS uses a 16px root or a 62.5% trick:

/* Default: 1rem = 16px */
html {
  font-size: 16px;
}

/* 62.5% trick: makes 1rem = 10px for easier mental math */
html {
  font-size: 62.5%;  /* 62.5% of 16px = 10px */
}
/* Now: 1.6rem = 16px, 1.4rem = 14px, 2.4rem = 24px */

The 62.5% trick was popular when mental conversion was done manually. With CSS custom properties and calc(), it’s less necessary:

/* More modern approach: use CSS custom properties */
:root {
  --font-size-base: 1rem;     /* 16px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2rem;      /* 32px */
}

body { font-size: var(--font-size-base); }
h1   { font-size: var(--font-size-2xl); }

EM vs REM

Both em and rem are relative units, but they compound differently:

/* em: relative to PARENT element's font size */
.parent {
  font-size: 18px;
}
.parent .child {
  font-size: 1.5em;  /* 1.5 × 18px = 27px */
}
.parent .child .grandchild {
  font-size: 1.5em;  /* 1.5 × 27px = 40.5px — compounding! */
}

/* rem: relative to ROOT element's font size — no compounding */
.parent .child .grandchild {
  font-size: 1.5rem;  /* 1.5 × 16px = 24px — always predictable */
}

Use rem for font sizes (predictable, no compounding). Use em for spacing and sizing that should scale relative to the component’s own font size (padding, margin, line-height within a component).

REM in design systems

Design systems define spacing scales in multiples of the base unit:

/* 4px grid system (common in Material Design, Tailwind): */
:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
}

Tailwind CSS uses exactly this pattern — all spacing is in rem units based on a 4px grid.

Related tools

• PX to REM Converter — convert between pixels and REM
• PX to REM Explained — why relative units matter
• CSS Flexbox Guide — layout sizing with relative units