Convert between pixels and rem/em for any root font size.
Instant and private in your browser.
How do you convert PX to REM?
rem = px ÷ root font size, and px = rem × root font size; with the default 16px root, 1rem = 16px. For example, at a 16px root, 24px equals 1.5rem. Using rem keeps layouts proportional when users change their browser's default font size, making it more accessible than fixed pixels.
Understanding your result
Using rem keeps layouts proportional when users change their browser’s default font size — better for accessibility than fixed pixels.
Formula and method
rem = px ÷ root font size; px = rem × root font size. With the default 16px root, 1rem = 16px.
Assumptions and limitations
The conversion depends entirely on the root font size you set; results assume that root value applies throughout. It does not account for em units nested inside other em contexts, where sizes compound, nor for browser zoom or media-query changes to the root that alter the effective pixel size elsewhere on the page.
Worked example
At a 16px root, 24px equals 1.5rem.
How to use this tool
- Enter a value and choose the direction.
- Set the root font size (16px by default).
- Press Convert.
About the PX to REM Converter
The PX to REM Converter turns pixel values into rem (or em) units and back, based on your root font size, so your CSS scales with the user’s settings.
Who should use this tool
Front-end developers and CSS authors building responsive, accessible layouts who want to express sizes in rem instead of fixed pixels. Useful when translating a pixel-based design into scalable units, or converting a rem value back to pixels to check it against a mockup.
Benefits
- Converts pixels to rem or em for any root size
- Reverses the calculation to check rem against pixels
- Helps layouts scale with the user's font settings
- Runs in your browser with no data sent away
Practical use cases
- Translating a pixel-based design into rem units
- Setting an accessible, scalable font size in CSS
- Checking what a rem value equals in pixels
- Converting spacing values for a design system
Explore all Developer Tools tools
Frequently asked questions
What’s the difference between rem and em?
rem is relative to the root font size; em is relative to the current element’s font size. For a 16px root they match at the top level.
What is the difference between rem and em?
A rem is always relative to the root element's font size, so it stays consistent across the whole page. An em is relative to the font size of its own element, so nested em values compound and can grow or shrink unexpectedly. Rem is usually safer for predictable, page-wide sizing.
Why use rem instead of pixels for font sizes?
Rem units scale with the user's chosen browser font size, so text respects accessibility preferences and remains readable for people who enlarge their default. Fixed pixels ignore that setting and stay the same regardless. Using rem keeps your layout proportional and inclusive when users adjust their defaults.