Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic 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

  • 0:00

    Lastly, let's look at how we can establish hierarchy by pairing different typefaces.

  • 0:06

    We talked about how to choose a typeface earlier, so we're working under

  • 0:09

    the understanding that we should pair it based on the text typeface we've chosen.

  • 0:13

    Typeface pairs aren't always necessary.

  • 0:17

    And beginners are sometimes encouraged to only use one typeface in order to really

  • 0:22

    learn the ins and outs of good typography until they're ready to start pairing type.

  • 0:28

    You can start by staying within a typeface and choosing different weights,

  • 0:32

    or you can pair a sans-serif with a serif from the same family.

  • 0:36

    For example, FF Meta and FF Meta Serif.

  • 0:42

    Typography gets harder to execute well once you throw two or

  • 0:45

    more in the mix, but it's well worth the variety.

  • 0:49

    Here are some basic pairing rules to go by.

  • 0:51

    [SOUND] First, pair typefaces with similar proportions.

  • 0:56

    This means taking into account what we learned about letter forms from our

  • 1:00

    first stage.

  • 1:02

    A sans serif typeface with a similar x height, proportions, and

  • 1:06

    contrast to a serif typeface can pair well together.

  • 1:10

    You can even utilize superfamilies that have multiple weights of sans and

  • 1:14

    serif counterparts that work great with one another.

  • 1:17

    [SOUND] Pair typefaces with complimentary personalities.

  • 1:22

    Besides the fact that it's incredibly helpful,

  • 1:24

    one of the things I really like about Hoefler & Co's techniques for

  • 1:28

    combining fonts is how they talk about their typefaces' personalities or moods.

  • 1:34

    Check out the link in the teacher's notes.

  • 1:36

    As you pair typefaces, try to classify the mood each one is conveying and

  • 1:41

    see if they jive and play well together.

  • 1:44

    [SOUND] Pair typefaces from the same historical period.

  • 1:47

    Jessica Hische, whose immersive article on typography is linked in the teacher's

  • 1:52

    notes, has some great thoughts on this.

  • 1:55

    If you're building a site focused around a certain time period, then research and

  • 1:59

    find out as much as you can about typefaces in that era.

  • 2:04

    You might even find some pics of a storefront or

  • 2:06

    sign with a great typeface pair for inspiration.

  • 2:09

    [SOUND] Pair typefaces from the same designer.

  • 2:11

    Type designers often have a certain style that can be found

  • 2:16

    throughout each of their faces.

  • 2:19

    The style forms a common bond that holds the two or more together.

  • 2:24

    This especially works in your favor if they have a vast array of families to

  • 2:28

    choose from.

  • 2:29

    [SOUND] Lastly, explore more.

  • 2:31

    Try out different combinations,

  • 2:33

    sometimes you can stumble upon a typeface pair you wouldn't have imagined working.

  • 2:39

    It's like kale and frozen bananas.

  • 2:42

    You definitely thought they wouldn't work together,

  • 2:44

    but do they make a tasty smoothie.

  • 2:47

    A great site I love to peruse is called fontsinuse.com.

  • 2:51

    It catalogs different typefaces used in print, web, and all types of media.

  • 2:57

    It's great for inspiration on different type combinations and pairs.

  • 3:01

    Take a few minutes to check it out.

  • 3:04

    All right, now let's look at our project one more time.

  • 3:08

    I've chosen a typeface for the title of our page, whose personality

  • 3:12

    I think pairs well with the theme of the content and our serif, Alegreya.

  • 3:17

    It's called Pathway Gothic One and can be found on Google Fonts.

  • 3:23

    Notice that it doesn't have a bunch of weights or styles, but that's okay for

  • 3:28

    this specific use.

  • 3:30

    I chose it due to its tall letter forms and no nonsense look.

  • 3:34

    I mean, if the worlds are at war, then we're not messing around.

  • 3:38

    Its tough and classy personality compliments

  • 3:43

    Alegreya's elegant and energetic letter forms.

  • 3:48

    I'll set the title in this font,

  • 3:56

    Then I'll adjust our font size to 124 pixels,

  • 3:59

    as I want the title to really stand out on the page.

  • 4:05

    Looks great.

  • 4:06

    I really like this typeface pair and

  • 4:09

    feel like the body copy keeps our book vibe intact,

  • 4:13

    while the title gives it an authoritative look that fits the theme of the content.

  • 4:17

    It almost feels like a newspaper declaring a headline.

  • 4:22

    When you get back, I'll be waiting for

  • 4:24

    you in our next video on how to go even further with typography.

  • 4:28

    We'll talk about how to translate all of this to different screen sizes

  • 4:32

    through responsive design, discover more, explore variable fonts,

  • 4:37

    and get into some finer details of polishing your typography.

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

Sign up