Why use rem instead of px in CSS?

rem units scale with the user's font-size preference (including browser zoom and accessibility settings), while px stays fixed — rem is generally preferred for font sizes and spacing for this reason.

What if my project changes the root font size?

Some projects set the html element to something other than the browser default of 16px (for example, 62.5% to make 1rem = 10px) — adjust the root font size field to match your project's actual value.

PX to REM Converter

Convert a pixel value to rem for CSS that scales properly with user font-size preferences.

Pixels (px)Root font size (px)

1rem

Browsers default to a 16px root font size unless overridden by the page's CSS or the user's browser settings — adjust it above if your project uses a different base.

Processing happens locally in your browser. Nothing you enter is uploaded.

How It Works

Enter a pixel value and the root font size (16px unless your project overrides it). The rem equivalent updates instantly.

rem = px ÷ root font size (16px by default)

Example

16px is 1rem, and 24px is 1.5rem, at the default 16px root font size.

Frequently Asked Questions

Why use rem instead of px in CSS?: rem units scale with the user's font-size preference (including browser zoom and accessibility settings), while px stays fixed — rem is generally preferred for font sizes and spacing for this reason.
What if my project changes the root font size?: Some projects set the html element to something other than the browser default of 16px (for example, 62.5% to make 1rem = 10px) — adjust the root font size field to match your project's actual value.

Related Tools

REM to PX Converter