Table of Contents
Knowing how to combine fonts is one of those skills that are hard to learn and even harder to master. This was at least my own experience. I struggled with learning how to combine fonts for a long time. And, I still find myself in doubt sometimes even today. Since other designers also know this struggle, I decided to put together six tips to make this practice easier. These tips are nothing new under the sun. However, they helped me the most. And, I hope they will help you as well.
Typeface vs font
One quick note before we begin. When we talk about typography, there are two terms that are often used in the wrong way. These terms are “font” and “typeface”. A lot of people use these terms as the same thing. However, they are not the same. Put simply, typeface is specific design. When you think about the printing machine, typeface describes all metal blocks printer can use to print the text using that specific design, like Helvetica, Futura or Georgia. These are typefaces.
Font is a subset of these blocks. Every font has specific weight and size. So, when we talk about Gotham or Proxima Nova, we are talking about typefaces. We are talking about the whole range of styles, weights, sizes and so on. When we talk about light Gotham in 18 point, or italicized Proxima Nova in 12 point, we are talking about fonts. These are different subsets of these typefaces. And, yes, Proxima Nova in 12 point and italicized Proxima Nova in 12 point are also different fonts.
This means that designers choose typefaces for projects, like Open Sans. After that, they use fonts to create the final design, like regular or bold Open Sans in 12 point. So, one more time. Typeface is the whole package (design) while font is subset of the typeface. Every weight, style and size are different fonts. I have to admit that I still sometimes use the wrong term. If I did this mistake in the following text, accept my apology and don’t let it discourage you. In the end, we all make mistakes.
No.1: Start with serif and sans-serif
This is between the first and easiest tips on how to successfully combine fonts. It is also one of the most popular principle for creating winning typeface combinations. One could safely call it a classic that can’t go wrong, usually. When you want to combine fonts easily, even without a lot of knowledge, pick one serif and one sans-serif. That is it. You probably saw this many times. Many websites combine sans-serif typeface for headings and serif typeface for body.
This is probably the easiest road you can take. Keep it simple. Stay away from exotic things such as scripts and decorative typefaces. Stick with one serif and one sans-serif. Try different combinations and see what works. There is one thing I have to mention. Avoid trying to combine fonts of the same classification. Don’t combine two serifs, two sans-serifs or two slab serifs etc. The only exception is that they are distinctly different. Then, it might work.
This is especially true in case of slab serif typefaces. Slab serifs usually have a very distinct personalities. This is not a problem if you use just one slab serif. However, when you combine fonts, and both are slab serifs, their personalities will probably start to fight for domination. Put two slab serifs together and the only result will be tension. This is something you want to avoid. If you want to use one slab serif, choose serif or sans-serif as your second choice.
No.2: Use just one font family
How many typefaces do you think you need to create great typography palette? Two, three or even more? What if I told you that you can use just one typeface, for the whole project? This may sound a little bit crazy since you usually see examples using at least two. However, this is not a rule that is “set in stone”. In a fact, the decision to use a single typeface from the same family can be the safest bet you can make. How can you combine fonts in a wrong way if you use just one?
There is one thing that is necessary to make this tip work. The typeface of your choice has to come with a range of different weights, styles or cases. When you look for a single typeface for your project, you have to make sure that you have resources to create variation. You can’t achieve this with one typeface that has one weight and style. Do it and all typography elements will look the same. You can create visual hierarchy using different size of the typeface. Still, you can do better.
Planning visual hierarchy is important if you want to combine fonts from the same family. You have to think about how will you create contrast. What sizes, weight (light, regular, medium, bold) and cases (upper, lower, small caps) you want to use? Also, do you want to use italics, extended or condensed version of the font? All these properties can help you create beautiful visual hierarchy using a single font. However, it is easy to overdo it. So, think and plan ahead.
One benefit of using single typeface is that it can save you a lot of time. Finding the right combination of typefaces can take a lot of time. It can take more time if you are a perfectionist. Then, you can spend whole days trying different combinations without success. The problem is that typography is important piece of design. As a result, you may not be able to take another step. If you have one typeface, try to play just with that. Who knows, maybe that one is all you need.
No.3: Don’t use too similar typefaces
This is more a follow-up on the point, about using typefaces of the same classification, we discussed in the beginning. Yes, you should be looking for typefaces sharing some characteristics. You want to combine fonts that play well together. So, they can’t be completely different. However, you should not combine fonts or typefaces that look like twins. Remember that there has to always be some contrast. Meaning, there has to be some small differences.
Put simply, people should be able to recognize that they are looking at two different fonts or typefaces. If not, you should rethink your choices. In addition, it should also look like something that was intended. Don’t combine fonts or typefaces that are only slightly different so they make people think something went wrong with the browser. Sure, the majority of people using your product will not be experts on typography. However, this should not be a prerequisite.
So, if your choices look too similar, you have to change one of them.
No.4: Focus on contrast
Another approach to combine fonts or typefaces, that works well, is focusing on contrast. This is why combining serif and sans-serif typefaces works. This combination naturally creates contrast. What does it mean to create contrast? It means bringing together multiple concepts such as styles, weights, sizes, spacing, colors and so on. As you probably guessed, it is again about creating visual hierarchy and some simple way for people to recognize different typography elements.
One example of combination that can create sufficient contrast is using a bold font with thin. Or, using extended font with condensed. These choices are the exact opposites of each other. They are both on different ends of the spectrum. However, it is this visible contrast what helps them work well together. As we discussed, you don’t want to combine fonts or typefaces that look similar. Instead, you should use these differences and let them shine as individual part of the design.
Remember that differences can help you create different roles for each font and typeface you chose. This will also help you communicate the message better. And, it will help you make some pieces of the message stand out. Here is the thing. Every design conveys some message. When you design anything, it is with some purpose. In some sense, the design is constantly communicating with user. Design helps the user understand what is more important and what is less important.
This is one example of using contrast to make this communication more clear. You use one weight or/and size for heading and another for body copy. The same is true for smaller chunks of information. Publishing dates on blog will probably use smaller size and lighter color than titles of posts. Both these elements have different importance and role. Use contrast to mirror it.
No.5: Use complementary typefaces
Every typeface has a specific character or mood. There are typefaces that are playful while other are “cold” or intense. Some typeface are elegant while others are relaxed or even comical. First, when you want to combine fonts for your next project, make sure to choose those with the right mood. Decorative and curved typeface will work great in design where kids are the main audience. It will not work that well for audience that is more casual. For example, a website for a bank.
Also, some typefaces like slab serifs have stronger personality than others, as we discussed in the beginning. When you have some playful typeface or typeface with stronger personality, it is a good idea to combine it with typeface that is neutral. You don’t have to go for typeface that is on the opposite side of the spectrum. There are safer things you can try. For example, if one of your typefaces is Lobster (who uses Lobster?), you can try to combine it with Raleway.
This is what you should keep in mind. It is often a bad idea to try to “balance” one extreme with another. Sure, this can work. However, you are walking on thin ice. If one of your typefaces has a strong character (like many display fonts), the best choice will be using neutral typeface. This one will not fight for attention with your first choice. It will usually support your first choice by making it stand out more. In the worst case, your second choice will work as a filler. It will do nothing.
The problem with choosing the right complementary font or typeface is that there is no set of steps to follow. You have to use the good old method of trial and error and see what works.
No.6: Use typefaces made by the same designer
The last piece of advice I will give you is to use typefaces made by the same designer. This is something we often forget when we look for ways to combine fonts or typefaces and make them work. Also, it is one of the mistakes I still do today. Yet, this can make the work much easier. Do you need to find two typefaces that play well together? There is no reason for spending the whole day browsing Google Fonts or Typekit. You can find the right typefaces by sticking to one designer.
The reason why this usually works is quite simple. When some designer creates multiple typefaces, these typefaces usually share some aesthetic components. In other words, they can often look somewhat similar because they share some characteristics. For example, these typefaces can have the same x-height or even some letter can look similar. So, it can be better to spend a couple of minutes researching typeface designers instead of typefaces.
There is another reason why this can help you combine fonts or typefaces. Sometimes, designers create more than one classification of the typeface. In plain English, some designers create both, serif and sans-serif. Merriweather is one example. This typeface created by Sorkin Type Co comes in two classifications. There is Merriweather (serif) as well as Merriweather Sans (sans-serif). These two are designed for designers wanting to combine fonts or typefaces by using serif with sans-serif.
When you choose typefaces such as these two, it is almost guaranteed that they will work great together. In the end, this is usually at least one of the reasons why designer created both of them. So, when in doubt, look for typefaces from one designer. And, look for those with multiple classifications or versions. This is very much a safe bet.
Closing thoughts on how to combine fonts and typefaces
Any closing thoughts? Well, I have two. The first one is that you have to practice how to combine fonts and typefaces if you want to get better at it. Nothing comes easy. This is especially true when there is no precise scientific method you could follow to achieve certain result every time. Combining fonts and typefaces is one of those areas. There are some practices. Still, you have to trust your intuition. Luckily, the more you practice, the better and sharpen your intuition will get.
My second closing thought is to take the tips I gave you today and throw them out the window sometimes. Once in a while, breaking established practices and rules will work better than following them. In addition, it can help you learn when and why some choices don’t work. We often take rules as something absolute or sacred. As a result, we are afraid of doing anything that could lead to breaking them. This is true in design as well.
The problem is that you can’t innovate without breaking or ignoring the rules. Innovation requires striking new paths instead of following the existing ones. However, this doesn’t mean that you should break the rules just for the sake of it. Also, it doesn’t mean you should ignore them before you learn them properly. Here is the thing. You have to learn the rules. Then, you will know how to break them to create something special.
This brings us back to practice. Back up the learning about how to combine fonts and typefaces with practice. Soon, you will find it easier to create good combinations fonts for your projects. You will combine font with confidence. What was once a result of coincidence will become result of a skill. Just be patient. Learning about typography and building foundation of knowledge is usually faster than training your intuition and developing an eye for design. Don’t give up.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
