PX to REM Converter
Runs in your browser — your data is never uploaded.
Convert pixels to rem against whatever root font size your project uses. rem is relative to the root element, so 24px is 1.5rem on a default 16px root — and something else entirely if you have changed it. The result includes the CSS line to paste and a reminder of which base the number depends on.
How to use PX to REM
- 1
Enter the pixel value you want to convert.
- 2
Set the root font size — 16px is the browser default.
- 3
Copy the rem value, or the ready-made CSS line.
Share
Embed this tool on your site
Paste this where you want the tool to appear. It runs entirely in your visitor's browser — no uploads, no account, no tracking.
Please keep the attribution line — it's what keeps these tools free.
Need a different size, a dark theme, or a different tool? Build an embed lets you preview it first.
Frequently asked questions
Why use rem instead of px?+
Because rem respects the font size a reader has chosen in their browser settings. A layout built in px ignores that preference entirely, which is an accessibility problem for anyone who has increased their default text size.
What is the difference between rem and em?+
rem is relative to the root element and is the same everywhere. em is relative to the parent, so it compounds through nesting — three levels of 0.9em is 0.73, not 0.9. That compounding is why rem is the safer default for spacing.
Is the root font size always 16px?+
It is the browser default, but a stylesheet can change it, and some resets set it to 62.5% so that 1rem equals 10px. Set the base here to whatever your :root actually uses, or the numbers will not match what you see.