CSS units

REM, EM & PX Converter

Compare document-relative rem, component-relative em, and pixel values in one place. Select the source unit and match both font-size contexts to your rendered interface.

Three-way matrixAdjustable contextsCSS token output

Context-aware units

Compare PX, REM, and EM

Runs locally

Source valueSource unitRoot font sizepxElement font sizepx

px24absolute reference

rem1.5relative unit

em1.2relative unit

CSS token

--size: 1.5rem;

Core formulapx = rem × root size; px = em × element size

REM uses the root element; EM uses the relevant element or inherited font-size context.

Method

How the rem/em/px matrix works

Normalize the source value to pixels, then divide that pixel value by the root font size for rem and by the relevant element font size for em.

Formulapx = rem × root size; px = em × element size

REM uses the root element; EM uses the relevant element or inherited font-size context.

Worked example

Compare 24px with a 16px root and 20px component

A 24px value equals 1.5rem when the root is 16px, but it equals 1.2em inside a component whose effective font size is 20px.

Implementation

Copyable code examples

Use these examples as a starting point, then match the values and assumptions to the rendered project.

CSS

html { font-size: 16px; }
.component { font-size: 20px; }
.title { font-size: 1.5rem; } /* 24px */

JavaScript

const pixels = rem * rootFontSize;
const em = pixels / elementFontSize;

Practical guidance

Using the result accurately

Use rem for values that should follow a document-level scale and em for component-local relationships. Inspect computed styles when inheritance or responsive rules make the context unclear.

Important limitation

EM behavior depends on the CSS property and inheritance context. When em is used on font-size itself, it resolves from the parent font size rather than the final size of the element.

References: W3C CSS Values and Units: font-relative lengths.

Common questions

REM/EM/PX Matrix FAQ

Answers about the method, assumptions, and practical use.

Is 1rem always 16px?

No. It is 16px only when the computed root font size is 16px. The calculator lets you enter the actual root size.

Is 1em always equal to 1rem?

Only when the relevant element font size equals the root font size. They refer to different contexts.

Which unit is better for design systems?

REM is often convenient for shared tokens, while em is useful for component-local scaling. The better choice depends on the relationship you want to preserve.

Why can nested EM values compound?

Each nested font-size expressed in em can establish a new computed context for descendants, so repeated scaling can multiply.

Image tools

Developer & CSS

Unit converters

REM, EM & PX Converter

Compare PX, REM, and EM

How the rem/em/px matrix works

Compare 24px with a 16px root and 20px component

Copyable code examples

Using the result accurately

REM/EM/PX Matrix FAQ

REM, EM & PX Converter

Compare PX, REM, and EM

How the rem/em/px matrix works

Compare 24px with a 16px root and 20px component

Copyable code examples

Using the result accurately

REM/EM/PX Matrix FAQ

Related tools