Hey everybody, Payman again and I’m here to do another episode of Making Information Beautiful.
Today, I’m gonna talk to you about one of the things that I struggle 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 they can just like a kid on 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 wanna teach you today is there are certain guidelines that you wanna follow that would allow you to pair fonts and actually have a cleaner and a more aesthetic design. So here we go.
1. Type of fonts
Number 1 is the type of fonts. There’s actually 2 different types of fonts. There’s hundreds of fonts but they fall into 2 categories. One is Serif and another one is San Serif.
Serif fonts and San Serif fonts, what is the difference? Serif fonts have these little teeth there kinda like knobs and in the case of San Serif fonts, they’re kinda more of a modern font; they have no edges and no teeth, so a little bit more of a smoother looking.
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 the Serif and San Serif from aspect of actual fonts. Serif fonts are like Times New Roman, you know there’s Georgia and then with San Serif, you have Arial, you have Helvetica, you have Lato and so on.
Now, there’s 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 they kind of have a similar looking feel to them. So in the example over here which you see is there’s Verdana and there’s also Lato.
So Lato is the font, Verdana is a font, they’re 2 different fonts. However, Verdana and Lato, they’re actually very similar typefaces.
They have an emulate and similar type of a feel to each other. Now, there’s an example behind me and in this case, if you look at it, there’s 2 fonts that are paired to each other. There is the header which is in Helvetica, it’s a San Serif and in Times New Roman the text below it.
So there is this way which you wanna do is to utilize different typefaces. And this allows you to have a little bit of contrast, a little bit of differentiation, okay?
Now contrast. Contrast – I’ve talked about this before and there’s a topic that I’ve just did a few weeks ago, talking about contrast in terms of foreground versus images, 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 in fonts. In 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 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’s a font weight. So the font weight if you look at it, there’s a “Let’s Change The Way We Design” and it has a bold field to it, the word design is a lighter. There’s the same font but it comes in different weights.
So that’s one example that you’re doing is you’re distinguishing the contrast between the title and one word versus the actual rest of the title. Now another one is font sizes. So if you notice the title, the header is actually much larger. So much larger font versus the actual content below it.
And so what you’re doing is you’re achieving contrast utilizing fonts sizes. It allows you to decide on what you want the audience to focus on. In this case, the majority of focus goes towards the header itself. Now another one is font color. So if you look at here, colors allow you to basically engage your readers and allowed you to emphasize certain elements. So although we have on the header the same font used and although the word design is actually a lighter format, however the color of the “Design” is actually jumping at you, it is kind of engaging you and that’s where your eye goes towards. So you can use color to achieve that.
Spacing: Spacing is extremely important as well, we talked 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, it’s kind of we’re using the modern San 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 like a couple of different fonts. In the example above, we have 3 different types of fonts used.
Sometimes you use many different kinds. You wanna avoid that. What you want to do is to stick with only 2, maybe 3 fonts. So the same content is actually used underneath and in that case you have a header in 1 font style and then we have underneath of it, the body text and another. So you have this contrast and yet it is actually minimal and it has a nice feel to it.
Another one is where the mood of the fonts. Different fonts can actually emulate different moods and in this case what you have is 3-4 different fonts used and each of them has a different mood. That doesn’t really go with each other. And so what we want to do instead in this example is we’re using the script font with a neutral font. The neutral font can kind of go with any type of font and the script is kinda have the uniqueness in terms of the typeface.
Again, we’re pairing 2 fonts and they kind of flow nicely together.
Let’s talk about content. The content also should drive the type of font that you select, right? It’s not so much where we always force to font into the content but also the other way around.
If you look at this example, “Farm Fresh Grapes” and there is a nice image, kind of organic grapes I’m assuming, beautiful, tasty, right behind of it and so the use of the font is actually correlated with the design.
The words, the content and also even the image behind it, there’s a certain you know, there’s a certain context of the design is achieved through the use of the font.
Another example is this one. There’s the word “Good Morning” and if you look at it, it’s going with the image behind it. So again what you’re doing is you’re complimenting 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’s all part of one design.
5. Let’s Practice
Now, let’s do a practice, alright? I taught you a few different elements about how to pair fonts, a few examples. I wanted to actually do a real practice experiment.
Let’s do one together. In this case, I have an example behind me. The background is a little bit blurry, we have kind of a hard to read text, at the same time the header and the body are both in Arial.
Again we’re gonna do some font pairing, we’re also gonna do a little bit of a design practice to put the fonts together and achieve some spacing, contrast and so on.
All the 5 things I’ve talked about, we’re gonna achieve here.
The first thing that we want to do is that there’s high quality background. You want to select the background that goes with the design. The text is kind of hard to read but you know, “Finding Your Brand’s Visual Voice”.
The images selected behind it, it actually correlates with that. So what you’re doing is selecting the image that goes in the background with the text and also it’s fitting the content of the text. Now, next thing, let me go over here. Now “Finding Your Brand’s Visual Voice”, again, what we’re doing is using the space wisely.
By using the space in this case, what we’re doing is taking the font and we’ve taken the content and actually put it into a smaller area, it’s falling 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 the 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 with that. Now next thing we want to do is to you want to decide what texture attract the attention first. So “Finding Your Brand’s Visual Voice”, the word “Visual Voice” is one of the focal points here. So what you do is you actually reduce the size of the other text and also the “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 take 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 because that will go pretty well with the Sans font for the header.
Now, what we’ve achieved here is with all these different elements and the balancing, there is a kind of a clean, easy to read typeface set and also we have a kind of a nice hierarchy and balance for the design. And the last but not least is we’re adding a line and that just kinda helps to create a bit of an additional visual hierarchy.
This was a good example for you to understand as far as how you could take those you know, guides 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 guides 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!