Pixel to REM/EM Converter

Convert between pixel, rem, and em CSS units with a customizable base font size.

How to Use Pixel to REM/EM Converter

1

Enter a value

Type a pixel or rem value you want to convert.
2

Set base font size

Confirm or change the root font size, default is 16px.
3

Copy the result

Click copy to grab the converted pixel or rem value.

Tested tool guide Tested browser tools Checked August 16, 2026

What Pixel to REM/EM Converter does, with a checked example

CSS sizes are written in px, rem, and em. rem is measured against the root font size (16 px in every major browser unless the user changes it); em is measured against the font size of the element that contains it. This tool converts between all three units in either direction, with the base font size as an adjustable field. The surprise most designers hit is that em is not anchored to the root: the same em value renders differently in a 12 px label than a 20 px heading, so an em result is only valid for the context you specify.

Worked example

A concrete input and expected output from the current implementation.

Input

32 px to rem at a 20 px base; 32 px to em at a 16 px base

Expected output

1.6 rem; 2 em

Each result is the pixel value divided by its base: 32 / 20 = 1.6, and 32 / 16 = 2. The answers differ because rem and em measure against different font sizes.

How the result is produced

The base and rem

rem is defined against the font size of the root element, so one division answers every question: pixels divided by the base give rem, and multiplying rem by the base gives pixels back. The tool applies whichever direction you select. The base defaults to 16 px, the size every major browser initializes the root to, and changing it only changes the arithmetic, not the meaning of rem.

Context and em

em is defined against the font size of the element where the value is used, not the root. The same division applies - pixels divided by the base give em - but the base must be the element's font size, not the root's. Because em font sizes inherit and compound through nesting, a value computed for one container can be wrong a level deeper.

Good uses

Porting a pixel-based design system into rem so text and spacing scale when users change their browser's default font size or zoom.
Verifying that a rem value from a design tool, a UI library, or another developer's stylesheet matches the pixels in your actual design at your project's root size.
Translating em-based padding, margins, or font sizes from a component into pixels, or the reverse, when you need to match a screenshot, a client's pixel spec, or the computed styles shown in browser dev tools.

Limits and checks

16 px is the browser default root size, not a standard. Visitors can change their browser's font size setting, and sites can override the root size in CSS, so 1 rem may not render at 16 px in practice; every pixel value this tool produces is accurate only for the base you entered.
An em result is valid only for the base you supplied, which must be the font size of the element the value is declared on. The same em number renders at different pixel sizes in different containers, and nested elements compound em font sizes, so a single em-to-pixel answer has no meaning without its context.
Conversions often produce long decimals (16.5 px at a 16 px base is 1.03125 rem). Rounding those values and converting back will not return the original number exactly; keep the full decimal when exactness matters.

Common questions

Is 1 rem always 16 px?

Only at default browser settings. rem is measured against the root element's font size, which browsers initialize to 16 px, but users can change the default font size in browser settings and sites can set their own root size in CSS. In either case 1 rem renders at a different pixel size, which is why the base is adjustable here.

Why does my em conversion give a different pixel result than my rem conversion?

Because the two units measure against different anchors. rem always refers to the root element's font size, so it is constant across the document. em refers to the font size of the element where it is used, so it changes with context and compounds through nesting. The same number in each unit is not the same measurement.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.