Pairing Fonts

[00:00:00]
>> Sarah Drasner: Okay. So some rules that you can follow. Again, you don't have to listen to me. You don't have to follow these. But if you're looking for rules to follow, that kind of do well for you, these are good ones. You pair topography. You don't just use one font for the entire site.

[00:00:15]
It's nice to use a couple of things together. Just like a color, right? You might use like a blue but you probably want an accent. So when you're pairing using one display and one sans serif or using one serif or in one sans serif. Kind of finding things that are a little bit opposite from each other works with typography too.

[00:00:36]
Not more than three. Don't use more than three for a number of reasons. First of all, it makes your design look like a ransom note. [LAUGH] Second of all, it actually is really costly performance-wise. Fonts can really weigh down your sight. It's up there with loading a lot of scripts because for every character you're loading a number of glyphs that are like SVGs and and things like that like it has draw all those lines onto the screen.

[00:01:01]
So don't load up your site with too many of them. Not more than three specially in the beginning, just try for two. Unless you're using some sort of accent somewhere or something. Don't pick types that are too similar to each other. You might think these look kind of like each other, they match, that's not a good thing actually in font pairing and I'll show you why.

[00:01:24]
This is actually animated, I will show you that part later when we get to the prototyping section, but I carefully chose those two fonts because they are very different from each other, right? The body is like a sans serif, that's very, very different from this kind of display serif that has these kind of curvy edges and they work well together.

[00:01:44]
You can even see how you can use the sans serif in two different ways, I used it as some body and then also with the small caps version in some small areas. So even if it's just those two fonts you can change up the way that you use them in the letter spacing to change the way that it works.

[00:02:03]
You can also see some elements of the complimentary colors thing here too. So Google Fonts has this nice pairing thing. You can kind of test it out first on their site. So if you go to the specimen you can see. So these are these two fonts put together.

[00:02:20]
So we've got Playfair display and then Josefin Sans and I can use that or flip them around or anything. I think this was supposed to be the flipped around and I didn't do that right. Here's an example of doing it wrong, Leto is really good for body text because it's kind of a little bit boring, like not super boring but pretty boring.

[00:02:43]
And Oswald is this kind of condensed font that's a little bit harder to read, it's really good for titles but if you look at, if you use it, if you don't use it as a display, you can see how that would be really illegible. Whereas if I switch them that's nice, the Oswald is bigger and bolder so it works really well for something like a title.

[00:03:04]
And Leto is a little bit boring so we've got it in a body text, which is a good thing for a body text, you don't want to much going on in a body text, right? Leto and Open Sans, this is bad, they're too similar. They almost look the same.

[00:03:20]
It's kinda like when you meet somebody's sibling and they look a lot like them, but just a little different. And you're like, it's like you took your face and messed it up a little, [LAUGH] like, not exactly right. So they're almost the same, but just slightly messed up a little bit.

[00:03:36]
Your eye kind of knows that they're a little bit different. So it just ends up feeling not cohesive. If you don't want to pair things yourself because you're not good at that king of thing or your not interested in that kind of thing, Font Joy is pretty awesome cuz it allows you to make all these different font pairings, so it kind of uses machine learning to figure out different font pairings that will work.

[00:03:58]
And just like the coolers generator, you can just keep going and hitting the space bar until you find stuff you like. Still has that lock option too. If you find a body copy you really like and you wanna change the other two out, you can keep going out that way, super nice.