Design Essentials – 4
You don’t have to be a professional designer to like making things looks pretty. I certainly wasn’t when I first started messing around with design elements. Actually, one of the greatest parts about design is the freedom of expression in it. Still, sometimes it helps to have a basic, foundational knowledge of design principles and tools so that the idea in your head turns out as great as you were hoping it would be.
Thankfully, that’s exactly what this series aims to give you! Each post in Design Essentials will spell out the basics of a design principle and also give you lots of tools and examples to help you quickly and easily create something beautiful! A quick reference guide is always included at the bottom of the post.
How to Pair Fonts Like a Pro
If you’re starting on a project that involves type – be it a physical DIY, digital art piece, or something else – then knowing how to pair fonts is really important! But choosing type that goes well together is, in my opinion, one of the hardest things to do in regards to design. That being said, great font pairing is also one of the most surefire ways to make your project really something. It can boost your design from just looking amateurish to, well, like a designer put it together!
Like so many things in design, font pairing is both an art and a science. You’ve got to train your eye on what to look for, and then use it to make the right decisions! And all great font pairing starts with understanding typography – or the arranging of letters and characters. So, before we jump into anything too quickly, let’s start by forming our basic understanding of type.
The Basics of Typography
1. Fonts vs. Typefaces
The words “font” and “typeface” are often used interchangeably, but they actually mean two different things. A typeface is a grouping of fonts of different styles or weights, otherwise known as a font family. For example, OstrichSans-Regular, OstrichSans-Light, and OstrichSans-Bold are all part of the same typeface. A font is the individual style or weight used. So, using the example above, OstrichSans-Regular is a different font than OstrichSans-Light. Make sense?
2. Anatomy of Type
Remember how I said typography is part science? This is what I mean. Fonts and typefaces can be broken down by the structure of their letters. And, while this may seem way too detailed, trust me: good design is in the details. You need to be familiar with this stuff to really nail it.
So let’s start with the word “Typography” and break it down, as defined by Typography Deconstructed’s Type Glossary:
Baseline: the imaginary line upon which a line of text rests
X-height: the distance between the baseline of a line of type and the tops of the main body of lower case letters
Cap height: the height of a capital letter measured from the baseline
Descender: the part of the letters that extends below the baseline
Ascender: the upward vertical stem on some lowercase letters, such as h and b, that extends above the x-height
Bowl: The fully closed, rounded part of a letter
Serif: a stroke added as a stop to the beginning and end of the main strokes of a character
Crossbar: the horizontal stroke in letters. Each end connects to a stem or stroke and doesn’t (usually) intersect/cross over the stem or stroke.
Counter: the open space in a fully or partly closed area within a letter
Finial: a tapered or curved end
Terminal: the end of a stroke that does not include a serif
There’s actually a lot more ways you can break down letters, but knowing these is a good base. If you’d like to learn more, you can search Typography Deconstructed’s Type Glossary.
The big point here is that font designers play around with these different lettering characteristics to create unique, identifiable typefaces.
3. Arrangement of Type
Part of typography is not only the design of the letters, but also the way in which the type is arranged. There’s a few main concepts here that are really important.
Alignment: You’re probably familiar with this already, but you can align your text to the left, center, or right. In a left-aligned text block, all of your words are aligned evenly along their left side.
Kerning: When you make the space between two letters bigger or smaller, you’re dealing with kerning. Depending on the font, some letters may appear to be too close together or too far away to be easily readable. When this happens, you’ll want to manually adjust the kerning.
Tracking: Tracking is similar to kerning, except that you’re adjusting the spacing between letters in an entire word or string of text (not just two individual letters). Tracking can be used in different ways stylistically to create different looks.
Leading: Leading is when you create more or less space between lines of text (from their baselines). So, think single-spacing vs. double-spacing. Leading can be a very important part of making sure your text is readable.
Hierarchy: By playing with the different sizes, weights, and styles of a font, you can create a visual hierarchy that directs the reader to what elements and words are most important. So, a bolded font has more clout than a regular font, as does a larger font to a smaller font. You see this all the time in news articles and blog posts.
4. Typeface Classifications
The two most common classifications of typesfaces are Serif and Sans-Serif. Serif typefaces include – you guessed it, serifs. It’s a more traditional typeface class than the Sans-Serif, which literally means “without” serif. Here’s examples:
Other classifications include:
Calligraphic: These typefaces mirror the shapes in calligraphy, where thickness varies by upwards and downwards strokes
Script: These typefaces mirror the shapes made by a flexible brush. They often look handwritten.
Decorative: These typefaces are not meant to be used as body text but purely for headlines, as they don’t do well in smaller point sizes. The styles in this classification are wide ranging.
There’s all different kinds of typeface classifications out there, but these are the ones I see being used most often. Familiarizing yourself with them can come in handy whenever you’re trying to pair fonts!
Speaking of, now that we’re familiar with the basics of typography, let’s talk about pairing them!
1. Limit the Number of Fonts
Just like when creating a color palette, you need to make sure you’re limiting the number of fonts you’re using in given project. The specific number used is up to you, but I generally try to keep it to 2 or 3. Remember that, as you increase the number of fonts you’re using, the harder it will be for you to make sure that they all work well together. However, if you choose multiple fonts from the same typeface, you’re job will naturally become easier, as they were all designed to work well together!
2. Consider the Context
The context in which you are designing is really important when choosing font pairs. Designing a poster is very different from designing a book or magazine cover. With a poster, you might be able to choose a more decorative text than you would with a book. Clear, sharp legibility is very important on a magazine cover, whereas posters are often really meant to draw the eye into the total design. Just keep it in mind as begin to sort through your different options.
3. Choose Concord or Contrast
There are two general rules designers follow when pairing fonts: concord or contrast.
Concord means that you’re choosing fonts that, in some shape or form, have similarity between them. This could be with any of the above mentioned characteristics like x-height, kerning, or proportions. Again, choosing from the same family makes this easy.
Contrast means that you’re choosing two fonts that are very different from each other. Done right, contrast can be extremely pleasing to look at and helps guide the visual hierarchy.
There’s a lot of different ways fonts contrast from each other, but here’s a few tips:
- Choose different typeface families. A classic combo is pairing a serif font with a sans-serif. You can also mix and match decorative fonts with more modern fonts (usually a sans-serif), or calligraphic types with serifs.
- Size: Making one font much bigger than the other creates a clear contrast and hierarchy.
- Weight: A bold font paired with a regular or light font can be an easy way to contrast two different types.
- Proportions: Look at how the different fonts vary in proportion in relation to their descenders/ascenders, curvatures, etc. One might be really condensed and vertically tall, while the other might stretch out further horizontally.
- Movement: Some fonts just naturally move in a certain direction, while some are stick straight. Combining different movements within your font choices can subtly but powerfully contrast the two.
When deciding what’s best for your particular project, make sure to watch out for conflicting fonts. Using the knowledge that you’ve learned above, notice the details of the fonts and watch out for any awkwardness. Awkwardness can be created by two fonts sharing many similar characteristics, but also many different characteristics! Choose concord or contrast, but not both!
4. Pay Attention to the Moods
Each font is said to have an “attitude” or “mood” about it. This is a little conceptual in nature, but if you’re trying to pair fonts, it may not be a great idea to pair a grungy font with an extremely light and playful one. The two moods don’t match. If you’re a history buff, combining fonts in a similar time era is an easy way to determine whether they’ll look good together (though not always guaranteed!).
Now that you’re familiar with the basics of font pairing, the best way you can get better is by observing all the great font pairs around you! Have a brand or designer that you follow? What makes their font choices so great? What are they doing in their type decisions to engage you and tell a story about their piece or work?
The more that you pay attention to these sorts of things, the better you’ll get at it! Typography is a very detailed, complex part of design, but start paying attention and it will make a lot more sense!
Font Pairing Resources
Learn More About Typography
Lynda: You have to pay for a subscription to Lynda ($20/mo), but they have a wide array of tutorials on so many design topics, it’s amazing! And their tutors are all highly trained and skilled designers.
SkillShare’s Typography That Works: This is a free online workshop that walks you through the basics of typography in video format. I haven’t listened to the whole thing, but it seems pretty informational from what I did watch.
Type Connection: This interactive website teaches you typography pairing skills by asking you to send two different fonts on a “date.” Based on your picks, it’ll teach you all about why your choice “worked” or “didn’t work” based on design principles. It’s much more fun than reading a textbook!
Typography Deconstructed’s Type Glossary: Glossary of terms for typography anatomy
Free for Commercial & Personal Use Font Sites
All of these sites do offer “Free for Commercial Use” fonts, but make sure to check the licensing. Many also offer “Free for Personal Use Only” fonts, which means you won’t be able to use them for commercial purposes – so always check the licensing before using!
Help Pairing Fonts
Google Fonts’ Pairing Suggestions: Browse Google Fonts’ different options, and when you find a font you like, click on it and scroll to the bottom of the page. There will be a “Popular Pairings” section for you to browse.
Font Pair: Helps users easily pair Google Fonts together by categorizing them by classification, and then presenting a list of previews. It may be faster than scrolling through all of Google Fonts’ Pairing Suggestions pages.
Font Combinator: A fast, browser-based font viewer. You can pair fonts together and preview whatever text you want in those particular fonts.
Typespiration: A whole website of pre-chosen font combinations, including color palettes and copy & paste HTML/CSS codes.