Combining Typefaces

Lastly, let's look at how we can establish hierarchy by pairing different typefaces. 0:00 We talked about how to choose a typeface earlier, so we're working under 0:06 the understanding that we should pair it based on the text typeface we've chosen. 0:09 Typeface pairs aren't always necessary. 0:13 And beginners are sometimes encouraged to only use one typeface in order to really 0:17 learn the ins and outs of good typography until they're ready to start pairing type. 0:22 You can start by staying within a typeface and choosing different weights, 0:28 or you can pair a sans-serif with a serif from the same family. 0:32 For example, FF Meta and FF Meta Serif. 0:36 Typography gets harder to execute well once you throw two or 0:42 more in the mix, but it's well worth the variety. 0:45 Here are some basic pairing rules to go by. 0:49 [SOUND] First, pair typefaces with similar proportions. 0:51 This means taking into account what we learned about letter forms from our 0:56 first stage. 1:00 A sans serif typeface with a similar x height, proportions, and 1:02 contrast to a serif typeface can pair well together. 1:06 You can even utilize superfamilies that have multiple weights of sans and 1:10 serif counterparts that work great with one another. 1:14 [SOUND] Pair typefaces with complimentary personalities. 1:17 Besides the fact that it's incredibly helpful, 1:22 one of the things I really like about Hoefler & Co's techniques for 1:24 combining fonts is how they talk about their typefaces' personalities or moods. 1:28 Check out the link in the teacher's notes. 1:34 As you pair typefaces, try to classify the mood each one is conveying and 1:36 see if they jive and play well together. 1:41 [SOUND] Pair typefaces from the same historical period. 1:44 Jessica Hische, whose immersive article on typography is linked in the teacher's 1:47 notes, has some great thoughts on this. 1:52 If you're building a site focused around a certain time period, then research and 1:55 find out as much as you can about typefaces in that era. 1:59 You might even find some pics of a storefront or 2:04 sign with a great typeface pair for inspiration. 2:06 [SOUND] Pair typefaces from the same designer. 2:09 Type designers often have a certain style that can be found 2:11 throughout each of their faces. 2:16 The style forms a common bond that holds the two or more together. 2:19 This especially works in your favor if they have a vast array of families to 2:24 choose from. 2:28 [SOUND] Lastly, explore more. 2:29 Try out different combinations, 2:31 sometimes you can stumble upon a typeface pair you wouldn't have imagined working. 2:33 It's like kale and frozen bananas. 2:39 You definitely thought they wouldn't work together, 2:42 but do they make a tasty smoothie. 2:44 A great site I love to peruse is called fontsinuse.com. 2:47 It catalogs different typefaces used in print, web, and all types of media. 2:51 It's great for inspiration on different type combinations and pairs. 2:57 Take a few minutes to check it out. 3:01 All right, now let's look at our project one more time. 3:04 I've chosen a typeface for the title of our page, whose personality 3:08 I think pairs well with the theme of the content and our serif, Alegreya. 3:12 It's called Pathway Gothic One and can be found on Google Fonts. 3:17 Notice that it doesn't have a bunch of weights or styles, but that's okay for 3:23 this specific use. 3:28 I chose it due to its tall letter forms and no nonsense look. 3:30 I mean, if the worlds are at war, then we're not messing around. 3:34 Its tough and classy personality compliments 3:38 Alegreya's elegant and energetic letter forms. 3:43 I'll set the title in this font, 3:48 Then I'll adjust our font size to 124 pixels, 3:56 as I want the title to really stand out on the page. 3:59 Looks great. 4:05 I really like this typeface pair and 4:06 feel like the body copy keeps our book vibe intact, 4:09 while the title gives it an authoritative look that fits the theme of the content. 4:13 It almost feels like a newspaper declaring a headline. 4:17 When you get back, I'll be waiting for 4:22 you in our next video on how to go even further with typography. 4:24 We'll talk about how to translate all of this to different screen sizes 4:28 through responsive design, discover more, explore variable fonts, 4:32 and get into some finer details of polishing your typography. 4:37