What is the difference between PX and REM?

Pixels (PX) are absolute measurements tied to physical display screen coordinates. REM (Root EM) is a relative sizing unit based on the font size of the root HTML element. By relative sizing, REM lets layouts scale automatically when users adjust system font settings.

What is the standard base root size?

The default browser base root font size is 16 pixels. Using 16px, 1rem equals 16px, 2rem equals 32px, and 0.5rem equals 8px.

PX to REM & REM to PX Converter

Translate CSS layout units from pixels to root ems and back. Visualize sizes instantly with a mock sizing block.

CSS Unit Converter

Base Font Size (px)

Pixels (PX)

⇄

Root Em (REM)

Visual Sizing Preview

32px

Standard Sizing Reference scale

Pixels	REM (16px base)	CSS Category

Frequently Asked Questions

Why prefer REM over pixels?

REM sizes scale relatively based on user font preferences. If a visually impaired user increases their default browser size, REM-based spacing adapts automatically, preventing layout breakages.

What is standard Tailwind sizing?

Tailwind uses REM units. Spacing tokens correspond to multiples of 4px. e.g. w-4 is 16px (1rem), w-8 is 32px (2rem), and w-12 is 48px (3rem).

How does base size affect REM calculations?

REM values are calculated using PX / Base Size. If your project root has a base font size of 10px (common configuration for easier math), then 16px becomes 1.6rem instead of 1rem.

Can I copy the values directly?

Yes, clicking any row in the standard scaling reference table will automatically fill the calculator inputs with that row's metrics, recalculating your visual block sizes.