PX to REM Converter
Turn pixels into rem, one value at a time or a whole stylesheet at once.
How to use the PX to REM Converter
- Type a pixel or rem value; the other box updates instantly.
- Change the root font size if your site does not use the usual 16px.
- Click any size in the table to copy its rem value.
- To convert a stylesheet, paste it below and copy the converted CSS.
About this tool
A rem is a size measured against the root font size of the page, which is 16 pixels in every major browser unless the visitor or the site changes it. Sizing text and spacing in rem instead of px means everything scales together when someone raises their browser's default font size, which is one of the simplest ways to make a site more accessible.
The quick converter works both ways and the table shows the sizes designers reach for most, so you can copy 0.875rem for 14px without doing the division. If your design uses a different root size, such as the 10px trick that makes 1rem equal 10px, change it once and every figure updates.
The stylesheet converter rewrites every px value in pasted CSS. It skips comments, strings and image addresses, can leave hairline borders in px so they stay crisp, and by default leaves media query breakpoints alone, because rem in a media query always refers to the browser default rather than your root size.
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size. With the default of 16px, 24px ÷ 16 = 1.5rem. To go back, multiply: 1.5rem × 16 = 24px.
What is the difference between rem and em?
A rem is always relative to the root (html) font size. An em is relative to the font size of the element itself, so ems compound when elements are nested. Rem is easier to predict for spacing and layout.
Should borders be in rem too?
Usually not. A 1px border converted to 0.0625rem can render blurry or disappear at some zoom levels. That is why the converter keeps values under 2px in px unless you choose otherwise.
Why leave media queries in px?
Inside a media query, rem and em refer to the browser's default font size, not the root size you set in CSS. Converting them with a custom root size would move your breakpoints. Leaving them in px keeps them where you designed them.
Does my CSS leave the browser?
No. The conversion runs on this page as you type, and the CSS you paste is only remembered in your own browser so it is still there next time.