Typography 101

07 March

Typography 101

Back in January, I rambled on about the importance of typography on the web. But I've found that I skimped over the definition (the art and technique of composing printed materials from type), and failed to present a few of the more prevalent types and what characterizes them.

So we're boarding the figurative school bus and traveling to the Museum of Typographic Style and History—which just so happens to be figurative as well.

The subject may come across as a bit stuffy and something of insipid theses, but is certainly worth familiarizing yourself with; typography, as with any element of design on or off the web, is essential to the cohesion of the final product.

There are two families of font that typically comprise web designs—Serif and Sans-Serif.

Serifs—what I will cover in this post—are mostly confined to body text. It is the style that fills the pages of books, and so it is the most suited for long passages of text. On a side note, when used in logos, Serifs can set a distinctive and more refined theme.

Sans-Serifs are types commonly used for headlines, header text, and logos. However, they have increasingly seeped their way into sites where content is not a focal ingredient.

What I meant to say is… Sans-Serifs reek of chic contemporary aesthetics, whereas Serifs are traditional and lend text an air of sophistication and bookish familiarity.

What are serifs? Serifs are commonly referred to as "the legs" of a type.

In Japanese, it translates to "fish scales" and in Chinese, "forms with/made with legs." Personally, I call them as I see them and opt for "the feet." As serifs are the chief identifying trait of the type, they function as its moniker.

There are two classes of Serifs.

Andate Serifs are more organic and mirror book type.

Abrupt Serifs, as the name implies, are a little blockier and more rigid than Andate Serifs.

By memorizing some of the following Serif-terminology, you can either impress your friends by saying something to the tune of, "I can't say I really care much for girth of that A's counter," or you will just come across as insufferably pretentious.

In the diagram below, I've deconstructed "Solidify ff" into a handful of useful terms.

The proper Serif type is going to be the most engaging element of your site; it is what the user will spend the most time interacting with; it keeps their movement across a line of text fluid and makes transitions between sentences and paragraphs seamless.

TAGS: Web Design, General