A LITTLE HELP FOR YOUR NEXT DESIGN

EM to PX converter

Convert em values to pixels based on the font size they are relative to, with a reference table of common values.

1.5 em24 px
MAKE IT YOURS
font-size: 24px; /* 1.5em at 16px */
0.5 em8 px
0.75 em12 px
0.875 em14 px
1 em16 px
1.125 em18 px
1.25 em20 px
1.5 em24 px
1.75 em28 px
2 em32 px
2.5 em40 px
3 em48 px

How do you convert EM to PX?

Multiply the em value by the font size it is relative to. For the font-size property that is the parent’s font size. For every other property, such as padding, margin or letter-spacing, it is the element’s own font size. So 1.5em is 24px inside 16px text and 30px inside 20px text.

Because em compounds through nested elements, it is best for things that should scale with the text around them, such as letter spacing and padding on buttons. For font sizes, rem is more predictable. See rem vs em vs px.

Read the guide: rem vs em vs px: which unit for font sizes?

See how real sites set their type.

Font Inspector shows the font, size, line height and spacing of any text on any website, then copies it as CSS. Free, no account.

Add to Chrome