Home / CSS tools / PX to EM converter

PX to EM Converter

Turn pixel sizes from a design into em values for your CSS. Set the base font size to match your stylesheet.

Convert a list of values

Quick reference

The formula

em = px / font size
24px / 16px = 1.5em
14px / 16px = 0.875em

Divide the pixel value by the font size it will be measured against. With the browser default of 16px, divide by 16.

When to convert px to em

Designers often hand over sizes in pixels. If you want those sizes to scale with the text around them, convert them to em. A button with padding of 0.75em 1.5em, for example, grows and shrinks with its own font size, so the whole button scales together.

Choosing the base

Enter the font size of the element the em value will apply to. For padding and margin, that is the element own font size. For font-size, it is the parent font size. If you want one global base instead, rem is simpler, and the three-way converter shows both.

Quick reference at 16px

  • 8px = 0.5em
  • 10px = 0.625em
  • 12px = 0.75em
  • 14px = 0.875em
  • 18px = 1.125em
  • 20px = 1.25em
  • 24px = 1.5em
  • 32px = 2em

To go back to pixels use the em to px converter. The em vs rem guide explains when each unit is the better choice, and the CSS units guide covers the rest.

Frequently asked questions

How do I convert px to em?

Divide the pixel value by the base font size. At 16px, 24px is 1.5em.

What is 12px in em?

At a 16px base, 12px is 0.75em.

What is 10px in em?

At a 16px base, 10px is 0.625em. This number is why some sites set the root size to 62.5 percent.

Should I use em or rem?

Use rem for global sizes and em where a size should follow the component font size. The guide compares them in detail.