How to Select and Pair Fonts in your Design – Design Tips


Hey everybody, Payman again and I’m here
to do another episode of Making Information Beautiful. Today, I’m going to talk to you about one of
the things that I’ve struggled with a lot in the past and it has to do with pairing fonts,
and many designers, beginners or intermediate designers, when they get into a design program
be it Photoshop, illustrator or tools such as ours, Visme, Prezi and so on, they have
a vast array of fonts and they feel just like a kid in a candy store. So they just go and try to mix and match all
sorts of fonts together. The problem is that it doesn’t work so well. And what I want to teach you today is that there are certain guidelines that you want to follow that would allow you to pair fonts and actually have a cleaner and a more aesthetically pleasing design. So here we go. Number 1 is the types of fonts. There are actually 2 different types of fonts. There are hundreds of fonts but they fall
into 2 categories. One is Serif and another one is Sans Serif. Serif fonts and sans serif fonts: What is the difference? Serif fonts have these little teeth that kind of look like knobs and in the case of sans serif fonts, they’re kind of a modern font. They have no edges and no teeth, so a little bit more of a smoother look. And so that’s what distinguishes most fonts from each other. Those are the 2 types of categories. Now let’s talk about the difference between serif and sans serif fonts from the aspect of actual fonts. Serif fonts are like Times New Roman and Georgia and then with sans serif fonts, you have Arial, you have Helvetica, you have Lato and so on. Now, there are also fonts vs. typefaces. There are hundreds of different fonts but
there are also typefaces. What are typefaces? Typefaces: Think of them as a collection of
the design. Basically, it’s a series of fonts that kind of have a similar-looking feel to them. So in the example over here, there’s Verdana and then there’s also Lato. So Lato is a font, Verdana is a font. They’re 2 different fonts. However, Verdana and Lato: They’re actually very similar typefaces. They emulate each other and have a similar type of a feel. Now, there’s an example behind me and, in
this case, if you look at it, there are two fonts that are paired with each other. Then there’s the header which is in Helvetica. It’s a sans serif and the text below is Times New Roman. So what you want to do is utilize different typefaces. And this allows you to have a little bit of
contrast, a little bit of differentiation. Now contrast. Contrast – I’ve talked about this before and there’s a topic that I just did a few weeks ago which talks about contrast in terms of foreground versus images and text on the front versus in the background as far
as images. So I talked a lot about that and the same thing actually applies to fonts. With fonts, you can actually achieve contrast through a few different ways. So you can do that through size, you can have contrast through weight, you can achieve it through spacing, through style and also through color, okay? So there’s an example behind me and there’s a title: “Let’s Change The Way We Design” and there’s a body of text below it. So I’m gonna show you a few of these different types of contrast that are all applied to this example. Now, there is font weight. So the font weight, if you look at it, there’s “Let’s Change The Way We Design” and it has a bold feel to it, while the word design is lighter. This is the same font but it comes in different weights. So that’s one example of what you’re doing which is distinguishing the contrast between one word in the title versus the rest of the title. Now another one is font sizes. So if you notice the title, the header is actually much larger. A much larger font versus the actual content below it. And so what you’re doing is achieving contrast utilizing different font sizes. It allows you to decide what you want the audience to focus on. In this case, the majority of focus is directed toward the header itself. Now another one is font color. So if you look here, the colors allow you to engage your readers and emphasize certain elements. So, although we have the same font used in the header and although the word design is actually in a lighter format, however, the color of the word “Design” is actually jumping out at you. It is kind of engaging you and that’s
where your eyes move towards. So you can use color to achieve that. Spacing is extremely important as well. We talk about it in design all the time. The use of white space: So, in this case, by using spacing between the header and the content below it, the body text, you’re achieving
a certain sense of contrast. And, last but not least, is style. So with style, you’re talking about the
whole mechanism and if you look at this example, we’re using the modern sans
serif typefaces and so what you’re getting is a modern feel. You’re using this type of typeface to achieve that and then also your eye kind of flows from one point to another. So if you look at this example, there’s a couple of rectangles, green rectangles to the top and bottom and there’s also the
word “Design,” so it actually works like a triangle. So your eye goes from one point to another and that’s how you’re able to achieve that with the use of styles as well. And also, let’s talk about consistency. So consistency is a key element in font pairing. Although I talked about using different typefaces, you also still want to be consistent. And what you want to do is to avoid using
multiple different types of fonts with each other. So you want to stick to using a couple of different fonts. In the example above, we have 3 different
types of fonts used. Sometimes you use many different kinds. You want to avoid that. What you want to do is to stick to only 2, maybe 3 fonts. So the same content is actually used underneath and, in that case, you have a header in one font style and then we have underneath of it, the
body text and another font. So you have this contrast and yet it is actually minimal and it has a nice feel to it. Another aspect is the mood of the fonts. Different fonts can actually emulate different moods and in this case what you have is 3 to 4 different fonts used with different moods that don’t go well with each other. And so what we want to do instead in this example is use the script font with a neutral font. The neutral font can go with any type of font and the script is unique in terms of the typeface. Again, we’re pairing two fonts and they flow nicely together. Now, let’s talk about content. The content should also drive the type of font that you select, right? It’s not so much where you force to
font into the content but also the other way around. If you look at this example: “Farm Fresh
Grapes,” there is a nice image, organic grapes, I’m assuming, beautiful,
tasty, right behind of it and so the use of the font is actually related to the design. The words, the content and even the image behind it. There’s a certain context of the design that is achieved through the use of the font. Another example is this one. There’s the phrase “Good Morning” and, if you look at it, it’s going with the image behind it. So again, what you’re doing is using the content, selecting the font and complementing the actual words and this can go with the text and also with the image behind it. It’s all part of one design. Now, let’s practice this, alright? I taught you a few different concepts about
how to pair fonts, a few examples. I wanted to actually do a real experiment. Let’s do one together. In this case, I have an example behind me. The background is a little bit blurry. We
have hard-to-read text, at the same time the header and the body are both in Arial. Again, we’re going to do some font pairing. We’re also going to do a little bit of a practice exercise to put the fonts together and achieve some spacing, contrast and so on. All the 5 things I’ve talked about, we’re
going to achieve here. The first thing that we want to do is use a high-quality background. You want to select a background that goes with the design. The text is kind of hard to read but it says, “Finding Your Brand’s Visual Voice.” The image used behind it actually relates with the message. So what you’re doing is selecting the image
that goes in the background with the text and also fitting the content with the
text. Now, next thing, let me go over here. Now the text “Finding Your Brand’s Visual Voice.” Again, what we’re doing is using space wisely. By using space in this case, what we’re
doing is taking the font and taking the content and actually putting it into a smaller area, into the second half. And so you have a certain openness and also you have a focal point which in this case is starting to serve as the content area. Next, what you want to do is to visually separate the text from the background. Again, this goes back to contrast. What
we’re doing is very simply putting a shape that is dark, so it allows the white text
to stand out. There’s a certain level of transparency added to the shape. Now, next thing we want to do is to decide what kind of texture attracts people’s attention first. So “Finding Your Brand’s Visual Voice,” the word phrase “Visual Voice” is one of the focal points here. So what you do is actually reduce the size of the other text and also the phrase “Visual Voice” is in all caps, so that’s kind
of standing out. So that’s where your attention goes to first. And the next thing is: We’ve taken the text
in the last example. If you look at it, we’ve got text that’s
pretty wide and we want to follow the same scheme and achieve the same padding from the left side. We’re gonna actually reduce the font size
and also have it in the same parallel and again as a pattern on the left. So what we want to do next is to utilize a
script font because that will go pretty well with the sans serif font in the header. Now, what we’ve achieved here with all
these different elements is balance. There is a kind of clean, easy-to-read typeface set and also we have a nice hierarchy and balance to the design. And, last but not least, we’re adding
a line and that helps to create a bit of additional visual hierarchy. This was a good example for you to understand in terms of how to take those guidelines for combining fonts and utilizing the contrast in terms of the font style, color and so on to achieve a clean, harmonious design. I hope you put a few of these to work, and
it doesn’t matter if you’re creating a PowerPoint presentation, if you’re creating
infographics or just a flyer, these guidelines and these principles are pretty much the same and if you follow them, I promise you you’ll have a better end result for your project. See you guys next time!

