Do You Know What Em Actually Stands For? I Just Learned

You know CSS, right? Cool.

And you know ems from CSS, right? Cool.

Do you know what an em actually is? I’m not asking if you know how they work, mind you — any CSS vet can tell you they’re handy-dandy little relative units for sizing things based on contextual font size. I’m asking if you know what an em is. What “em” means. Where it came from.

I didn’t.

I never really thought about it, honestly.

I put about as much thought into ems as I put into spoons. That’s to say, I didn’t think about them.

I always considered ems, like spoons, as simple tools. I know exactly how these tools work and use them with effortless mastery. I no longer need to think about them. I reach for a spoon when I need to shovel Honey Nut Cheerios into my face. I reach for an em when I need to size a piece of typography relative to the font size of its parent container.

No thought required.

Knowing how something works is different from knowing what it is, though. That was a fun little lesson I recently learned. How? It all started with eavesdropping.

It All Started With Eavesdropping

A few days back, while waiting for a coffee order, the lady next to me shouted towards her phone in that privacy-ignorant way we humans tend to exhibit in crowded places. It sounded like she was talking about CSS. I like CSS and it was clearly a public conversation. Naturally, I started listening in. Intently listening in. Conspicuously listening in. I may have even cocked my head and leaned closer to make it obvious I was listening.

Intent as I was, I couldn’t follow the conversation. The lady kept mentioning EMs (pronounced ee-ems). “What’s all this about ee-ems? Engineering managers?” I thought. It finally clicked when she referenced Markdown and needing to size headings.

”Ooooh, an em,” I said aloud. She glanced askew at me and noticed how intently I’d been listening, head cocked and leaning closer.

Her order came up. I leaned back out as she grabbed her cup and walked away, then I lingered on my thoughts. I was stuck on that ee-em thing. Is em an acronym? If so, what does it stand for? Is it short for something?

I’d used ee-ems/ems for years; I knew their ins and outs and quirks and employed them in app after app. Here I was, though, wondering whether the unit was an acronym, abbreviation, or neither.

As any intrepid dev does when faced with a curiosity, I hit the Googles. More accurately, I started to hit the Googles. I got as far as keying in “what does” before my coffee order came up. I snagged the brew, walked away, and forgot the whole thing.

It Continued Over Shoveling Honey Nut Cheerios Into My Face

I hadn’t given ems a thought for days. Finding a stale mobile browser with a mysterious “what does” half-tapped into the search bar didn’t even jog my memory. However, the Honey Nut Cheerios box did.

Quick aside! “Honey Nut Cheerios” is unwieldy and I’ll refer to them often. I don’t wanna keep typing “Honey Nut Cheerios.” I don’t have an aversion to acronyms, either, dev prol that I am. In fact, I love acronyms. From here on out, Honey Nut Cheerios is gonna be HNC.

As I reached for a spoon, I eyeballed the HNC logo and thought about text-based branding. I dig text-based logos, especially when they can be created entirely in CSS. Not having to mess with optimizing images or SVGs is about as sweet as a box of HNCs.

From there, I started thinking through how I’d create the HNC logo: the positioning of each word, what font(s) I’d use, and how I’d scale the text. Normal breakfast thoughts.

And with that, the em/ee-em thing came rushing back.

I whipped out my phone and finished what I’d started while waiting for coffee a few days earlier: “What does em stand for?”

Em Doesn’t Stand For Anything

Em is not an acronym, nor is it an abbreviation.

Em is a word. It’s a standalone word like baseball or tenacity. Em is the alphabetical representation of the letter M. Em is how you spell M.

So there it was! An em is an M. I’d sated my curiosity and solved a mystery I didn’t know needed solving. Now, I could go back to not thinking about ems at all.

…

… …

… … …

Wait, wait, wait, wait, wait … so when I specify 2em in a style rule, I’m actually saying two Ms? As in, MM? What the hell sense does that make?!

Me

Lots, actually.

The Printing Press

So not so fast, fin.

First, let me disclaim: I didn’t go too far into the em’s origin story. I did some light Googling and clicked through a few links from Wikipedia’s confusing and recursive writeup on the whole thing.

Blah-blah-blahing Wikipedia’s unintelligible diagrams and details on metal type and line heights and points, the short/skinny of it is that an M was the biggest letter you could make on a printing press back in the day. Capital Ms were square, occupying a character block’s maximum height and width. As such, the capital M — the em — became the defacto way to measure things within a font family relative to itself.

I am okay with it if I got that synopsis slightly wrong. This isn’t a post on the obscure workings of ancient printing techniques. It’s a post about curiosity and learning new things. Printing press mechanics aside, I learned that an em was an M. That’s why ems are called ems.

That little piece of typography history is slick and fun.

Ems evolved. These days, ems have nothing to do with Ms. For one, capital Ms are no longer square. Also, in modern fonts, Ms and em dashes and em spaces are rarely 1em wide.

Even so, digital ems still kinda work the same as em units back in the days of metal type: they represent the size of the currently specified font relative to itself. The font size is the size of the em, regardless of whether that’s 16 pixels or 10% the height of a viewport or the size of an old printing press character block.

Em and Ms

And so it was. After all these years of using ‘em (<— see what I did there?!), I finally bothered to learn why an em is called an em.

I never thought em was an acronym, honestly. That’s why the ee-em thing from the coffee lady’s conversation sounded so odd. Maybe I thought it was short for something, like an <em> tag representing emphasis. Had I given it much thought, I’d probably surmise em was a gibberish name for some arbitrary unit, like inch or meter or ounce.

But no!

The whole experience put me on a “What else do some of these things mean?” kick. It warms my heart to know ancient CSS can still surprise me. After wrapping this post, I’ll probably check the etymology of inch, meter, and ounce. I’m also curious about which nuts mix with the honey in my bowl of HNCs; I’ve never been able to quite place the taste.

If you keep your eyes and ears and head space open and stay curious, you can discover some cool new shit, even in the very familiar. That’s what I’m taking away from this.

Thanks, ems.