PX to REM converter

Convert CSS pixels and rem using your root font size.

Formula Screens & design

REM

Points: 18 pt
Per cent of root size: 150 %

How it works

One rem equals the font size of the root html element, 16 px in browsers by default. Dividing a pixel value by the root size gives rem; multiplying rem by the root size gives pixels.

Em works the same way but is relative to the parent element’s font size, so it equals rem only when the parent uses the root size.

In CSS, 1 px is defined as 1/96 inch and 1 pt as 1/72 inch, so 1 px = 0.75 pt.

Formula

rem = px ÷ root size
px = rem × root size
pt = px × 0.75

Worked example

With the default 16 px root, 24 px is 24 ÷ 16 = 1.5 rem, which is 18 pt and 150% of the root size.

Questions people ask

Why use rem instead of px?

Rem sizes scale when a user changes the browser’s default font size, which helps accessibility.

What is the difference between rem and em?

Rem is relative to the root element; em is relative to the current element’s parent, so nested em values compound.