PX vs REM in CSS: Conversion and Practical Differences

Use the current root size

Divide pixels by the root font size to get rem. Multiply rem by that same root size to get pixels. At a 16px root, 24px equals 1.5rem. At a 20px root, the same 24px equals 1.2rem. Check the computed style on the html element instead of assuming a fixed value. Browser defaults and user preferences can affect the result.

Keep zoom and device pixels separate

A CSS pixel is not necessarily one physical screen pixel. Browser zoom and display density affect rendering. REM conversion describes CSS layout values, not the exact number of illuminated pixels on a display. Relative units can help a layout follow text size preferences, but they do not automatically make a page accessible. Fixed-height containers and clipped overflow can still break enlarged content.

Avoid changing the root only for easier arithmetic

A 62.5% root is sometimes used so that 1rem often corresponds to 10px under a common default. That convenience adds assumptions and affects all rem-based components. A root size of 100% with an explicit design token scale is often easier to integrate with existing libraries. Test navigation, dialogs, and forms after increasing text size, especially where dimensions were originally copied from a pixel-based design.

Worked example

rem = px / rootFontSize
24 / 16 = 1.5rem
1.5 * 20 = 30px

Is 1rem always 16px?

No. It equals the computed font size of the root element. 16px is a common default, not a guarantee.

Reference and further reading

Read the official documentation ↗