THAT Agency Design Studio Blog

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.

Share this article

Typography is somewhat of a vice of mine. So much so that a 1700 paged FontBook weighs down a shelf of my bookcase. To me, nothing makes or breaks an otherwise class-design than the wrong typeface. While a scholarly, but contemporary, type from the Palatino family is mostly universal in application, something like Terfens will not be perceived as very professional and, in turn, you or your company as not all that serious about business.

vs.

Choosing the right typeface is not only about what best fits into your website’s aesthetical agenda, but how it reads. A heavy, tight, or widely-spaced type hinders the rate at which a user is able to read your text. It is only suitable for headlines, not the body. Because the speed of reading diminishes onscreen, compared to reading from a book or a newspaper, the transition must be made as seamlessly as possible.

With all of these factors in mind, choosing the right typeface can become a daunting task. If you are considering revamping the type on your site and flipping through the pages of a FontBook is more of an investment than you are willing to make, may I suggest a nifty little utility i recently stumbled upon, UrbanFonts. They offer over 8000 free types for download; and although most of them are slag, there are still a few quality ones floating around.

To gain a better grasp of how redesigning your typeface layout will affect your website, Smiley Cat Web Design Blog provides us with a GQ Magazine example; swapping out a crowded type for one with a bit more space between letters and words. Personally, I’m not a fan of their result. It may be more attractive on page, but it reads slower, and on a medium where the majority of readers are skimming their content, such a hindrance is just not acceptable.

Share this article