Free PX to REM / EM Converter
Convert pixel values to REM or EM and back, using your own root font size. Essential for building accessible, scalable CSS layouts that respect user font-size preferences.
Converting to viewport units instead? The Px to Viewport Converter does the same job for vw and vh, and CSS to Tailwind rewrites the resulting rules.
How to use the PX to REM
- 1 Enter the pixel value you want to convert.
- 2 Set the root font size — 16px is the browser default, but change it if your project uses another base.
- 3 Read the equivalent in rem, and in em where a parent-relative value is more appropriate.
- 4 Switch direction to convert rem back into pixels.
How to Use
Set the root font size (16px by default), then type a pixel value to get its REM/EM equivalent, or type a REM value to convert back to pixels. A conversion table from 1px to 64px is included.
- PX to REM and REM to PX in both directions
- Configurable root font size
- Handles EM with a custom parent size
- Quick reference conversion table
- Copy individual results
Why use REM and EM?
REM units are relative to the root (html) font size, so layouts built with REM scale correctly when a user changes their browser text size — a key accessibility win. EM units are relative to the parent element and are useful for component-level scaling.
Frequently asked questions
Why use rem instead of pixels?
Because rem respects the user font-size. A visitor who has raised their browser default to 20px for readability gets text scaled accordingly; hard-coded pixels ignore that preference entirely and are one of the most common accessibility failures.
What is the difference between rem and em?
rem is relative to the root element font-size, so it is consistent everywhere. em is relative to the current element parent, so it compounds — nesting three 1.5em elements gives 3.375× the original size, not 1.5×. Use rem for sizing, em for spacing that should scale with its own component.
Why is 16px the default root size?
It is the browser default that every desktop and mobile browser ships with, so 1rem equals 16px unless you override it. Changing the root size is a legitimate technique for scaling a whole design, but it breaks any assumption that 1rem is 16px.
Related Unit & Data Converters
You might also need
Tools from other categories that people pair with the PX to REM: