Join over 55,891 Subscribers Today! FREE UPDATES!
Get The Only Freelancer crash course you will ever need to read!
Using multiple fonts in the same design can get tricky if you don’t have knowledge of basic theories and good practices. In my opinion pairing fonts is one of the most difficult parts of the design process. If you have no idea where to begin, then this article will guide you through the knowledge you need for now. Browsing the internet for tips about pairing fonts can get confusing, because there are many practices designers use. Therefore I researched a lot in the past couple of weeks and I will present you what is, in my opinion, the right way of doing this.
The question I get asked the most is “how many fonts should I use?” I always tell people this depends a lot on their aim and general design patterns, but usually I do not recommend more than two. In my opinion two is what you should go for, not more. This is because all fonts, like people, have a personality and an overall effect. If you use two fonts with total opposite effects, they will clash and this will kill your design. Too many strong personalities together can create an awkward atmosphere, it is the same with fonts.
However, even if I usually say two, there are no rules that say how many different fonts you can use. You just go for as many as you think it’s appropriate for your design. The biggest challenge is creating harmony between different typefaces, so the less fonts you use, the easier is going to be to achieve this harmony and create a powerful effect. You can always go for fonts with multiple weights and variants, but they also need to compliment each other at the same time.
Another question is “to buy or not to buy?”. It depends on the project. There is a reason why some fonts are free and some cost $100 for 10-12 variants. Quality is the main advantage of a premium font. Maybe some will not notice the differences, but experts will definitely appreciate a premium font more than a freebie. Now don’t get me wrong, I am not saying free fonts are bad, but there is a difference in quality. The difference is in the small details such as thickness, forms, white space and kerning.
Kerning may not be perfect in free fonts, because font developers do not put as much work into it – and why would they, as long as it’s for free and they don’t get anything out of it? There might be some tools out there, such as kern.js, which might help improve the kerning, but it is not very practical to do this for large bodies of text.
Image by stitchindye.
Another advantage of using a premium font is the originality. If you pay for your fonts, there is a higher chance not many have and use that one, while using Arial or Verdana is something most beginner designers go for. Another thing worth mentioning is that by paying for fonts you also encourage the community and keep it going. Font designers will only continue their work if they can get something out of it and you are one of the ones who can pay.
If you ask me, I think you should buy fonts instead of using free ones. Quality has always been important to me – and I suppose it is to you too – therefore such a financial investment would make sense.
You should also think about what fonts you want to use before you go and buy them. If you use a typeface for headings on your home page, don’t use another one for headings on another page. Think of the main reason you choose a font for. Is it mainly body text or headings? Is it maybe a magazine for young people? All these details should be spottable in your font choice.
Achieving proper font pairing relies on concord or contrast, but not on conflict. The fonts need to work well together thanks to some shared qualities or need to be different between some boundaries. Conflicts between them can be created if the typefaces are too similar and look just like one or are way too different.
To achieve contrast you will have to look for style (Blackletter, Monospace, Slab Serif, Script and so on), size, weight, form (proportions of a typeface are equally important – the length of the descenders, the curvature of the shoulders, the movement and its direction etc.) and color.
As in the example above, two fonts of different variants work really well together. Lucida std and Lucida Sans, developed by the same designer, work really well when combined. This is simply a classic one. A decorative font for the heading and a legible and simple one for the body – no way to fail here.
Let’s see some other good combinations.
You can see in the above examples where hierarchy is shown through size, but there are also other ways of doing it. Just look at the examples below.
Now enough with the contrast. Let’s see what concord is about. Two elements with concordance suggest that a trait is noticeable in both typefaces. It can be the kerning, proportions, cap height and so on. The easiest way to create concordance is to use fonts from the same family. You can see an example above with Helvetica used in both heading and body. A great typeface with concordance between variants is the Droid family.
It is quite easy to play around with the same typeface. Fonts from the same family create harmony together and this is also where I advicse you to start playing and experimenting.
Now let’s see what conflict is. It’s name says it all; as said earlier, it is something you should avoid doing – pairing conflicting fonts will kill your design. The example below illustrates this concept perfectly.
Although they create contrast, as they should, this contrast is way too much. This is because the heading typeface is a Blackletter, while Helvetica is a neo-grotesque typeface. When combining fonts, they should always be from the same classification. I’ve seen some examples ignoring this rule which worked just fine, but let’s face it, it doesn’t happen too often. The proportions, weight and size are different. The curvature doesn’t look the same at all and the axes are off. Something quite easy to notice is the direction of the letters. While Blackletter fonts have a diagonal direction, the more modern ones are built vertically. There are just too many elements not working well with each other, the fonts are just not congruent enough, so in conclusion they do not work well together.
This article should be enough for becoming accustomed to the rules. It is only a beginner course presenting you the three most important concepts in font pairing. Always keep in mind that us, designers, have to be creative and breaking the rules now and then does not do any harm, but don’t overdo it. Try being creative, but if you see it is not working, reverse back to something more simple and effective.
Font pairing is not easy. It required many of us years to master and some other ones even more than that. But it is from these three concepts we all started. Make sure you know them and are able to apply them in the field and learning to combine multiple fonts for the desired effect will be a piece of cake for you.
Until next time… what do you think about using multiple fonts in a design? Is it something you do often, or you prefer to stay out of it for now? How many fonts have you combined mostly in a design?
Get The Only Freelancer crash course you will ever need to read!
Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!