Skip to content
1440px

em to px

px = em × parent font size — with a live converter and the full table.

Formula
px = em × parent font size

At the browser default root size of 16px: 2.5em = 40px.

Resolving an em back to pixels requires knowing the computed font size of the element it sits on.

Converter

—

em to px conversion table

em to px at each common root font size
Value10px root12px root14px root16px root18px root20px root
0.125em1.25px1.5px1.75px2px2.25px2.5px
0.25em2.5px3px3.5px4px4.5px5px
0.375em3.75px4.5px5.25px6px6.75px7.5px
0.5em5px6px7px8px9px10px
0.625em6.25px7.5px8.75px10px11.25px12.5px
0.75em7.5px9px10.5px12px13.5px15px
0.875em8.75px10.5px12.25px14px15.75px17.5px
1em10px12px14px16px18px20px
1.125em11.25px13.5px15.75px18px20.25px22.5px
1.25em12.5px15px17.5px20px22.5px25px
1.375em13.75px16.5px19.25px22px24.75px27.5px
1.5em15px18px21px24px27px30px
1.75em17.5px21px24.5px28px31.5px35px
2em20px24px28px32px36px40px
2.25em22.5px27px31.5px36px40.5px45px
2.5em25px30px35px40px45px50px
2.75em27.5px33px38.5px44px49.5px55px
3em30px36px42px48px54px60px
3.5em35px42px49px56px63px70px
4em40px48px56px64px72px80px
4.5em45px54px63px72px81px90px
5em50px60px70px80px90px100px
6em60px72px84px96px108px120px
7em70px84px98px112px126px140px
8em80px96px112px128px144px160px
9em90px108px126px144px162px180px
10em100px120px140px160px180px200px
12em120px144px168px192px216px240px
16em160px192px224px256px288px320px
20em200px240px280px320px360px400px
24em240px288px336px384px432px480px

Set it up once in CSS

CSS
/* 62.5 % makes 1rem = 10px, so 1.6rem = 16px.
   Convenient, but it overrides the user's browser preference at the root —
   prefer keeping the default and doing the maths. */
html { font-size: 100%; }        /* 16px, respects user preference */

:root {
  --step-0: 1rem;      /* 16px */
  --step-1: 1.25rem;   /* 20px */
  --step-2: 1.5rem;    /* 24px */
  --step-3: 2rem;      /* 32px */
}

/* Fluid type without a converter, using clamp() */
h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }

Questions

How do I convert em to px?

px = em × parent font size. With the browser default root font size of 16px, 2.5em = 40px.

What if the root font size is not 16px?

Then every value changes proportionally. The table above shows all six common root sizes side by side. Note that the root font size is whatever html computes to — if a user has increased their browser's default text size, the pixel result changes accordingly.

How do I convert px back to em?

Invert the formula, or use the px to em converter.

Other conversions

px → remrem → pxpx → empx → ptpt → pxpx → mmmm → pxpx → cmpx → inin → px

Common em values

0.5em8px0.75em12px1em16px1.25em20px1.5em24px2em32px2.5em40px3em48px
Conversions follow the CSS Values and Units specification, in which 1in is defined as exactly 96px. Values are computed, not tabulated by hand.