REM to PX Converter (and PX to REM)

The conversion, both ways

rem = px ÷ root font size. px = rem × root font size. The root font size is the computed font-size of the html element, which is 16px in Chrome, Firefox, Safari, and Edge unless the site or the user changes it.

Type in either the Pixels or REM field and the other updates. Change the root size and the rem value recalculates from your pixel value, which is the usual question when a project uses a non-standard root. The chart below the fields lists common sizes, and marks the ones that match Tailwind's text-xs through text-5xl scale.

Worked examples

A designer hands you a Figma file with 14px body text, 20px paragraph spacing, and a 40px heading. At the default 16px root: 14 ÷ 16 = 0.875rem, 20 ÷ 16 = 1.25rem, and 40 ÷ 16 = 2.5rem.

Same file on a project that uses html { font-size: 62.5%; }, a 10px root: 1.4rem, 2rem, and 4rem. Easier mental math, but every value in the codebase depends on that one line. Delete it during a refactor and everything shrinks or grows by 60 percent at once.

Going the other way, a component library ships a 0.625rem gap. At a 16px root that is 10px. At a 10px root it is 6.25px, which renders blurry on some screens. Awkward sub-pixel values are a sign the library assumed a different root than yours.

Why rem is the accessible default

Browsers let people set a larger default font size, and many people with low vision do exactly that. A user who sets their browser to Large (typically 20px) expects text to grow. Font sizes in rem grow with that setting. Font sizes in px ignore it. Page zoom still works on px layouts, but the font preference does not.

WCAG 2.2 success criterion 1.4.4 requires that text can be resized up to 200 percent without losing content or functionality. Rem-based type and spacing make that straightforward, because the whole layout scales in proportion. In the US, federal sites must meet WCAG under Section 508, and a 2024 Justice Department rule under ADA Title II requires WCAG 2.1 AA for state and local government sites, so this is not just a nicety.

rem, em, px: when to use each

Use rem for font sizes, spacing, and layout widths that should scale with the user's text preference. Use em for things that should scale with the local font size, such as padding on a button that comes in small, medium, and large variants, or an icon sized to sit inside a line of text.

Use px for things that should not scale: hairline borders (1px), box shadows, and outline offsets. A 0.0625rem border becomes 1.25px when the root is 20px, which blurs. Media queries are a special case: in em or rem, they are based on the browser's default font size, not your html rule, which is why many teams write breakpoints like 48em (768px at the default).

Common mistakes

Setting html { font-size: 16px; } in pixels. It overrides the user's browser preference, which defeats the point of rem. If you need to set it, use a percentage like 100%.

Mixing em and rem without meaning to. An em-based font size inside another em-based element compounds: 1.2em inside 1.2em is 1.44 times the root. If text grows unexpectedly deep in a component tree, look for em.

Rounding too hard. 13px is 0.8125rem. Rounding it to 0.8rem gives 12.8px, a visible difference in dense tables. Keep four decimal places; the converter does.

Forgetting that design tools work in pixels. Figma, Sketch, and Adobe XD all show sizes in px, so every handoff involves conversion. Agree on the root size with your designer up front, keep the conversion chart handy, and consider defining your spacing and type scale once as CSS custom properties, such as --space-4: 1rem, so nobody has to convert the same values twice.