Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Combining Typefaces

4:42 with Hope Armstrong

Pairing typefaces may seem tricky at first, but we’ll look at what makes a good combination.

Advice

A good rule of thumb is to keep it simple. Mixing many typefaces in one design can easily look disorganized and confusing if not done well.

Resources

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

You need to sign up for Treehouse in order to download course files.

Sign up