EMS

What are EMs?

  • Scalable unit that is used in web document media

  • Font-size is computed relative to font-size of parent element

  • Does not lock users into an absolute font-size (older browsers do not re-size text set in pixels when users zoom)

  • Provides users with highest level of control over the content they are viewing

History: Old-fashioned metal typesetting, the em referred to the size of the metal plates that contained a raised letter, which had to be wide enough to fit the widest letter, the capital M. Many people assume that digital ems are also based on the width of the letter M, but they aren’t.

EMs in practice


 html {
   // set base font-size for entire site
   font-size: 16px;
 }

 h1 {
   // translates to "make h1 element 1.4x larger than base font size (16px)"
   // resulting in a font size of 22.4px
   font-size: 1.4em;
 }

 h2 {
   // translates to "make h1 element 1.3x larger than base font size (16px)"
   // resulting in a font size of 20.8px
   font-size: 1.3em;
 }

Example: EMs in action

JS Bin on jsbin.com

In the example above the font-size of the .green-box element is significantly larger than the other boxes even though it has the same value for font-size: 1.4em;

This is due to the fact that ems are calculated relative to their parent so in the case of the .green-box element the browser will use the following calculation to determine its font-size in pixels:

16px * 1.4 * 1.4 * 1.4 = 43.9px

Example: Using EMs for width

JS Bin on jsbin.com

In the example above is set to 20em. Since the default font size of the page is set to 16px, the calculation of the width will be the following:

16px * 20 = 320

Why use EMs?