Skip to content
Devtoolry
Sign InJoin for Free

PX to REM Converter

Convert px to rem and rem to px online with any root font size, see a table of common sizes, and convert every px value in a CSS snippet at once.

Something not working, or missing a feature? Send feedback

About the PX to REM Converter

The PX to REM converter changes pixel values to rem units and back, using the root font size of your site. It also converts a whole CSS snippet at once and shows a table of common sizes, which makes moving a design from fixed pixels to scalable rem units quick and consistent.

Conversion happens in your browser, so your files and records stay private.

How to use the PX to REM Converter

  1. Set the root font size (16px is the browser default; change it if your CSS sets html { font-size }).
  2. Type a value in px or rem to see the other unit instantly.
  3. To convert a stylesheet, paste CSS into the batch box and copy the rem version.

Common mistakes

  • Using the wrong root size. If your CSS sets html { font-size: 62.5% }, the root is 10px, not 16px. Set the root size to match, or every converted value will be off.
  • Converting borders and shadows blindly. Hairline 1px borders usually look best as 1px. Keep the "Keep 1px values" option on when converting a stylesheet.

Works well with the PX to REM Converter

Frequently asked questions

How do I convert px to rem?

Divide the pixel value by the root font size: with the default 16px, 24px ÷ 16 = 1.5rem and 14px ÷ 16 = 0.875rem. To go back, multiply: 2rem × 16 = 32px.

Why use rem instead of px?

rem units scale with the user's browser font-size setting, so text and spacing grow together for people who need larger text. Pixel sizes stay fixed and can make a page harder to read.

What is the difference between rem and em?

rem is relative to the root (html) font size, the same everywhere on the page. em is relative to the font size of the current element, so it compounds when elements are nested.

Related tools