util·tools

PX to REM Converter

Convert pixel values to rem and em for CSS — and back. Type into any field and the others update from your root font size (16px by default). Using rem keeps your layout scaling with the user's font-size preference, which is better for accessibility. It all runs in your browser.

About this px to rem converter

In CSS, px is an absolute pixel size, while rem and em are relative. rem is measured against the root font size — the font-size set on the <html> element, which is 16px in browsers by default — so 1rem = 16px, 1.5rem = 24px, and so on. Building layouts in rem means everything scales together when a user changes their browser's default font size, which is better for readability and accessibility than hard-coded pixels. This converter turns any px value into rem and em (and back) using the root size you set, so you can size fonts, spacing and breakpoints confidently. Change the root font size field if your project uses something other than 16px. Everything is worked out in your browser.

Frequently asked questions

How many px is 1rem?
By default 1rem equals 16px, because browsers set the root font size to 16px. If your project changes that, enter the new value in the root font size field.
What is the difference between rem and em?
rem is always relative to the root font size, while em is relative to the current element's font size. This tool converts against the root size you set, so rem and em come out the same here.
Why use rem instead of px?
rem scales with the user's chosen font size, so text and spacing stay proportional and readable when someone increases their browser's default — better for accessibility.

Related tools