PX to REM: A Simple CSS Conversion Guide

Sizing in CSS with rem instead of pxmakes your layout scale with the user's font settings — better for accessibility and responsive design. The conversion is one simple division.

The formula

rem = px ÷ root font size. The root font size defaults to 16px, so:

• 24px ÷ 16 = 1.5rem
• 32px ÷ 16 = 2rem
• To go back: rem × 16 = px.

Skip the mental math with the PX to REM Converter — set your root size and convert both ways instantly.

rem vs. em — what's the difference?

• rem is relative to the root (the html element), so it's predictable everywhere.
• em is relative to the parent element's font size, so it compounds when elements are nested.

For most spacing and font sizes, rem is the safer default; reach for em when you want a value to scale with its local context.

Why use rem at all?

If a user increases their browser's default font size (for readability), rem-based layouts grow with it, while fixed pxvalues don't. That makes rem the accessible, user-respecting choice for typography and spacing.

FAQ

What is 1rem in px?

1rem equals your root font size — 16px by default, so 1rem = 16px unless you've changed the html font-size.

Should I use px anywhere?

Yes — px is fine for borders, hairlines, and anything that shouldn't scale with font size. Use rem for type and spacing.