PX to REM and EM converter: px to rem, rem to px and px to em

px
px
px
px
rem
em
pt
%
vw

Common sizes

About the PX to REM and EM converter

This converter turns pixels into rem, em, points, percent and viewport width units, and back again. Type into any field and the others update straight away. The base font size is the font size of the html element, 16px by default, and rem values are pixels divided by it. The parent font size is used for em and percent, which are relative to the element's parent. A reference table lists common pixel sizes as rem and em, each with a copy button.

How to convert px to rem

  1. Set the base font size to match your html element, usually 16px.
  2. Type the pixel value into the Pixels field, or a rem value into the Rem field to convert rem to px.
  3. For em, set the parent font size, then read the Em field.
  4. Press the copy button next to a result, or pick a row from the common sizes table.

Frequently asked questions

How do I convert px to rem?

Divide the pixel value by the root font size. With the browser default of 16px, 24px is 24 / 16 = 1.5rem, and 16px is 1rem. If your html element uses a different font size, enter it as the base font size and every result updates.

How do I convert rem to px?

Multiply the rem value by the root font size. At the default 16px, 1.5rem is 1.5 × 16 = 24px. Type a value into the rem field and the px field shows the answer straight away.

How do I convert px to em?

Divide the pixel value by the font size of the parent element. If the parent is 16px, 24px is 1.5em. Unlike rem, em depends on the parent, so set the parent font size field to match the element you are styling.

What is the difference between rem and em?

rem is relative to the font size of the root html element, so it is the same everywhere on the page. em is relative to the font size of the parent element, so nested elements compound. Use rem for predictable sizing and em when a component should scale with its own text.

What is the default base font size?

Browsers default to 16px, so 1rem is 16px unless the html font size is changed. Some projects set html to 62.5% so that 1rem equals 10px, which makes the maths easier. If you do, set the base font size here to 10.

Why use rem instead of px?

rem values follow the font size a visitor chose in their browser, so people who enlarge their default text still get larger text and spacing. Pixel values ignore that setting, which is why rem is recommended for font sizes and often for spacing.

How are pt, % and vw calculated?

One CSS pixel is 0.75pt, so 16px is 12pt. A percentage is relative to the parent font size, so 24px at a 16px parent is 150%. vw is a percentage of the viewport width, so 144px in a 1440px viewport is 10vw.

Is my data sent anywhere?

No. Everything is calculated in your browser and nothing is uploaded. Your values are kept in the page address so you can bookmark or share a conversion.