Responsive Web Typography v2

Anatomy of Letterforms

Responsive Web Typography v2

Check out a free preview of the full Responsive Web Typography v2 course

The "Anatomy of Letterforms" Lesson is part of the full, Responsive Web Typography v2 course featured in this preview video. Here's what you'd learn in this lesson:

After introducing serif and sans-serif typefaces, Jason provides a methodology on how to make two typefaces work together.


Transcript from the "Anatomy of Letterforms" Lesson

>> Jason Pamental: A little bit of an anatomy. We've got this word, Handglovery, for whatever reason, this is one of those words that ends up being used in type samples all the time. Mainly because of the variety of letter forms in it. But on top is a serif typeface, and on the bottom is a San Serif, so those are the two basic distinctions that you'll most often make in the type choices that you will be working with on the web.

Traditionally, a serif typeface has a little bit more acceptance in text. It's what you'd see in most books, it's certainly what you see in print far more often, especially, historically. San Serif typefaces, well, they were actually introduced in the early part of the 20th century, that's where they started to gain popularity.

On screen, they were very popular, even going back to the early 90s, because they actually were easier to draw on screen clearly. Read very coarse resolution monitors, so fine detail would get lost. The type rendering from the different operating systems was pretty bad, so everything would look really chunky.

That's why you ended up with typefaces like, Verdana, that were very sort of big and open. It's a San Serif typeface, but it can render on the cheapest CRT screen. And it would still be readable and clear. So designs have gotten a lot better, but that just means now we have a choice.

If we prefer stylistically to use one over the other, we know that it's still going to be nice and legible, and readable no matter what the device. So, between the top and the bottom, it's interesting, I mean, I love getting into the names of all of these different little tidbits.

But that's a whole day, or week, or month, to get into some of those terms. The more important thing, I think, is to think through how do they work together, and how do you make some decisions about how to pair things. So what I tend to look for, when I'm starting to think through type, is,

>> Jason Pamental: Is there a relationship. Let's say we want to create a pairing of type. What's the connection? So I wanna use one kind of type for headings, and something else for the body copy. I want there to be a relationship between these two typefaces. I tend to look for similarities in width, overall shape.

Is it narrow, is it round? Is there a lot of stroke contrast? On top, there's a lot of very thick and thin, on the bottom, it's very even. So those are the differences that you want to start to look for. And I'm gonna look at a couple others.

The anatomy of letter forms, again, it's also extremely high contrast. The very exaggerated difference in the thickness and thinness of the stroke, and it's got these really beautiful serifs. And it's actually designed by a friend of mind, if you are interested in expanding your collection of type, check out font of the month club, from David Jonathan Ross.

It's like six dollars a month, and you get a new font. I think it's $6 a month if you subscribe for the year. But every month, he sends out something new, something interesting to play with. He sent out a couple different versions of Roslindale, which is what I'm using up top there.

And then, he just sent me a variable version of it, too. So he's doing some really interesting things, in any event. So overall, like that lowercase o, notice up top, it's quite a bit narrower, and then, it's got that contrast, and thickness, and thin, and on the bottom it's almost a perfect circle.

So you'll start to notice, in a few different letter forms, where you see the bigger difference is, choosing two typefaces that have an overall similar geometry, even if other things are different, will help you find typefaces that work well together.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now