Toolbench
Tools Calculators

CSS px ↔ rem converter

Convert pixels and rems with your root font-size. Two-way, live preview, common scale. Nothing is uploaded.

Converter

Preview at converted size (uses rem on this box)

The quick brown fox jumps over the lazy dog. 0123456789

Common scale (click a row)

pxremtypical use

Ready

How it works

rem is relative to the root element’s font-size (usually html). With a 16px root, 1rem = 16px, so px ÷ root = rem and rem × root = px.

Browsers default the root to 16px unless the user zooms or you set html { font-size: … }. A “10px root” trick (html { font-size: 62.5% } → 10px when the default is 16) makes mental math easier (1.4rem ≈ 14px) but can fight user font settings if you lock px on html.

em is different: it uses the element’s own (or inherited) font-size, so the same number changes by context. This page converts px ↔ rem against the root you set, not nested em chains.

Examples

/* root 16px (browser default) */
html { font-size: 100%; }   /* 16px if user default is 16 */
.pad  { padding: 1.5rem; }  /* 24px */
.h1   { font-size: 2rem; }  /* 32px */

/* 62.5% root → 10px when default is 16 */
html { font-size: 62.5%; }
body { font-size: 1.6rem; } /* 16px */
.m   { margin: 2.4rem; }    /* 24px */

/* fluid-ish type still often mixed with rem */
clamp(1rem, 2vw + 0.5rem, 1.5rem)

FAQ

px vs rem — which should I use? Prefer rem for type, spacing, and breakpoints that should scale with the user’s root font. Use px for hairline borders, shadows, and rare fixed chrome.

Is the root always 16px? Not guaranteed. Users change default size; some frameworks set 62.5% or 18px. Set the base field to match your stylesheet’s html size.

rem vs em? rem → root. em → current element. Padding 1em grows if you bump that element’s font-size; 1rem does not.

What about 1.125 and rounding? CSS allows fractional px/rem. This tool rounds display to 4 decimal places for rem and 2 for px; paste into CSS as you like.

Does this change my site? No. It only computes numbers and a local preview. Nothing is sent to a server.

Media queries in rem? In modern browsers, rem in @media is usually based on the initial root (browser default), not your later html { font-size }. Check the spec behavior you target before relying on it.

Related tools