Conversion Form

EM
PT

About the Unit

EM: EM is a relative unit that depends on the font size of the parent element in which the current element is inserted. That is, 1em will be equivalent to the font size of the parent element. If the font size of the parent element is 20px, 1em will be equal to 20px. This unit is particularly useful when you want to create dynamic layouts that adjust based on the context of the parent element. For example, using em instead of px ensures that the size of fonts, margins, or other layout elements will scale relative to the text size of the parent component, making the design more flexible and responsive. A key detail about em is that it can accumulate when used in chain (i.e., if a child element uses em to set its size and the parent element also uses em, the value will multiply), which can lead to unexpected results if not used carefully.

Pro Tip: empt

Use pt for print designs, em for scalable text and component sizes.

Quick Reference: Unit Conversion by Tens

EMPT
10em120.0003pt
20em240.0006pt
30em360.0009pt
40em480.0012pt
50em600.0015pt
60em720.0018pt
70em840.0021pt
80em960.0024pt
90em1080.0027pt
100em1200.003pt
110em1320.0033pt
120em1440.0036pt
130em1560.0039pt
140em1680.0042pt
150em1800.0045pt
160em1920.0048pt
170em2040.0051pt
180em2160.0054pt
190em2280.0057pt
200em2400.006pt
210em2520.0063pt
220em2640.0066pt
230em2760.0069pt
240em2880.0072pt
250em3000.0075pt

Live Unit Preview

See how different CSS units affect the size of the box below:

10px

10rem

10em

10%

10vw

10vh

Common Mistake

Use pt for print designs, em for scalable text and component sizes.

Real Code Example

/* Mobile-first card with em → pt */
.card {
  padding: 0em;     /* undefinedpt */
  font-size: 1.5rem;
  width: min(90vw, 40ch);
}

Frequently Asked Questions About EM

When should I use em instead of em?

Use em when scaling relative to parent is needed.

How many em is 1em?

Depends on parent font size.

Is em affected by zoom?

Yes, it scales with parent and zoom.

Is em good for fonts?

Yes, especially for nested components.

Keyboard Shortcuts

  • Ctrl + C: Convert
  • Ctrl + I: Invert units
  • Esc: Reset values

More popular conversions