rem to px

Multiply the rem value by the root font size. px = rem × root. 1rem at 16px is 16px. 1.5rem at that same root is 24px. 0.875rem is 14px.

A root of 10px, the 62.5% trick, makes the arithmetic easier and the numbers smaller: 2rem is 20px, not 32px. Type 10 into the root field before you copy a declaration, or the snippet will assume 16.

Convert

Edit any field. Rem uses the root font size. Em uses the parent font size.

Base sizes

Root font size (px)

Used for rem. Browsers start at 16.

Parent font size (px)

Used for em. Matches rem while this equals the root.

Pixels

Rem

Copies the pixels field.

Common sizes

Going the other direction is px to rem. If the length should follow a parent instead of the html element, use em to px. The rest of the groups are on Units.