PX ↔ Rem Calculator

Calculate between PX (pixel) values and Rem units bidirectionally in real-time.

Conversion Settings

The default font size is usually 16px
Decimal Places
Enter the pixel value you want to convert
Converted Rem value
Enter the rem value you want to convert
Converted pixel value

Common Conversions

PX-based

PX ValueRem Value
8px
0.5rem
12px
0.8rem
14px
0.9rem
16px
1.0rem
18px
1.1rem
20px
1.3rem
24px
1.5rem
28px
1.8rem
32px
2.0rem
36px
2.3rem
40px
2.5rem
48px
3.0rem
56px
3.5rem
64px
4.0rem
72px
4.5rem
80px
5.0rem
96px
6.0rem

Rem-based

Rem ValuePX Value
0.3rem
4px
0.5rem
8px
0.8rem
12px
1.0rem
16px
1.1rem
18px
1.3rem
20px
1.5rem
24px
1.8rem
28px
2.0rem
32px
2.3rem
36px
2.5rem
40px
3.0rem
48px
3.5rem
56px
4.0rem
64px
5.0rem
80px
6.0rem
96px
8.0rem
128px

What is the PX ↔ Rem calculator?

A small utility that calculates PX (pixels) and Rem (root em) values in both directions in real time. Calculate fixed pixel values to Rem for responsive design, or calculate Rem back to pixels for implementation checks.

Key features

  • Instant bidirectional calculation (PX ↔ Rem)
  • Adjustable base font size (default: 16px)
  • Toggle display precision (0–2 decimal places)
  • Preset tables for common values with one-click copy

Quick start (3 steps)

  1. Confirm or set the base font size (usually 16px).
  2. Enter the PX or Rem value to calculate — results appear instantly.
  3. Click copy to paste the value into your code.

When to use this tool

  • Calculating a design to Rem-based values
  • Adopting relative units for accessibility
  • Verifying spacing and scale in a design system

Formula and examples

Basic formulas:

rem = px ÷ base font size (px)
px = rem × base font size (px)

Example (base 16px):

  • 8px → 0.5rem
  • 16px → 1rem
  • 24px → 1.5rem
  • 32px → 2rem
/* Calculation example */
rem = px / 16
px  = rem * 16
24px -> 24 / 16 = 1.5rem
1.5rem -> 1.5 * 16 = 24px

Common presets (excerpt)

  • PX: 8, 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96
  • Rem (base 16px): 0.25, 0.5, 0.75, 1, 1.125, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 3, 3.5, 4, 5, 6, 8

Recommended settings (practical)

  • Base font size: 8–128px (recommended 16px)
  • PX range: 0–999 (sufficient for most UI cases)
  • Rem range: 0–64 (expandable if needed)
  • Display precision: 0–2 (0 or 1 is typical)
  • Spinner step: PX = 0.5, Rem = 0.1 (direct input allowed)

FAQ

Q: Why use 0.5 for PX step?
A: Integer PX is common, but half-pixel adjustments help with borders and fine-tuning. 0.1 often makes negligible visual difference and can complicate input.

Q: Is two-decimal precision necessary?
A: It can be helpful for high-density displays or precise systems, but most cases are fine with 0–1 decimals.