A Beginner’s Guide to Combining Multiple Fonts

Posted in Tips, Web Design2 years ago • Written by 9 Comments

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.

Although a limited number is recommended, if you can create harmony, use as many fonts as you wish.

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.

How to achieve it

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.

Georgia and Arial, again.

Rotis Serif and SansSerif, typefaces by the same designer, work really well together as well.

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.

Here the hierarchy is shown through weight, while both fonts have a 35pt size.

Both fonts have a size of 35pt and the same weight, but the color is different.

Impact and Calibri show a clear difference and create a visible hierarchy.

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.

Bottom line

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?

69 Written ArticlesWebsite

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.

9 Comments Best Comments First
  • Kathrine

    Saturday, March 3rd, 2012 08:22

    4

    Well I used to prefer consistent/single font design for my work.
    But since I’m a newbie to designing, and after reading this guide i’ll surely think out of the box next time.

    Thanks for the post.

    Kathrine

    0
  • fowziey

    Saturday, March 3rd, 2012 12:42

    3

    I agree pairing is much easier when both come from same designer even to match Sans-serif with serif. Anyway I always have difficulties when they come from different families. Now i realize that the unmatched selection might cause by kerning.

    0
  • Mary

    Friday, March 2nd, 2012 15:05

    2

    Great guide to a beginner because if any beginner follow this he will get success very soon.

    0
  • Richard

    Saturday, March 3rd, 2012 12:49

    5

    We faced lot of issues while choosing font when developing our site momgrocery. I feel i would have seen this article just few days back. We can use this to combine multiple good fonts while revamping our site in next month.

    0
  • Randy Sandberg

    Sunday, March 4th, 2012 00:32

    6

    Thanks for the excellent advice Christian. As I move from Software Test Engineer to User Experience Designer I am certain your helpful information will come in handy. As for what I’ve done in the past, I have always stuck to the no more than two font types rule but the other ideas you’ve laid out here are shear gold. Thanks again!

    0
  • Warren

    Sunday, March 11th, 2012 17:53

    9

    I think when done correctly, combining a Serif and Sans Serif font is the way forward.

    0
  • Waqas

    Friday, March 9th, 2012 16:56

    8

    in order to make the design more dynamic I think it is important to go through this article! good job

    0
  • Daniel

    Thursday, March 8th, 2012 13:59

    7

    E frumos!

    Extremely good explanation and walk through. I wish I’d had something this thorough when I took my print and media graphics class back in college – the concept was presented, but not illustrated.

    0
  • Chan

    Friday, March 2nd, 2012 12:09

    1

    finding a matchin font maybe hard job but i had tried this for a long time and always interestin.

    -1
  • Warren

    Sunday, March 11th, 2012 17:53

    9

    I think when done correctly, combining a Serif and Sans Serif font is the way forward.

    0
  • Waqas

    Friday, March 9th, 2012 16:56

    8

    in order to make the design more dynamic I think it is important to go through this article! good job

    0
  • Daniel

    Thursday, March 8th, 2012 13:59

    7

    E frumos!

    Extremely good explanation and walk through. I wish I’d had something this thorough when I took my print and media graphics class back in college – the concept was presented, but not illustrated.

    0
  • Randy Sandberg

    Sunday, March 4th, 2012 00:32

    6

    Thanks for the excellent advice Christian. As I move from Software Test Engineer to User Experience Designer I am certain your helpful information will come in handy. As for what I’ve done in the past, I have always stuck to the no more than two font types rule but the other ideas you’ve laid out here are shear gold. Thanks again!

    0
  • Richard

    Saturday, March 3rd, 2012 12:49

    5

    We faced lot of issues while choosing font when developing our site momgrocery. I feel i would have seen this article just few days back. We can use this to combine multiple good fonts while revamping our site in next month.

    0
  • Kathrine

    Saturday, March 3rd, 2012 08:22

    4

    Well I used to prefer consistent/single font design for my work.
    But since I’m a newbie to designing, and after reading this guide i’ll surely think out of the box next time.

    Thanks for the post.

    Kathrine

    0
  • fowziey

    Saturday, March 3rd, 2012 12:42

    3

    I agree pairing is much easier when both come from same designer even to match Sans-serif with serif. Anyway I always have difficulties when they come from different families. Now i realize that the unmatched selection might cause by kerning.

    0
  • Mary

    Friday, March 2nd, 2012 15:05

    2

    Great guide to a beginner because if any beginner follow this he will get success very soon.

    0
  • Chan

    Friday, March 2nd, 2012 12:09

    1

    finding a matchin font maybe hard job but i had tried this for a long time and always interestin.

    -1

Comments are closed.

107.20.91.81 - unknown - unknown - US