gardencalculator.net

PX to REM Converter

Convert pixels to rem and back at any root font size — with the common pairs listed and the accessibility reason rem exists.

Written by Jude Ramsey · Last updated August 2026 · How these calculators are checked

Why rem exists at all

Pixels are absolute; rem is relative to the root font size — 16 px in almost every browser’s default. Sizing in rem means the whole layout scales when a user raises their browser’s base font size, which is an accessibility feature, not a styling fashion. This converter goes both directions at any root size, for the codebases that changed the default.

How to use it

  1. Enter the value and the direction (px → rem or rem → px).
  2. Set the root font size if your project changed it from 16.
  3. Read the conversion and the common pairs.

The formula

rem = px ÷ root · px = rem × root

A worked example

At the default 16 px root, 24 px is 1.5 rem — and the pairs worth memorising are 16 → 1, 24 → 1.5, 32 → 2. The classic “62.5% trick” sets the root to 10 px so 1.6 rem = 16 px, trading spec-default purity for round numbers; enter 10 as the root here and the conversions follow.

Common questions

rem or em — which should I use?
rem is relative to the root and stays predictable everywhere; em is relative to the current element’s font size and compounds when nested. Most teams default to rem and reserve em for deliberately proportional components.
Should media queries use px or rem?
rem (or em) queries respect a user’s enlarged base font — layouts reflow when text grows, which is usually what accessibility wants.
Is the 62.5% root trick a good idea?
It makes mental math easy but couples every rem in the codebase to a non-default root. Modern teams increasingly keep 16 and let tooling do the arithmetic — or this converter.

Related calculators

PPI calculatorAspect Ratio calculatorPercentage calculatorRatio calculator