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

Typography for Designers

Well done!

You have completed Typography for Designers!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Combining Typefaces

4:42 with Hope Armstrong

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

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