Conversion Form

EM
PC

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: empc

Use em for scalable text in web design, pc for print typography.

Quick Reference: Unit Conversion by Tens

EMPC
10em10pc
20em20pc
30em30pc
40em40pc
50em50pc
60em60pc
70em70pc
80em80pc
90em90pc
100em100pc
110em110pc
120em120pc
130em130pc
140em140pc
150em150pc
160em160pc
170em170pc
180em180pc
190em190pc
200em200pc
210em210pc
220em220pc
230em230pc
240em240pc
250em250pc

Live Unit Preview

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

10px

10rem

10em

10%

10vw

10vh

Common Mistake

Use em for scalable text in web design, pc for print typography.

Real Code Example

/* Mobile-first card with em → pc */
.card {
  padding: 0em;     /* undefinedpc */
  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