Results tagged “Em” from Ye Olde Rad Blog III

Web Typography & the Confusing EM


Web typography. It would seem to be a fairly simple topic, no? While I was reviewing some related concepts recently, the following question popped into my head » What exactly is an em?

EM | Usage in Web Typography I've been using em's a long time, and knew they were based somehow on the letter 'M.' Wasn't sure however, if they were based on the size of the capital [M] or lower-case letter [m].

Also felt confident they were based on the horizontal measurement, but not certain. (In both cases, I was wrong.)

Trying to answer this simple question led to a surprising amount of confusion. Many sources on the web discuss ems, and detail their usage, without ever defining what exactly an em is.

Many pages are more complicated than need be. (It's not rocket science.) Finally have a handle on the topic, but my dang eyeballs are burning .. from reading so much.

First, let me answer the question I posed at the top, and therefore avoid the criticism I levied at many other sites.

An em is (drum-roll, please) » a unit of measure (.. defined by a certain number of pixels). So like inches & meters & light-years, which are also units of measure, the em is a » unit of LENGTH.

The thing that makes the em tricky is that » unlike inches or meters, or other fixed (or 'absolute') lengths, the em is a relative unit.

"Relative to what, Rad?" you might be asking. Relative to the font-sizing applied to (in pixels) its » parent element.

What this means is » the SAME font-size declaration (specified with ems) can yield DIFFERENT results (in pixels) .. when/if the parent element for each declaration specifies a different sized font. Hence, the confusion.

Reblog this post [with Zemanta]


Find recent content on the main index or look in the archives to find all content.