Convert px to rem (and back)

rem scales with the reader’s root font size — converting px values makes layouts respect browser zoom and user settings.

Tools used in this guide

px ↔ rem converter
Unit converter
Box shadow generator

The job

A design spec says 24px padding; your stylesheet should say rem so the spacing grows when a reader raises their default font size. The conversion is one division — the important part is picking the right root size.

Root size is the whole question

Browsers default to 16px, so 24px is 1.5rem. If the project sets `html { font-size: 62.5% }` — a common trick making 1rem equal 10px — set the root to 10 before converting, or every result is off by 1.6×.

rem always refers to the root element, never the parent. If you need sizing relative to the component’s own font-size, that is em, a different unit.

Where px still makes sense

Hairline borders (1px), image-driven dimensions, and media query breakpoints are commonly kept in px. Convert spacing, typography, and component sizes; leave the rest alone.