REM to PX Converter

CSS rem units scale from the root element font size — typically the html element — not from each parent like em. One rem equals whatever pixel size the root is set to. Browsers default to 16 px root, so 1 rem = 16 px out of the box unless your stylesheet changes html { font-size }. rem respects user zoom and accessibility settings that enlarge default text; px stays absolute on the pixel grid.

Design handoffs from Figma and Sketch usually annotate px, while production codebases often author spacing and type in rem for consistency with design tokens. This converter bridges the gap at your project’s chosen root size. Many design systems keep 16 px root; some teams set 10 px root so mental math maps 1.6 rem ≈ 16 px — always match the value in your global CSS.

Toggle rem → px or px → rem with the segmented control. The value field label switches to show which unit you are entering. Root font size field sets the multiplier — if your html { font-size: 62.5% } trick is in play, that is 10 px effective root, not 16 px.

Worked example with the default rem → px fields: 1.5 rem at 16 px root. Multiply 1.5 × 16 = 24 px headline result. Summary reads “1.5 rem @ 16 px root” and the formula row shows 1.5 × 16. Flip to px → rem with 48 px entered and you get 3 rem (48 ÷ 16).

Common spacing scale entries: 0.25 rem = 4 px, 0.5 rem = 8 px, 1 rem = 16 px, 1.5 rem = 24 px, 2 rem = 32 px at default root. Typography steps often use 0.875 rem (14 px) for small UI copy and 1.125 rem (18 px) for large text that qualifies under WCAG large-text contrast thresholds.

Common mistakes include converting with 16 px root while production uses 10 px root (everything ships undersized), mixing rem padding with em line-height on nested components, and assuming browser default after the user changed OS accessibility text size — rem flows with that setting, px does not.

em units are intentionally out of scope — em compounds per nested parent font-size, so a single multiplier cannot represent all em chains. Use this tool for rem and px only.

Limits: single-value conversion — no calc() with mixed units, viewport vw, or clamp() breakpoints. Subpixel results may appear for odd roots; browsers round px at render time.