Em Sizes on Web Pages
Before we delve into the origins of the em unit, I want to make sure that everyone understand what an em is on a Web page. If you define a font-size as 1em (
font-size:1em;) you are telling the browser to set the font height to the same height as the parent element default height. Understanding how big an em is can be challenging. But for the purposes of this article, you should know that in web typography, an em is based on the font height.
In Print, Ems Were a Unit of Width
The origin of the term 'em' is as old as movable type. But before web pages, it was a unit of width or a ratio of width to height (often thought of as an em-square or em-box). I am not a print designer or typographer. As far as I know, ems still are a unit of width when working with movable type or printing.
The Term Em Was Named after the Letter M
I have found many different sources that indicate that the em was originally named after the capital letter 'M'. Here are a couple of online sources that reference this:
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:
One 'Em'(1em) is equal to the height of the capital letter "M" in the default font size.
There are also a number of dictionaries from many years that reference this.
According to the Oxford Pocket Dictionary, sixth edition, 1978:
em (print) Unit of measurement equal to space occupied by m.
According to The Concise Oxford English Dictionary, Twelfth edition. 2010:
(Printing) a unit for measuring the width of printed matter, equal to the height of the type size being used.
a unit of measurement equal to twelve points.
- ORIGIN C18: the letter M, since it is approx. this width.
According to Webster's New Practical Dictionary, 1953:
The space in a line formerly occupied by the letter m, then a square type, used as a unit to measure printed matter.
I also found some typography books that mention it.
According to Words Into Type, third edition, 1974:
Another unit of measurement in printing is the em, which is the square of the body size of the type. The name originated from the fact that the body of a letter M in a normal face is the same number of points wide that it is high. The amount of type in a piece of composed matter is measured by ems of the size of the type in which it is set; the work of compositors is measured by the number of ems they set.
According to The Desktop Style Guide by James Felici, 1991:
An em is the basic relative unit in typography, and its value is equal to the point size of the type in which it is used. It was originally based on the width of an uppercase M, but this character in most current typefaces is typically not a full em in width.
Ems, Em-boxes, and Em-Dashes
The first thing you should be aware of is that these are really all related, but they are like cousins rather than all the exact same thing.
The em is a unit of width (and now on the Web, font height) based, originally, on the width of the capital-M in a typeface. But, as any international designer knows, not all typefaces have a capital-M (for instance, Simplified Chinese). So the meaning moved away from width to define the height of a font face for web design.
The em-box or em-square is related to the em because it was the invisible box around a type glyph that typographers used to define their type. In most Western typefaces, the capital M was often the largest letter in the alphabet and so a box around that glyph would typically enclose all other glyphs as well. One thing to note is that while the term em-square is often used, it does not mean that the capital M has the same height as width. In some typefaces it might, but square in this instance is just referencing that the rectangle around the glyph had 4 right-angle corners. In other words, a rectangle or square.
The em-dash () is often written incorrectly on web pages as --. It was originally the same width as an em, which was originally the same width as the capital M in that typeface. If you're curious, the en-dash () is half the width of an em-dash, which was also originally the width of the capital N in many typefaces. An N is half an M or an en is half an em.
What do you think the origins of the 'em' are?
I have already received some great stories from people detailing their work in the movable type era and hot metal printing.
… 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. …
Walter Miller says:
… 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. …
According to Hal:
… 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. …
John Mutrux writes:
… 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. …
And John C. Massam reminds us:
… I don’t believe that the capital letter M was SQUARE — it certainly was NOT and is not in the Condensed typefaces. …
What do you think? Were you taught that the em was something else? Share your stories of working in the hot metal era or some other time, and what you believe an em is.