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!