How are rem values converted to pixels?

Multiply the rem value by the root font size. At a 16 px root, 1.5rem is 24 px, 0.75rem is 12 px and 0.0625rem is 1 px. Type the rem number in Length in rem and change Root to use a different reference.

REM to PX Converter

Enter a rem value and the computed root font size to get pixels. The opening example is 1.5rem at a 16 px root, giving 24 px. Change Root to match your page, then copy the value or font-size declaration.

PX24 px24 px · the same length is 1.5rem at a 16 px root

px

rem

em

Root (px)

CSS property

Answer in

Parent (px)

1.5rem x 16 px root = 24px. rem is measured against the 16 px root font size in the box, not a default read from your browser.

font-size: 24px; /* 1.5rem at a 16 px root */

Preview at 24 px

The quick brown fox jumps over the lazy dog

Three conversions, with their context

Each row states the size it was measured against, because the answer changes when that size does. Copy gives you the CSS value.

24 px, root 16 pxto rem
1.5rem
1.5rem, root 16 pxto px
24 px
24 px, parent 20 pxto em
1.2em

Accuracy. Arithmetic on the sizes you type: px to rem divides by the root font size in the box; px to em divides by the parent font size in the box for font-size, or by the element font size for spacing and line height. Displayed decimals can be rounded. Media queries are not applied. A percentage uses the font reference in the box for font-size or line-height; letter-spacing does not accept percentages. Viewport units use the sizes you supply. Negative results are arithmetic values; font-size and line-height declarations require nonnegative values.

Common questions

How are rem values converted to pixels?: Multiply the rem value by the root font size. At a 16 px root, 1.5rem is 24 px, 0.75rem is 12 px and 0.0625rem is 1 px. Type the rem number in Length in rem and change Root to use a different reference.

Arithmetic on the sizes you type: px to rem divides by the root font size in the box; px to em divides by the parent font size in the box for font-size, or by the element font size for spacing and line height. Displayed decimals can be rounded. Media queries are not applied.