February 1, 2020 2

FONT COMBINATIONS | Design Basics Episode 11

FONT COMBINATIONS | Design Basics Episode 11


(funk music) – What’s up, guys? Eric Vasquez here with a
brand new Design Basics video for you today. And in this lesson,
we’re going to be talking about font combinations. Alright, so when I talk
about font combinations and pairings, I’m
talking about typefaces that just go well together, that you guys can use
in your design work. Now it’s an important topic, it doesn’t have to
be a complicated one, but it’s something that
I feel can help you guys step up your design
game right away. So let’s jump right into it. Now here, I just have an example of one of my previous
design tutorials for The Last Stand
Coffee Shop and Bakery. Now in this tutorial, I
walked through the process of designing and
laying out this menu. And as you can see
here, we’ve got a couple of different
typefaces here. Some of them are
from the same family, but some of them are just
fonts that work well. Now, you’ll notice here
up top that we have a more distressed kind of
condensed display typeface, and then we’re also using this
cursive typeface throughout, sort of here for the catchword as well as some of
these menu items. Alright, and we’re using this
same display typeface here that we’re using for each
of the sections on the menu. But you’ll notice a
third typeface here that we’re using
for some of these more smaller descriptive
pieces of text, as well as the
address on the bottom. So I just wanted to
show you guys this just as a quick example,
so you can kinda get a sense of what
I’m talking about when I say font pairings. Now, over here in this
document, I’ve just gone ahead and set up a couple of
examples to show you guys. In this first example,
you’ll see that I’m using this typeface called Yellowtail, along with a sans
serif semibold typeface called Open Sans Semibold. Now, the majority
of these typefaces are fonts that you guys
can download for free. A lot of these are Google fonts which you guys can download. There’s a whole library
of typefaces that
you can grab there and a lot of them
are just really nice and simple and clean. But it’s nice to have a
couple of script typefaces, more decorative things
in there, as well, just to spice things
up a little bit. So in this particular case,
Yellowtail is the display font. And the reason that I
say that is because, typically with display
fonts, you don’t really wanna use them
for the body text, as it will be a little
bit hard to read. So if I were to come in here
and begin typing a paragraph. This is the body copy for your paragraph or description. Okay, and we do
something like this. Pretty quickly, you’ll see
that once I make it smaller, it’s not quite as easy to read. So I think in these cases,
this one isn’t so horrible, but it’s much easier
on the viewer’s eyes if you use a simple serif
or sans serif typeface like the Open Sans Semibold. So in that case, you
wanna try to reserve your display fonts
for shorter phrases, maybe just a couple
of words and titles. So our second example here,
we’re using a slab serif. And a slab serif is
just what it looks like. It’s got these slabs on
the ends of the letters. And a very nice font to pair
that with is Raleway Light. Now, it’s interesting
here, because you can mix script fonts with
sans serif fonts, lighter fonts with slab serifs. And you’ll see a pattern
here that we’re just beginning to mix
different weights, sizes, and types of fonts together. Alright, in this case,
for the third example, we’re using Norwester, which this typeface
comes from Font Squirrel, along with Roboto Condensed,
which is another Google font. Now in this case, both
of these are sans serif condensed typefaces,
but the weight of the display type here,
the Norwester typeface, is much heavier. So it gives you a nice contrast. Now if you’ve seen
some of my previous Design Basics videos,
we’ve talked about things like scale and
contrast and balance, so all of those lessons that
we’ve discussed earlier on come into play when
you’re experimenting with typefaces, as well. Now, it’s important
to just remember to give some love to your text. It’s not easy, but a lot of
people kinda jump in and think it’s all about, graphic
design is just about creating beautiful images, but the
type is a big part of it, too, so you don’t wanna neglect
that aspect of your design. If you have a
beautiful looking image but the typefaces
just aren’t working, it’s a surefire way to make
your work look a little bit sort of amateurish, like
you didn’t really pay much attention to it. And the last thing you want
is for people to think that you just slapped
something on there and that it’s kind
of an afterthought. Okay, so again, just
continuing that theme here, we’re using another
typeface called Julius Sans, which is a nice lighter weight, with another
condensed sans serif. Now in this case,
though, you will notice that the tracking
for this text here has been spread out a bit. And that’s another
important topic that I wanted to touch on. Anytime that you’re dealing
with typefaces like this, font combinations, it’s
important to remember that you have a couple
of interesting devices at your disposal when
you’re working with text. You not only have
the size of the text, you have the weight of the text. You’ve got the amount of
space between the letters and characters,
and you’ve also got the amount of space
that you’ve got between lines of text,
especially when you’re dealing with paragraphs and body
text and things like that. So these are all kind
of devices and things to keep in mind anytime
you’re working on a layout. So these are some of
the basic examples here, and I have a couple
more, and in this case, you can see that we have
a really nice-looking
display font. This one is called Le Bonjour from the Design
Cuts marketplace, which is a really
nice font that comes in a couple of styles. And I’ll put a
link there to that so that you guys can see it. But I’m pairing that with
a nice script typeface. Now as I mentioned
earlier, you may not always wanna use
a script typeface as the font for your body text, but there’s no reason
why you couldn’t add a third font to this, maybe
something like Roboto Condensed could also be used
here for body text. So in this case, you
would have your headline, kind of a subhead
using the script, and then adding a
third typeface here, so that you can have
this sort of trifecta of typefaces working
together, okay. And in most cases, I would just kind of recommend using
more than one typeface. If you use one typeface
and just different styles, your design can
look kinda boring. But at the same time,
if you use too many, it can feel like too much. So what’s the right
balance of typefaces, and how many fonts
should you use? Well, I typically try
to go for somewhere between three to four
typefaces tops in a design. Because like I said, if you
have too many fonts happening, it can feel a
little bit chaotic. So in these cases here, I’m
using another slab serif, with Bodoni 72 Book, which is just a nice classic
serif typeface. And again, you could add almost
any of these smaller fonts from the left column to this, to use a third typeface
that would work well. Okay, so if you again
were designing something like the menu example I
showed you in the beginning, perhaps you could use
Rockwell for your title, and then Bodoni
for your sections, and then this third font
here for the smaller text. Okay, and then you would
have your three fonts that you could experiment
with and play around with. And once you have
those fonts in place, it’s good to experiment
with things like the size, the colour, and the
weights, as well. Okay, and here, I have
another nice display font called Apppleton, that we’re
using with a basic font, Avenir Next Demibold. Now if you’ve seen some
of my other tutorials, you know that I
love to use Avenir, because it’s just a very
nice, clean, and simple font that’s very easy to read. So I wanted to just kinda
take you guys through this, and give you some
examples of font pairings that work really
well in my opinion. Now you can always
go online and search for recommendations
and font pairings. But one of my favourite things
to do is just jump in there and begin experimenting
with it myself. It’s important to have a
nice collection of typefaces that you can take with you. Sometimes you can even, if
you’re feeling adventurous, go ahead and create
your own typefaces. There’s a couple of different
ways that you can do that. And of course, be
sure to check out the Design Cuts
marketplace, as well, because they do have a
very nice and vast array of interesting typefaces
to choose from. So hopefully you guys found
this video to be helpful. I know that it’s something
that a lot of designers, especially starting out, can
be sort of intimidated by. And I believe that
that’s one of the reasons why it tends to
be kind of rushed. But if you’re somebody
who cares about creating good design and creating
powerful imagery, you wanna make sure to
give a little bit of love to the type, as well. So if you guys did
enjoy this video, please go ahead and
smash the like button. Give us a thumbs-up,
and be sure to subscribe to the Design Cuts
YouTube channel. As always, guys, thank
you so much for watching, my name is Eric Vasquez,
and we’ll see you next time.

2 Replies to “FONT COMBINATIONS | Design Basics Episode 11”

Leave a Reply

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

© Copyright 2019. Amrab Angladeshi. Designed by Space-Themes.com.