px to rem — CSS Unit Conversion Explained

px to rem conversion is fundamental for accessible, responsive CSS. Here's how rem works, why it matters for accessibility, and how to convert pixel values correctly.

Mian Ali Khalid · 2026-05-11 · 6 min read

Use the tool

Pixel to REM Converter

Convert px to rem, em, and percent — and vice versa. Configurable root font size. Bulk conversion mode for entire stylesheets.

Open Pixel to REM Converter →

px and rem are both CSS length units. The difference is that px is absolute (always the same size) and rem is relative to the root element’s font size. That relativity is what makes rem essential for accessible, user-scalable interfaces.

Use the px to rem Converter to convert any pixel value to rem instantly, using any base font size.

What is a rem?

rem stands for root em. It’s a multiplier of the root element’s (<html>) font size:

html { font-size: 16px; }

/* 1rem = 16px */
.element {
  font-size: 1rem;    /* 16px */
  margin: 2rem;       /* 32px */
  padding: 0.5rem;    /* 8px */
}

The formula:

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

With the default browser base font size of 16px:

px	rem
8px	0.5rem
12px	0.75rem
14px	0.875rem
16px	1rem
18px	1.125rem
20px	1.25rem
24px	1.5rem
32px	2rem
48px	3rem
64px	4rem

The px to rem Converter handles any base font size — change the base and all conversions update instantly.

Why use rem instead of px

User font size preferences (the main reason)

Browser users can set a preferred base font size in their browser preferences. Chrome’s default is 16px, but a user can change it to 20px for easier reading.

With px font sizes: the user’s preference is ignored. Your text stays at 16px regardless.
With rem font sizes: the user’s preference is honored. Your 1rem text scales to 20px when the user sets their preference to 20px.

This matters for accessibility. WCAG 2.1 Success Criterion 1.4.4 (Resize text) requires that text can be resized up to 200% without loss of content or functionality. Using px for font sizes breaks this.

Zoom behavior

Modern browsers implement page zoom differently from the old text-only zoom:

Browser zoom (Ctrl+/Cmd+): scales the entire page including px values — this works regardless of unit
Text size settings (in browser preferences): only affects rem, em — not px

For WCAG compliance, you need to support both. Using rem for font sizes and spacing ensures both zoom mechanisms work.

Consistent scaling

With rem, you can scale your entire UI by changing a single value — the root font size. This is useful for:

Theming (large-text mode vs compact mode)
Responsive type scale
Component libraries where spacing should scale with font size

/* Compact mode */
html { font-size: 14px; }

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

/* Large mode */
html { font-size: 18px; }

/* Everything in rem scales proportionally */

rem vs em vs px

px (pixels)

Absolute unit. 1px = 1 device-independent pixel (at 1× density).

Use px for:

Borders: border: 1px solid
Shadows: box-shadow: 0 2px 4px
Small precise measurements: outline-offset: 2px
Anything that should NOT scale with font size

Avoid px for:

Font sizes
Most spacing (padding, margin, gap)
Media query breakpoints

em

Relative to the parent element’s font size (not the root). This creates compounding:

.parent { font-size: 1.5em; }   /* 24px if root is 16px */
.child  { font-size: 1.5em; }   /* 36px — 1.5× parent's 24px */

em compounds with each nesting level. This makes it useful for some specific cases (components that should scale relative to their context font size) but dangerous for general spacing.

Use em for:

media-query? (actually, still prefer rem for consistency)
Spacing within a component that should scale proportionally to the component’s font size
Line heights and letter spacing that should be proportional to font size

Avoid em for:

Font sizes (use rem instead — no compounding)
Global layout spacing

rem

Relative to root. No compounding.

Use rem for:

Font sizes (primary use case)
Spacing (margin, padding, gap) — especially for layout-level spacing
Component dimensions that should scale with user preferences
Breakpoints (debated — some teams use px for breakpoints)

The 62.5% trick

One common pattern to make rem mental math easier:

html { font-size: 62.5%; }  /* 62.5% × 16px = 10px */

/* Now 1rem = 10px */
.element {
  font-size: 1.6rem;  /* 16px */
  margin: 2.4rem;     /* 24px */
  padding: 0.8rem;    /* 8px */
}

With a 10px root, the rem value is always px value ÷ 10. Mental math becomes trivial: 24px = 2.4rem.

The catch: any third-party component or browser default that uses em for font sizing now computes relative to 10px instead of 16px. If a browser default is font-size: 1em (meaning “use browser default”), that becomes 10px instead of 16px. You need to reset font-size: 1.6rem at the body level to restore the 16px base for all content.

html { font-size: 62.5%; }
body { font-size: 1.6rem; } /* Restore 16px for content */

Many experienced developers avoid this pattern for this reason and use the px to rem Converter instead to avoid mental math.

Setting up a rem-based design system

Base font size

:root {
  font-size: 16px;  /* or 100% (inherits browser preference) */
}

Using 100% instead of 16px lets the user’s browser preference flow through:

:root { font-size: 100%; }  /* Inherits user's browser setting */

This is the most accessible approach — your font size base reflects the user’s actual preference.

Type scale

A modular type scale multiplies by a consistent ratio. Common ratio: 1.25 (Major Third) or 1.333 (Perfect Fourth).

:root {
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
}

This mirrors Tailwind CSS’s type scale, which is calibrated for this default base size.

Spacing scale

: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-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
}

Fluid typography with clamp() and rem

Modern CSS allows font sizes that scale fluidly between viewport sizes:

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* min: 24px, preferred: 4% of viewport, max: 48px */
}

The clamp() function takes a minimum, preferred, and maximum value. The preferred value uses viewport units (vw) for fluid scaling. The minimum and maximum use rem for user-preference-aware bounds.

This is the modern replacement for:

/* Old approach: multiple media queries */
h1 { font-size: 1.5rem; }
@media (min-width: 768px) { h1 { font-size: 2rem; } }
@media (min-width: 1024px) { h1 { font-size: 3rem; } }

Converting px to rem: practical reference

Given base font size = 16px:

px ÷ 16 = rem

For quick conversions:

px	rem	px	rem
1	0.0625	20	1.25
2	0.125	24	1.5
4	0.25	28	1.75
8	0.5	32	2
10	0.625	40	2.5
12	0.75	48	3
14	0.875	64	4
16	1	80	5
18	1.125	96	6

The px to rem Converter lets you set any base font size and converts in both directions.

px to rem Converter — convert pixel values to rem and em
CSS Grid Generator — build responsive grid layouts
Box Shadow Generator — generate CSS box-shadow values

Fluid Typography with CSS clamp() — Scale Fonts Without Media Queries — CSS clamp() creates fluid typography that scales smoothly between minimum and ma…
CSS Units Guide — px, em, rem, vw, vh, and When to Use Each — CSS has absolute units (px), relative to font-size (em, rem), viewport units (vw…
CSS Design Tokens — Define Spacing, Colors, and Typography with Custom Properties — CSS design tokens store reusable values as custom properties (CSS variables). Le…

Related tool