How do I convert px to rem quickly?

Divide pixels by your root font size. For example, 24px with a 16px root becomes 1.5rem.

Why is em different from rem?

rem is based on the root element font size, while em is relative to the current element's computed font size.

What root size should I use?

Most projects use 16px. If your CSS sets html { font-size: ... }, use that exact computed value for accurate conversions.

Can I use this converter for spacing and layout too?

Yes. The same conversions apply to margin, padding, gap, width, and most length-based CSS properties.

ADVERT

📐 CSS Unit Converter (PX, REM, EM)

Convert CSS units instantly between px, rem, and em with configurable root and context font sizes. Includes formula breakdowns, scale tables, and copy-ready CSS output.

CSS Unit Converter (px, rem, em)

Convert pixel values into scalable CSS units and back again. Use custom root and context font sizes for accurate rem and em calculations, then copy the converted value or ready to use CSS declaration.

Value

From

Root font size (for rem)

Context font size (for em)

Tip: rem uses the root font size, while em uses the current element's font size.

Conversion result

1rem

16px / 16px = 1rem

Assumptions: 1rem = 16px

font-size: 1rem;

Common px scale converted to rem and em

Quick reference using your current root/context settings.

px	rem	em
4px	0.25rem	0.25em
8px	0.5rem	0.5em
10px	0.625rem	0.625em
12px	0.75rem	0.75em
14px	0.875rem	0.875em
16px	1rem	1em
18px	1.125rem	1.125em
20px	1.25rem	1.25em
24px	1.5rem	1.5em
28px	1.75rem	1.75em
32px	2rem	2em
40px	2.5rem	2.5em
48px	3rem	3em
56px	3.5rem	3.5em
64px	4rem	4em

CSS spacing tokens from your root size

Generate a starter token block where values are normalized to rem.

:root {
  --size-4: 0.25rem;
  --size-8: 0.5rem;
  --size-12: 0.75rem;
  --size-16: 1rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-32: 2rem;
  --size-40: 2.5rem;
}

How to use this tool

Enter the CSS value you want to convert, then choose source and target units.
Set your root font size for rem and context font size for em to match your project.
Copy the converted value or generated CSS declaration and paste it into your stylesheet.

When to use each unit

Use px for pixel-perfect elements like borders or hairline rules.
Use rem for global spacing and typography that should scale from the root.
Use em for components whose spacing should scale with local text size.

Common developer workflows

Convert a fixed 16px design system into rem-based tokens for accessibility.
Translate Figma specs into em values for nested components and cards.
Audit legacy CSS by converting mixed units into a consistent sizing approach.

Implementation checks

Confirm your app root size (often 16px unless intentionally changed).
Validate component font-size inheritance before relying on em conversions.
Round to 3-4 decimals for production CSS to keep files readable.

FAQ

How do I convert px to rem quickly?: Divide pixels by your root font size. For example, 24px with a 16px root becomes 1.5rem.
Why is em different from rem?: rem is based on the root element font size, while em is relative to the current element's computed font size.
What root size should I use?: Most projects use 16px. If your CSS sets html { font-size: ... }, use that exact computed value for accurate conversions.
Can I use this converter for spacing and layout too?: Yes. The same conversions apply to margin, padding, gap, width, and most length-based CSS properties.

Resources