Lesson 3/12: Understanding Typography

In the previous lesson, you were supposed to think about why Twitter has updated the way they display information about a tweet when you click on it. As you may have noticed, while the Use Case and User Persona are pretty much the same, the technology has changed over the years. To stay consistent between mobile and web platforms, it makes sense to think more "vertically."

You can start to see the "layers" of design at work when you think this way. Even when some factors stay the same, when others change, so does the solution.

The "layers" in typography

There's no better illustration of the "layers" of design than the art of Typography. It's a perfect blend of some of a couple of the main "layers" that I talk about in Design for Hackers: the medium, technology, and culture of a typeface largely dictate that typeface's form. Yet, letters can only differ so much from each other. You can't really have an "X" without having two lines crossing diagonally.

That's why the 3rd Chapter of Design for Hackers is called "Medium and Form in Typography." The medium, or whatever tools a letter is created from, plays a huge part in how that letter will look.

For example, you can clearly imagine the tip of the pen that was used to create these "blacketter" style letters that were commonly created by scribes in the Middle Ages.

[blackletter from the Middle Ages]

Take another look at that. Think about what angle the pen was held at. Imagine the direction of the strokes. Pick up a regular pen and make the same strokes. (Obviously the result will be very different!)

Distinguishing two typefaces

You're probably familiar with the differences between serif and sans-serif typefaces (serif typefaces have those little "feet" on the letters), but how well can you distinguish between two serifed typefaces?

For example, can you tell the difference between Georgia and Garamond?

Here's a hint: Garamond has been around for about 500 years. It's one of the earlier fonts used in printing, and is therefore really heavily influenced by lettering that was scribed by hand.

On the other hand, Georgia was designed in 1993, especially for use on computer screens.

Pop Quiz: Which one of these typefaces is Garamond? (click to answer)

Think this is Garamond? (click to answer)

Go ahead and click on one, even if you have noooo idea. There's some nice explanations that can help you tell the difference when you click through.

More on typography later
Typography is an incredibly expansive topic. The purpose of this lesson is just to give you an idea of what makes typefaces the way they are. In later lessons we'll cover establishing visual hierarchy in typography, choosing and pairing fonts, and typographic etiquette.

Chapter 3 of Design for Hackers is probably the book's most extensive and interesting, covering the entire history of typography. Learn about how some of your favorite (and less favorite) typefaces came to be.