How are rem values converted to pixels?

Multiply the rem number by the root font size. For example, 1.5rem at 16px equals 24px.

REM to PX Converter

Enter a rem value and root font size to get a pixel result with the multiplication displayed. Nothing is sent to a server, and you can change the input to compare values.

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

rem

Root (px)

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. Exact arithmetic on the context you type: rem divides by the root font size in the box, em divides by the parent font size in the box. Both boxes are yours and neither is read from your browser, so a visitor who has changed their default text size will get a different px value than the one on screen. Media queries are not applied. A percentage here is a font-size percentage, a share of the same parent em uses, and vw and vh are measured against the viewport boxes above rather than the window you are reading this in.

Common questions

How are rem values converted to pixels?: Multiply the rem number by the root font size. For example, 1.5rem at 16px equals 24px.

Exact arithmetic on the context you type: rem divides by the root font size in the box, em divides by the parent font size in the box. Both boxes are yours and neither is read from your browser, so a visitor who has changed their default text size will get a different px value than the one on screen. Media queries are not applied.