Pixels (CSS px) to em (relative to base font size) Converter

1 px equals 0.0625 em, and 1 em equals 16 px. Enter a value in either box to convert pixels (css px) to em (relative to base font size) and back. Formula: CSS defines 1 in = 96 px = 72 pt = 6 pc; rem and em = px / base font size (default 16 px).

· CalcFlow Editorial

16 px = 1 em

Results shown are estimates for informational purposes only. Nothing on CalcFlow is financial, tax, legal, or medical advice. Always consult a qualified professional before making important decisions.

Pixels (CSS px) to em (relative to base font size) Conversion Table

Pixels (CSS px)em (relative to base font size)
8 px0.5 em
10 px0.625 em
12 px0.75 em
14 px0.875 em
16 px1 em
18 px1.125 em
24 px1.5 em
32 px2 em
48 px3 em

em (relative to base font size) to Pixels (CSS px) Conversion Table

em (relative to base font size)Pixels (CSS px)
8 em128 px
10 em160 px
12 em192 px
14 em224 px
16 em256 px
18 em288 px
24 em384 px
32 em512 px
48 em768 px

Worked example: 10 px = 0.625 em. 24 px at a 16 px base is 24 / 16 = 1.5 rem. A 12 pt print font is 12 x 96 / 72 = 16 px.

Need other units? Open the full Typography and CSS Unit Converter.

Formula

CSS defines 1 in = 96 px = 72 pt = 6 pc; rem and em = px / base font size (default 16 px)

Understanding Typography Conversion

On the web, CSS fixes the reference pixel at 1/96 of an inch, a point at 1/72 of an inch and a pica at 12 points, so 1 inch is 96 px, 72 pt and 6 pc. Relative units such as em and rem scale with a base font size, which browsers set to 16 pixels by default. Using rem for type and spacing keeps a layout responsive to the reader's font preference.

Tips and Best Practices

  • 1At the default 16 px base, 1 rem is 16 px and 0.75 rem is 12 px.
  • 2Divide px by the base size for rem; multiply rem by the base size for px.
  • 3Use rem for font sizes so users who raise their browser font size get larger text.

Real-World Example

24 px at a 16 px base is 24 / 16 = 1.5 rem. A 12 pt print font is 12 x 96 / 72 = 16 px.

Common Mistakes to Avoid

  • Assuming 1 em always equals 16 px; em depends on the parent element font size, and the base here is adjustable.
  • Treating a CSS pixel as a physical device pixel on high density screens.
  • Using pt on screens when the design brief is in px.

How to Use

  1. Type a number in the Pixels (CSS px) box.
  2. The em (relative to base font size) result appears instantly; you can also edit the em (relative to base font size) box to convert backwards.
  3. Use the swap button to reverse the direction and Copy result to copy the answer.

Frequently Asked Questions

Q

How many em (relative to base font size) are in 1 px?

1 px equals 0.0625 em.
Q

How many pixels (css px) are in 1 em?

1 em equals 16 px.
Q

What is the formula to convert pixels (css px) to em (relative to base font size)?

CSS defines 1 in = 96 px = 72 pt = 6 pc; rem and em = px / base font size (default 16 px).
Q

How many px is 1 pt?

One point is 96/72, which is 1.3333 CSS pixels.

Sources: CSS Values and Units Module Level 3/4 (W3C): 1in = 96px = 2.54cm, 1pt = 1/72in, 1pc = 12pt.