No. It equals the computed root font-size. If your project or browser settings change the root size, 1rem changes too.

What is the formula for PX to REM?

Use rem = px ÷ root font-size. Example: 24px ÷ 16px = 1.5rem.

Why use REM instead of PX?

REM scales with user accessibility preferences and zoom behavior, which makes typography and spacing more adaptable.

Should I use REM or EM?

Use REM for global scales and design tokens, and EM for component-local sizing that should follow parent font-size.

How do I set a custom root font-size?

Set `html { font-size: ... }` in CSS. The converter lets you match that value directly.

Converter · CSS unit tool

PX to REM converter

REM is relative to the root element (`html`). With a root font-size of R pixels, rem = px ÷ R. At the browser default of 16px, 24px becomes 1.5rem. UnitCraft runs entirely in your browser—nothing is uploaded.

Pixels to convert

Enter the pixel value first.

Calculation base

Root font size

Usually html { font-size }

Result

1.5000 rem

24px ÷ 16px = 1.5000rem

CSS snippet

css

font-size: 1.5000rem;

Keyboard tip: press Tab or Shift+Tab to switch fields.

The PX to REM formula

The conversion is a single division: rem = px ÷ rootFontSize. The root font-size is whatever value `html { font-size }` resolves to in the live browser, which defaults to 16px but can be changed by your CSS or by the visitor's accessibility settings.

Worked example at a 16px root: 8px → 0.5rem, 12px → 0.75rem, 16px → 1rem, 24px → 1.5rem, 32px → 2rem, 40px → 2.5rem. Because the math is linear, doubling the pixel value doubles the rem value.

Why convert PX to REM

Design systems encode spacing and type in REM so the whole interface scales together when a user changes their default font-size or zooms. A layout built in pixels ignores that preference and can break accessibility expectations.

Teams usually baseline the root at 16px, but always confirm your real `:root { font-size }` in production—some resets use 62.5% (10px) so that 1rem maps cleanly to 10px, which changes every conversion.

Common mistakes

Assuming 1rem is always 16px. It equals the *computed* root size, so a `62.5%` reset or a theme that bumps `html` font-size silently shifts every value.

Over-rounding. Keep three or four decimals in tokens (e.g. 0.875rem for 14px) rather than rounding to 0.9rem, which drifts by roughly a pixel and compounds across a spacing scale.

Copy-ready examples

Body text at 16px root

css

/* 24px → 1.5rem */
h2 { font-size: 1.5rem; }

Spacing token

css

:root { --space-4: 1rem; }   /* 16px */
.card { padding: var(--space-4); }

Frequently asked questions

Is 1rem always 16px?: No. It equals the computed root font-size. If your project or browser settings change the root size, 1rem changes too.
What is the formula for PX to REM?: Use rem = px ÷ root font-size. Example: 24px ÷ 16px = 1.5rem.
Why use REM instead of PX?: REM scales with user accessibility preferences and zoom behavior, which makes typography and spacing more adaptable.
Should I use REM or EM?: Use REM for global scales and design tokens, and EM for component-local sizing that should follow parent font-size.
How do I set a custom root font-size?: Set `html { font-size: ... }` in CSS. The converter lets you match that value directly.