29 comments

  • Bhadrik Jagad

    This is the best video about choosing font.
    I LOVE IT

    Reply
  • Green Banana

    great tutorial! thank you.

    Reply
  • BBanggit anggit

    tnx sir

    Reply
  • kawsar ali chapai

    awesome

    Reply
  • peutch

    San*S* serif (from the French word meaning "without").

    Reply
  • ZEN TANGO Oscar Wright

    Thank you very much – very helpful

    Reply
  • Auberjen

    Great video, thank you. Love the last section, very informative. 🙂

    Reply
  • jibur pak

    Nice vid, keep your good works

    Reply
  • Timothy Assam

    Thanx https://www.facebook.com/ThDesign-158175968228579/

    Reply
  • Abeer Sallam

    Very helpful. Thnx

    Reply
  • Hashim Puthiyakath

    The final practical example really helped.

    I found this video very helpful. Thank you very much for such an amazing video

    Reply
  • Ranjit Barhpaga

    Can you give more examples on contrast using style?

    Reply
  • Dane Custance

    Great tutorial thanks, clearly explained, great examples.

    Reply
  • Nimal Taz

    Is there any software you can choose fonts when you design logo or something? rather than going through thousand fonts

    Reply
  • Sharp Object87

    Thanks coach!

    Reply
  • Scott Duke

    Is it legal to use fonts that are provided on a program like adobe illustrator?

    Reply
  • Ihtisham ul haq

    very nice.. fantastic.. Thanks a lot….. keep it up.

    Reply
  • Haifa Radwan

    Muchas gracias 🙂 thanx

    Reply
  • Elena Shitkova

    Thank you!

    Reply
  • Saad

    Thanks

    Reply
  • whoisathome

    Sorry friend, you've got it mixed up; Verdana, Lato etc are typefaces. Verdana Italic, for instance, is a font…

    Reply
  • Ann Macuha

    What should I design first? The typography or the style? Sometimes I'm having a hard time thinking the style that matches the typography. Give me some tips!

    Reply
  • Marcos Vinícius Petri

    I always dislike the explanation that "it makes a triangle and your eyes make a movement from here to there".

    First, so what? What is the reason that making the eyes of the reader going from here to there help? Second, how can you say that? I know there are studies where scientists tracked people's eyes. But those worked from specific controlled tests. What is the point here?

    You can put those retangular bars if you want and if you think it makes more pleasing to read. But say that "it makes a triangle and your eyes go from one point to another" is nonsensical because it serves no purpose in the example here.

    Reply
  • Beni

    Thank for sharing this knowledge!

    Reply
  • Hiếu Minh

    useful <3

    Reply
  • Alireza Mahdavi

    چه سوپرایز شدم وقتی گفتی پیمان موفق باشی 💙

    Reply
  • Pankaj Verma

    Great video.

    Reply
  • Rick Hema

    Thank you very much, great tutorial.

    Reply
  • Department Chair

    I am sure your video is well-intended, but I lost interest as soon as I saw "San Serif" written on the slide behind you. San Serif reads as Saint Serif; it should be Sans Serif, meaning without serif. Anybody who teaches typography should know that.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *