EN
Explore tools

PX to REM Converter – Convert Pixels to rem (and back)

Turn pixel values into rem for responsive, accessible CSS — or rem back into pixels. Set your own root font size, use the quick table, or paste a whole stylesheet to convert every px value at once.

Runs in your browser 100% free No sign-up
Quick answer

rem = px ÷ root font size. With the browser default of 16px, 24px = 1.5rem, 32px = 2rem and 14px = 0.875rem. Type a value in either field and the other updates instantly; change the root font size if your html element uses a different one.

How to use PX to REM Converter

  1. Check the root font size (16px by default).
  2. Type a pixel value to get rem, or a rem value to get px.
  3. Use the table for common sizes.
  4. Paste CSS to convert every px value at once.
  5. Copy the converted CSS.

What is rem?

rem stands for “root em”: a length relative to the font size of the root html element. Browsers use 16px by default, so 1rem = 16px unless you change it. Unlike em, which is relative to the parent element and compounds when nested, rem always refers to the same root value, which makes it predictable.

pxrem (16px base)pxrem (16px base)
12px0.75rem32px2rem
14px0.875rem40px2.5rem
16px1rem48px3rem
20px1.25rem64px4rem
24px1.5rem96px6rem

Popular single values have their own pages, for example 16px to rem, 24px to rem and 32px to rem.

Why use rem instead of px?

When a visitor raises the default font size in their browser settings — common for people with low vision — text and spacing defined in rem grow with it, while px values stay fixed. Using rem for font sizes, padding, margins and media queries keeps layouts proportional and helps meet WCAG 1.4.4 (resize text). Hairline borders and shadows can stay in px.

The 62.5 % trick

Some projects set `html { font-size: 62.5%; }` so that 1rem equals 10px, which makes mental maths easy (24px = 2.4rem). It works, but it overrides the user’s default size for anything not re-scaled, so many teams now prefer to keep 16px and use a converter like this one. Enter 10 as the root font size to match that setup.

Converting a whole stylesheet

Paste CSS into the batch box and every number followed by px is converted to rem using your root font size. 0px becomes 0, and 1px values are kept by default so borders stay crisp. Check media queries afterwards: rem in media queries always uses the browser default, not your html font size.

Related tools

Round corners with the Border Radius Generator, design shadows with the CSS Box Shadow Generator and minify the final file with the CSS Minifier & Beautifier.

You may also find these free tools useful: JSON Formatter, Password Generator and Regex Tester.

Popular calculations

8 pixels to rem10 pixels to rem11 pixels to rem12 pixels to rem13 pixels to rem14 pixels to rem15 pixels to rem16 pixels to rem17 pixels to rem18 pixels to rem19 pixels to rem20 pixels to rem21 pixels to rem22 pixels to rem24 pixels to rem25 pixels to rem26 pixels to rem28 pixels to rem30 pixels to rem32 pixels to rem34 pixels to rem36 pixels to rem38 pixels to rem40 pixels to rem

Frequently asked questions

How do I convert px to rem?

Divide the pixel value by the root font size. With 16px: 24 ÷ 16 = 1.5rem.

How many px is 1rem?

16px by default, because browsers use a 16px root font size.

What is the difference between rem and em?

rem is relative to the root html font size; em is relative to the parent element and compounds when nested.

Should I use rem or px for font size?

rem is better for accessibility because it respects the user’s browser font size setting.

Can I convert a whole CSS file?

Yes. Paste it into the batch box and every px value is converted.

Last updated: