Skip to content
🛠️
Whiz Tools

PX, REM, and EM Unit Converter

A px to rem and em converter for CSS. Enter a pixel, rem, or em value to see its equivalent in the other two units, using custom root and parent font sizes.

PX, REM, and EM Unit Converter

Convert between pixels (PX), root em (REM), and em (EM) units. Enter a value in any field to see the equivalent values in the other units.

px
px
px
rem
em
Visualization not available for negative or zero values

Conversion Formulas

  • PX to REM: value in px ÷ root font size
  • PX to EM: value in px ÷ parent font size
  • REM to PX: value in rem × root font size
  • EM to PX: value in em × parent font size
Loading calculator...
📚

Documentation

PX, REM, and EM Unit Converter

A px to rem and em converter changes a CSS length between pixels (px), root em (rem), and em, using a root font size and a parent font size that the person sets. The three units are the most common ways to size text and spacing in CSS, the language used to style web pages.

What are px, rem, and em?

A pixel (px) is a fixed unit. A box set to 200px wide stays 200px wide no matter what font size the page uses.

A rem ("root em") is a unit that scales with the font size of the page's root element, normally the <html> tag. Most browsers set that root font size to 16px unless a site changes it. If the root font size is 16px, then 1rem equals 16px.

An em is a unit that scales with the font size of the parent element, the element that contains it. If a parent element has font-size: 20px, then 1em inside that parent equals 20px.

The main difference between rem and em is what each one measures against. Rem always looks at the root element. Em looks at the nearest parent, so its value can change at every level of nesting.

How to calculate px to rem

To convert pixels to rem, divide the pixel value by the root font size:

rem = px ÷ root font size

Example

With the default root font size of 16px, 24px converts to:

24 ÷ 16 = 1.5rem

If a site sets its root font size to 10px (a common trick, done by setting html { font-size: 62.5%; }, since 62.5% of 16px is 10px), the same 24px becomes:

24 ÷ 10 = 2.4rem

How to calculate rem to px

To go the other way, multiply the rem value by the root font size:

px = rem × root font size

With a 16px root, 1.5rem converts back to 1.5 × 16 = 24px.

How to calculate px to em

To convert pixels to em, divide the pixel value by the parent element's font size:

em = px ÷ parent font size

Example

If the parent element's font size is 20px, then 24px converts to:

24 ÷ 20 = 1.2em

How to calculate em to px

Multiply the em value by the parent font size:

px = em × parent font size

With a 20px parent, 1.2em converts back to 1.2 × 20 = 24px.

How to calculate rem to em and em to rem

Because rem and em measure against different font sizes, converting between them needs both the root font size and the parent font size:

em = rem × (root font size ÷ parent font size)

rem = em × (parent font size ÷ root font size)

Example

With a root font size of 16px and a parent font size of 20px, 2rem converts to:

2 × (16 ÷ 20) = 1.6em

If the root and parent font sizes are equal, 1rem always equals 1em.

When each unit is useful

Pixels work well for details that should not change size, such as a 1px border or a fixed-width icon.

Rem is common for spacing and typography that should stay consistent across a page. Because it always refers to the root font size, a rem value does not change no matter how deeply an element is nested. This also means rem-based layouts adjust automatically when a person raises their browser's default font size, which helps readers with low vision.

Em works well inside a single, self-contained component, such as a button, where padding should scale along with that button's own font size. A common problem with em is that it compounds: if several nested elements each use font-size: 1.2em, each level multiplies the one before it, so font sizes grow faster than intended.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

After three levels, the text has grown by about 73%, not the 20% a developer might expect from a single 1.2em rule.

Using the converter

  1. Enter a value into the pixel, rem, or em field.
  2. The other two fields update automatically.
  3. Set the root font size to match the <html> element of the project (16px by default in most browsers).
  4. Set the parent font size to match the font size of the element that a rem or em value would sit inside.
  5. Use the copy button next to a field to copy its value.

The tool also shows the three values side by side so their relative sizes can be compared visually.

Frequently asked questions

What is the difference between rem and em? Rem always refers to the root element's font size. Em refers to the font size of the nearest parent element. A rem value stays the same everywhere on a page; an em value can change depending on how deeply the element is nested.

Why do browsers use 16px as the default font size? 16px has long been the default text size in major browsers because it is comfortable to read on typical screens without extra styling. Web accessibility guidance recommends that text can be resized up to 200% without breaking a page's layout, and 16px is a practical starting point for that.

What is the 62.5% trick? Setting html { font-size: 62.5%; } turns the default 16px root font size into 10px, since 62.5% of 16 is 10. This makes rem math simpler, because 1.6rem equals 16px and 2.4rem equals 24px.

Can px, rem, and em values be negative? Yes, for properties that accept negative lengths, such as margins or CSS transforms. Padding cannot be negative in CSS; browsers ignore a negative padding value.

Should every pixel value be converted to rem? Not necessarily. Borders and other fine details are usually kept in pixels, since they rarely need to scale with font size and can look uneven at sub-pixel widths. Rem suits spacing and typography that should scale with a user's font size preference.

Does the unit choice affect page performance? No. Browsers convert every CSS length to the same internal value during layout, so px, rem, and em render equally fast. The choice between them affects maintainability and accessibility, not speed.