Converting PX to REM in CSS: A Practical Guide

The formula

rem = px ÷ root font size. Browsers default to a 16px root, so 24px is 1.5rem, 32px is 2rem, and 12px is 0.75rem. Going the other way, multiply: 1.25rem × 16 = 20px.

Why rem matters for accessibility

When a reader increases their browser's default font size — a common setting for people with low vision — text sized in px ignores it completely, while text sized in rem scales proportionally. Sizing type and spacing in rem is one of the cheapest accessibility wins available in CSS.

The 62.5% trick

Setting html { font-size: 62.5% } makes the root 10px, so 1.6rem equals 16px and mental arithmetic becomes trivial. The trade-off is that it changes the meaning of rem everywhere, including in third-party components, so decide once at the start of a project rather than midway through.

When px is still correct

Rem is not always the right answer.

• Hairline borders — a 1px border should stay 1px
• Fixed-size icons that must align to a pixel grid
• Media query breakpoints, where px is more predictable across browsers
• Box shadows and small decorative offsets

rem versus em

Em is relative to the parent element's font size, so nested elements compound and sizes drift unexpectedly. Rem is always relative to the root, which makes it predictable. Use em only when you deliberately want a value to scale with its immediate context, such as padding inside a button that should grow with the button's own text.

Tools mentioned in this guide

FAQ

More guides