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
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
- Hoefler & Co's techniques for combining fonts
- Fonts in Use
- Combining Typefaces, Tim Brown
-
A Guide to Combining Fonts
- Stay within a typeface and choose different weights.
- Pair a sans-serif with a serif from the same family. Example: FF Meta & FF Meta Serif by Erik Spiekermann.
- Mixing different typefaces:
- Select typefaces with similar characteristics: similar x-height, characters with similar shape and proportions.
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