1. Computing

Discuss in my forum

Jennifer Kyrnin

Questions about the EM size unit

By June 26, 2010

Follow me on:

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.

Comments
June 27, 2010 at 12:17 am
(1) Brad K. says:

So, if I rush off to find an additional reference for em, would that be the same as an em dash?

But then, should I emphasize the results with an HTML em tag, since the em tag doesn’t have anything to do with the style=”font-size: 1.2em;color: red;line-height: 0.98; margin:0.3em;padding: 0.25em;background-color: #C8A2C8;” (typography) em?

June 28, 2010 at 10:27 am
(2) Ben says:

Although I am a web developer today, my first job was in a print shop that used hot metal (lead) type. So, I think I may be able to offer a little history on some of the terms we use today for web design.

Many of the terms we use came from the hot metal era of print, which lasted for about 400 years. Although I can’t tell you exactly where the origins of the word em came from, I can tell you how it was used in the hot metal days. As we understood it at the time, it was taken from the original fonts which usually contained an upper and lower case “m” and the cap “M” was usually a square of the typeface size. In other words, in a regular 10 point typeface the em would be 10 points wide, there was also an en which was half the size of the em. When a font of type was ordered it contained a certain amount of each character, spaces, punctuations, etc. The space’s and dash’s widths were based on the em. It took 3 word spaces to equal an em, en spaces where used when separating numbers and to fill out the line you may use 2x or 3x em spaces. Of course the em and en dashes had their purposes. The Linotype machine, which produced lead lines rather than individual pieces for each character, where used mainly for the text of a page and they used a space band that the machine could adjust to various sizes to fill out a line, but the en and em spaces and dashes where used on the Linotype also. Another important machine, which came along well after the Linotype was the Ludlow, which was used in place of hand (movable) type. Because of the cost-efficiency, the Ludlow could not eliminate hand type entirely, it took the computer to do that.

When computer software started using typographical terms they dropped the word “typeface” and used the word “font” instead, even though in the hot metal era, font was used only when purchasing the physical lead pieces of type from the foundry. Compositors, proofreaders and linotype operators, always referred to type styles as a “typeface”.

June 29, 2010 at 8:08 am
(3) Walter Miller says:

Like Ben, I was an old hot metal printer. I agree that an em space was simply the width of the current font. When working in 18 point an em would be 18pts wide. An en space was simply half the size of am em space. A pica was 12 points and there were traditionally 12 picas to the inch. Display ads were set in inches (width and length) but within the ad all measurements were called out in picas and points.
It has been over 50 years since my hot metal days…but some things die hard.

June 29, 2010 at 11:21 am
(4) Hal says:

I kind of agree with Walter and Ben and also bring a measure of lead experience to the party. I set many a text block out of a California Job Case and can still recall the em and en space location. There was also a spot for 2em and 3em spaces. The em was always the square of the font body and though obviously related to a type face size usually was larger than the actual typeface face because of lowercase descenders. I don’t recall the capital letter M ever being the full size of the font body or necessarily being square. An en was always 1/2 an em and the em was always the square shape of the font body size. A 12 point font had the em 12 X 12 points but the type face themselves could be of differing sizes depending on the their design. I am digging for my school text (Printing Department, Cass Technical High School – Detroit Class of 1950) which may have better definitions. Bottom line, the em size was NOT related to the letter M though it sounds like it should be.

June 29, 2010 at 12:08 pm
(5) John Mutrux says:

Bravo, Ben, Walter and Hal. When I was taught to hand-set type (in college, in 1970) the em was defined as the square of the point size of the font. The em in a 12pt font is 12 points square, the en is half an em. I don’t recall being taught any connection with the “M” character.

But I have a question of my own. I can’t remember what the wooden blocks were called that took up space when the composition was locked up in a chase. It was something like “lumber,” but I can’t remember

June 29, 2010 at 11:54 pm
(6) John C. Massam says:

I was a journalist in the hotmetal days, and I enjoyed reading all the comment above. However, I don’t believe that the capital letter M was SQUARE — it certainly was NOT and is not in the Condensed typefaces. Ask the Printing Union in your country to look up old books on printing and journalism, and if they are co-operative they will give you a real definition. Meanwhile, I recommend for webpages that people use POINTS for fonts, and PIXELS or sometimes PERCENTAGES for Tables, Images, etc. What do other readers think?

Leave a Comment

Line and paragraph breaks are automatic. Some HTML allowed: <a href="" title="">, <b>, <i>, <strike>

©2014 About.com. All rights reserved.