Type Styles, Selection, & Pairing

[00:00:00]
>> Jason Pamental: So there are a few other kinds of classifications that you will see. Serif and sans-serif are kinda the easy ones. Slab serif, we tend to see a lot of. Ever since web fonts became popular, the two runaway favorites, when web fonts first came on the scene, was Museo and Museo Slab.

[00:00:21]
And those were type faces that worked beautifully together. One was a sans-serif, one was a nicer of heavy slab serif which works really nicely for large headlines. Monospaced is what you see in your code editors and that is exactly what it means, every letter takes up the same space.

[00:00:38]
So it's a lot easier for you to read things in a more consistent manner when you're looking at code. Display type faces is a bit of a catch all, that really just means ones that are generally better at large size. So something that's really specifically designed as a display face might really only work at say 24 or 36 or 48 points or pixels, as opposed to being really readable for body copy, which might be rendered at 16.

[00:01:09]
Script, really popular on wedding invitations and lots of other printed material. Not quite as popular on the web but you still can use them to great effect and there are a lot of really interesting. Ones that are somewhere between a script typeface and something handwritten, generally referred to as lettering.

[00:01:32]
But I met a woman, Jess McCarty, who has a type foundry that really just focuses on lettering fonts. And she makes web versions of them, and they're available all over the place. Magpie Paperworks, she really does some beautiful, beautiful work. And that can really create a really interesting effect, when used sparingly, on the web.

[00:01:58]
You wouldn't necessarily want to have your body copy in it, but drawing people in with something that looks really unique and interesting and really different from what you'd see somewhere else. It works great on the chalk art that you see outside stores. There's no reason that it can't be effective when you're using it on the web.

[00:02:17]
Blackletter probably not the most common choice to use on the web. Basically if you look at the name of many newspapers, it's set in some form of blackletter like in New York Times, in the Washington Post and then handwriting is one. I had to make sure that it's not Comic Sans because that's really just not worth including.

[00:02:42]
So some other type examples. Things that you can look for are, you notice on the left, it's very stable. It's very centered, very heavy, it's all about buying war bonds. So this is about relating to the content. So when you think about what you're working on, again good type decisions that like, good type decisions, it's one thing to simply have a nice pair of type faces or fonts that work well together, but do they relate?

[00:03:15]
Are they adding to and amplifying the message? So, buying war bonds was a serious thing. So this was probably back in the 30s, when that was designed. And that was the whole goal, it's a serious thing, we want you to do this, we need your support, we need you to help support the coming war effort.

[00:03:38]
As opposed to the right, which is far more whimsical and playful. It's all about buying a bike. So you can see this totally different mood and totally different style that's imparted when you look at the left and the right. And I think that if you want interesting type inspiration, go google vintage posters, and just start looking at things through different periods in time.

[00:04:01]
It really does give you a great look into what are some of the common themes and trends in typography. Will give you a lot of inspiration, also for color palette, too.
>> Jason Pamental: Again, this is another one that really relates to time and place. These travel posters that I found for Miami and Cuba, a lot of them were very specific to the 20s and 30s that was very kind of a big time for that kind of tourism.

[00:04:33]
So it really did evoke that sort of somewhat art deco, but a little bit beachy kind of feel that's very particular to design that you would see from Miami and Cuba in that time.
>> Jason Pamental: And then place. It's hard to imagine something written and designed in type set that way, not being related to France.

[00:04:58]
There's just something about that kind of style that is very evocative of the time and place. So these are just a few different examples that I wanted to show you that power that you can get from making great typeface choices. They may not be the things that you do necessarily on the web, but you can.

[00:05:17]
There's no reason why if working on a project for a company that has a particular relationship, if you're working on a company that the founders are Dutch, look at Dutch typefaces. There's a lot of really beautiful ones. Look at some of the color palettes. I did some design work for a friend of mine who was trying to start a cycling villa in Spain.

[00:05:41]
So I bought a book on Spanish graphic design, and looked at the typefaces and the type designers. I looked at the color palettes. All of those things were, kind of, my way in to see a culture that I didn't really have any connection to. So those are just some different avenues, whether or not you've been gone and studied design, anybody can do this.

[00:06:05]
Doing a little bit of googling to see, google type designers from this area or this decade. You'll find stuff online. It'll start to give you a sense of how to make these connections and make the type relevant to the thing that you're putting out there. And now again just looking at how you would pair them together, these two typefaces similar to what we were looking at with that type anatomy slide, very similar top and bottom in overall geometric proportion.

[00:06:41]
This is also designed by the same person. That's another really easy way to look for typefaces that will go well together, even though it might not be obvious. If they're drawn by the same hand, they're going to be some inherent similarities, things that might not be obvious on the surface, so even in Google fonts you can figure out who designed a given typeface.

[00:07:02]
Go look at some other things that they designed. And you might see some pairings that would be a little bit unexpected. So down below is Avante Garde, above is Lubalin Graph. It was designed by Herb Lubalin, I think about ten years apart, but one clearly grew out of the other, and that's why I think they work really nicely together.

[00:07:22]
This is another example that actually comes from, I guess 1930s, I think it was a Lincoln brochure, and this was a pairing of Futura and Bodoni. So, Futura was this very sort of futuristic art deco, kind of modernist Sans Serif that you can see in the top headline, where Bodoni has been around for centuries and it's this really classic serif typeface.

[00:07:54]
But they use them together really effectively, and that's, I think, a good example of what you can look at when you start to work on your own projects to get a sense of things. You don't have to go with kind of the web expected Slab Serif headline and San Serif body copy.

[00:08:11]
The screens are really good, the phones we have in our pocket have 300 points per inch. The screens that we have on our laptops are nearly as high res so they can draw the shapes really nicely. There's no need to shy away from having a more delicate typeface for the body copy, because it will kind of read very nicely on a good screen.

[00:08:30]
And the thing about Serifs, when that's what we're used to looking at, is it connects the letters. Those Serifs kinda create a joining between them so it actually will flow a little bit more easily, and really kind of help you kind of move along the line of text and take it all in.

[00:08:47]
So when used effectively, a Serif for body copy can be really quite elegant.
>> Jason Pamental: You can get fonts anywhere. A lot of people just directly go to Google and that's what they look at are the free ones. But fonts.com, Typekit, MyFonts, TypeNetwork, they all have pretty accessible, pretty inexpensive licenses for fonts.

[00:09:16]
So there's no reason why when somebody is spending a big chunk of money on getting a website or an app done, find out what their brand fonts are. Find out if they're available. Make sure you keep that consistency rather than just going with something that kind of looks like it.

[00:09:36]
Because chances are it's available. Adobe is what's behind Typekit, Monotype is who's behind Fonts.com. Those are the two largest type companies in the world. It's almost unheard of for a typeface used in a company brand to not actually be available on the web. And don't just go by whatever style guide they hand you, because most style guides these days have not actually been written to take into account that you can use real type on the web.

[00:10:02]
A lot of them will still say here's what we use in print, just use Arial over here. We need to put Arial out to pasture, we need to actually embrace using the brand type face because that's what builds a connection. That's what will create that unconscious tie between the user and the organization or the brand that will build that emotional connection and keep people coming back and really set things apart.

[00:10:29]
And so, we went from millions of websites using Arial to millions of website using Open Sans. It's not that I don't like Open Sans, it's a well done typeface, but if everybody is using the same thing, that is the simplest way for you to stand out, is to use something a little bit different.

[00:10:49]
As I said, most of the techniques that we use in print are available in CSS and even some things that we can only do digital. So now we'll start to look at actually how some of these things are implemented and see some stuff on screen and in code.