Results tagged “Fonts” 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]

What's that Strange Munching Sound?


Changed the font used for headings on the home page .. to Trebuchet MS, known for its modern, artsy style. (You like?) Before this, I was using Courier New, which seemed more computer techie-ish (which I also like).

Genghis KhanThis Font is Trebuchet MS

A better example of black text on white background can be found » HERE (VPS guide).

This Font is Courier New

Courier New is a mono-spaced font, which tends to consume more space (per character), forcing me to use shorter headings/titles (.. tho not necessarily a bad thing).

Regarding the text used on the home page, I still use Verdana, which can't be beat (I feel) for pure readability. Many times, I've tried to replace Verdana, but could never find another screen-font as easy to read.

Ye Olde Rad Blog II uses Trebuchet MS as its normal-text font. Not as readable, if you ask me.

On a more personal note, I am in the middle of "stuff." (Which is why I'm lagging on entries.) The kind of stuff you find wading thru a swamp infested with hungry crocodiles. (A particularly toothy one is chewing on my butt right now. Munch-munch.)


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