I have gotten a few comments and emails about the EM size unit. There is some disagreement about where the term came from and what it means. Below I'll list some of the sources I found indicating that the EM was named after the letter M and was used to measure horizontal type sizes. Of course, over the years, the meaning has changed. After all not all fonts have a letter M, and as web designers we are more concerned with the height of a font than the width of one of the glyphs.

With CSS an em is the default size of the font in the browser rendering the font. This is confusing because every browser can have a different default size. Both because browsers are different and because users can change the font sizes to make text more pleasant for their viewing. But, 1 em = the default height of the font of the parent element.

Sources of My Information

According to the W3C:

Named after the letter "M", the em unit has a long-standing tradition in typography where it has been used to measure horizontal widths.

According to Guistuff (in the "Unit: Ems" section):

One 'Em'(1em) is equal to the height of the capital letter "M" in the default font size.

What's interesting about this site, is that they also provide examples where you can see em sizing in action.

There is one site, BigBaer.com that I found that gives a slightly different explanation of the em unit:

The em unit traces its origin to the em box as used in print typography. The actual spatial rendering of an em is dependent on the glyphs of the font used.

However, I can't find any information about how an em-box is sized (beyond that it's up to the type designer) nor can I find any other references to the em-box as the basis for the em sizing unit.

The information I've found about em-boxes is that that is the box around a given font as determined by the font designer. And the em-box includes in its height the distance between lines of that particular font face, as well as the height of the font itself. (According to the University of Minnesota, Duluth.)

The Important Thing About Ems

Ultimately, as web designers, how the em was originally developed as a sizing method is less important than how it's used now.

What you need to know is that 1em is equal to the default size of the font in the current browser. 2em is twice as large and 0.5em is half as large as the default font size.

Sites like the W3C recommend that you use ems as font size units because then the fonts will scale with the device.

if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion.

Thanks For Your Help

If you know of references explaining what the em was originally defined as, I'd love to see them. Please post a comment with the URL or other bibliographical information. I strive to have the information on this site correct, but I also strive to base that information on verifiable and reputable sources.

Questions about the EM size unit originally appeared on About.com Web Design / HTML on Saturday, June 26th, 2010 at 19:37:04.

Permalink | Comment | Email this