Best Practices of Combining Typefaces

Advertisement

Creating great typeface combinations is an art, not a science. Indeed, the beauty of typography has no borders. While there are no absolute rules to follow, it is crucial that you understand and apply some best practices when combining fonts in a design. When used with diligence and attention, these principles will always yield suitable results. Today we will take a close look at some the best practices for combining typefaces — as well as some blunders to avoid.

Combine a Sans Serif with a Serif

By far the most popular principle for creating typeface combinations is to pair a sans serif header typeface with a serif body typeface. This is a classic combination, and it’s almost impossible to get wrong.

In the example below — a typical article layout — we have Trade Gothic Bold No.2 paired with Bell Gothic on the left side. They are both sans serif typefaces. However, they have very different personalities. A good rule of thumb, when it comes to header and body copy design problems, is not to create undue attention to the personality of each font. Trade Gothic is arguably a no-nonsense typeface. Bell Gothic, on the other hand, is much more dynamic and outspoken.

Combine a serif with a sans serif

Putting these two together creates an unwanted conflict in the design. Trade Gothic wants to get to the facts, but Bell Gothic wants to have some fun. This kind of tension is likely not part of the design goal, and should be avoided.

Now let’s look at the example on the right. We’ve replaced Bell Gothic with the stately Sabon. Sabon, which is a serif typeface, works very well with Trade Gothic. They are both focused on bold clarity with highly-readable glyphs due to their tall x-height. Both typefaces, in this context, are on the same mission, and that makes for a great combination.

Avoid Similar Classifications

Typefaces of the same classification, but from different typeface families, can easily create discord when combined. Their distinct personalities don’t play well off of each other and create a kind of typographic mud if careful attention is not paid.

In the first example on the left side we have a heading set in Clarendon Bold, which is a slab serif. The body copy on the left is Officina Serif which is also a slab serif. Slab serif typefaces are known for their distinct personality, and they like to dominate any area in a design they are used in. Putting two slab serifs together can create a needless and unsightly tension.

Now notice the example on the right side. The Clarendon Bold header is paired with the much-more neutral New Baskerville. New Baskerville is a versatile transitional serif typeface with wide glyphs that goes nicely with the heavy-set Clarendon. At the same time, it backs down and lets Clarendon have all the personality it wants. This combination works quite nicely as a result.

Choosing typefaces from different classifications at the start avoids needless tension in your design and typography later.

Assign Distinct Roles

One very easy way to combine multiple fonts from several typefaces is to design a role-based scheme for each font or typeface, and stick to it. In the next example, we have used Akzidenz Grotesk Bold in all-caps in an author slug on the top. We then use Rockwell Bold for the article heading. Our body copy intro and body copy typeface is Bembo at different sizes. Finally, the second level heading is Akzidenz Grotesk Medium.

Assign distinct roles

We saved the highly-distinct Rockwell for attention-getting headlines, and fallen back to a conservative sans serif heading and serif body copy combination we discussed earlier. But even in that choice, we have a great variation of size, weight and function among the fonts used.

All in all, there are 4 fonts from 3 typefaces being used here, and they all pull together into a cohesive design, because each role assigned to a font is fixed and is very clearly defined in the typographic hierarchy. When in doubt, define!

Contrast Font Weights

A sure-fire way to muddy your typographic hierarchy is to fail to distinguish elements in the hierarchy from one another. In addition to variations in size, make sure you are creating clear differences in font weights to help guide the reader’s eye around your design.

In the example on the left, we have a decent size contrast, but not enough font weight contrast. The Myriad Light, when set above a Minion Bold, tends to fade back and lose visual authority. However, we want the reader’s eye to go to the heading, not the body copy, at least initially.

Contrast font weights

On the right, we’ve set a Myriad Black above Minion, normal weight. It might be a bit heavy-handed but there is no confusion as to what the reader is supposed to look at first.

Create a Variety of Typographic Colors

Typographic color is the combined effect of the variations of font weight, size, stroke width, leading, kerning, and several other factors. One easy way to see typographic colors is to squint at a layout until you can’t read it anymore, but can still see the text in terms of its overall tonal value.

If you squint at the examples below, you’ll notice that layout on the left bleeds into one undistinguished blob of text, ever so slightly more dense at the bottom. However, the layout on the right retains its visual hierarchy, even if you can’t read it. No matter how far away you are from this page, there is no confusion regarding where the title is, and where your eye should go next.

Create different typographic colors

Clever use of typographic color reinforces the visual hierarchy of a page, which is always directly tied to the meaning of the copy and the desired intention of the message.

Don’t Mix Moods

One often-overlooked typographic mistake is not recognizing the inherent mood of a typeface. Typefaces have personality. They change to some degree based on context, but not greatly. It’s one problem to misidentify the personality of typeface for a particular job, but it’s a double-problem to add another poorly chosen typeface to the mix!

On the left of this example, we have Franklin Gothic Bold paired with Souvenir. The basic feel of Franklin Gothic is stoic, sturdy, strong, but with a refined sense of elegance and mission. It’s not a cuddly, but functional. On the other hand, Souvenir is playful, casual, a little aloof, and very pretty. These two typefaces together come across like a Buckingham Palace guard who is dutifully ignoring a playful little girl at his feet trying to get him to smile. This kind of mixed-mood just doesn’t work very well. Mixing the mood of typefaces can draw attention to the typography instead of the message, which results in a poor design.

Don't mix moods

On the right, we’ve given Souvenir a more willing playmate. Futura Bold has many personalities, but it’s more than willing to accommodate Souvenir for several reasons. First, both typefaces have high x-heights. Both typefaces have wide glyphs and very circular letter shapes. Both typefaces have a subtle but not overly-prominent quirkiness. Neither dominates the other. They both work, in this example, to create a fun and upbeat mood. There is no sense of undue tension.

Contrast Distinct with Neutral

A clean, readable typographic design requires careful attention to intended and unintended tension. One place to look for unintended tension is with personality clashes among your type choices. If one of your main typefaces has a lot of personality, you might need a secondary typeface to take on a neutral role.

In our example, the left column pairs Dax Bold with Bernhard Modern. This is a poor choice for at least two obvious reasons we’ll examine.

Contrast distinct typefaces with neutral ones

First, Dax has narrow glyphs and a big x-height while Bernhard Modern has some very wide glyphs and one of the lowest x-heights among popular classic typefaces. Second, Dax is an informal, modern, and bright typeface. It’s a great fit for a techie, savvy, modern message. Bernhard Modern on the other hand is classy, quiet, sophisticated, and even a touch intimate. Combine the lack of chemistry among those attributes together with the very different personalities of each typeface and you have a poorly functioning bit of typography.

Let’s look at a better choice. The right column pairs Dax Bold with Caslon. Caslon is an old style typeface, but it’s been modernized and sanitized to play nicely with other typefaces. It works satisfactorily with Dax in this context. Notice how you can see the personality of Dax in the headline, but Caslon steps aside and delivers the reader to the message? In this context, Caslon functions quite well as a neutral choice to support the more flamboyant Dax.

Avoid Combinations That are Too Disparate

When too much contrast is created in certain settings by selecting typefaces that are too much unalike, it can create a visual imbalance which works against the overall design.

On the left, we have Antique Olive Nord — an extremely heavy font — paired with Garamond Narrow. The over-zealous contrast and its effects are apparent. In most cases, this extreme contrast goes beyond attention-getting and goes right to awkward. It doesn’t serve the message of the copy well.

Avoid typeface pairs that are too disparate

On the right, the Antique Olive Nord has been replaced by a more subdued Antique Olive Bold. Garamond Narrow could have been replaced with a book weight Garamond, but a better choice — after some deliberation — was Chaparral. Chaparral has a higher x-height than Garamond, and overall is a more modern and subsequently more neutral choice to set against the idiosyncratic presence of Antique Olive Bold.

Keep It Simple — Try Just Two Typefaces

In all the effort to sort through large typeface libraries looking for “just the right combination”, it’s often easy to overlook the sometimes obvious and much easier choice: stick to two typefaces using a classic sans serif and serif combination.

In the example below, we’ve created a clear visual hierarchy, got a high degree of variety, created a strong sense of interesting typographic color, all-the-while increasing readability. But it was all done with just two typefaces. However, we are using a total of five fonts: three Helvetica Neues and two Garamonds.

Use two typefaces

Why does this work so effortlessly? Several factors are at play here. First, when using different fonts from the same typeface, you are likely going to have a high degree of visual compatibility without even working for it. Second, we’ve chosen the tried-and-true combinations of using a classic neutral heading typeface and a classic neutral body typeface.

Both Helvetica Neue and Garamond have distinct yet neutral personalities, and they can weave complex layouts together and around each other because we’ve maintained a strict visual hierarchy. Planning rules and following them, with the right typefaces, can yield great results with a minimum of effort.

Use Different Point Sizes

We saved one of the simplest principles for last: use different point sizes to create contrast and distinction.

In the example on the left, the heading and body copy bleed together into an unsightly blob of text. Use the squint method mentioned above and look at the left example. While still squinting, look at the right and notice the dramatic difference even though it’s blurry!

On the right, we have the same two fonts, but in different sizes. TheMix Italic has been bumped up significantly, while New Century Schoolbook has been decreased to a legible, yet more complimentary size.

Using different point sizes helps distinguish the typographic hierarchy and increase the variety of typographic color.

In Conclusion

The fact that there are no hard and fast rules about combining typefaces can make the process of making good choices time-consuming and maybe even a little exhausting. But it’s also nice to have a handy set of principles, as well as an understanding of certain typographic situations to avoid, to guide the process as quickly as possible to a pleasant typographic result.

Further Resources

You may be interested in the following related articles and resources:

Related Posts

You may be interested in the following posts which have been published on Smashing Magazine recently:

Also, please feel free to follow us on Twitter10 and join our community on Facebook11.

(ik) (vf)

Footnotes

  1. 1 http://bonfx.com/29-principles-for-making-great-font-combinations/
  2. 2 http://www.as8.it/handouts/mixing-typefaces_U&lc1992.pdf
  3. 3 http://www.typography.com/email/2010_03/index.htm
  4. 4 http://www.smashingmagazine.com/2010/05/18/the-beauty-of-typography-writing-systems-and-calligraphy-of-the-world/
  5. 5 http://www.smashingmagazine.com/2009/11/02/the-ails-of-typographic-anti-aliasing/
  6. 6 http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/
  7. 7 http://www.smashingmagazine.com/2010/05/06/50-helpful-typography-tools-and-resources/
  8. 8 http://www.smashingmagazine.com/2010/09/13/expressive-web-typography-useful-examples-and-techniques/
  9. 9 http://www.smashingmagazine.com/2010/08/12/30-new-free-high-quality-fonts-typography/
  10. 10 http://twitter.com/smashingmag
  11. 11 http://www.facebook.com/smashmag

↑ Back to top Tweet itShare on Facebook

Douglas Bonneville is a professional graphic designer and developer since 1992 who runs the BonFX graphic design and typography blog. Overly intrigued by font combinations, he authored The Big Book of Font Combinations and developed the Font Combinations App. He is also proprietor of Oxbow Domains. He loves typography, CMS, jQuery, HTML5, and tinkering with new technologies.

Advertising
  1. 1

    This is perhaps the best article I’ve read on SM, an extremely informative and entertaining read.

    I agree with some readers’ comments regarding the cheeky background colours used and the need for embossing and debossing.

    Bookmarking this article for future reference!

    1
  2. 52

    Great post!

    1
  3. 103

    Wonderful post, I will print it and stick it in the wall before my eyes :)

    2
  4. 154

    Reminds me of this article: http://www.typography.com/email/2010_03/index_tw.htm

    That might be a great article to link to.

    0
    • 205

      Douglas Bonneville

      November 6, 2010 9:55 am

      Hi Justin: If you check out the resource section at the end of the article, you’ll find that the HF&J article was indeed referenced. One of the best, short articles you can read on combining typefaces.

      0
  5. 256

    Thanks! This was a great post.

    1
  6. 307

    This is a great article for designers, both web & print. No matter what our experience level may be, there is always room to know more. Thank you Douglas and SM!

    1
  7. 358

    Great article. This is a great example for good typography! Thank you very much!

    0
  8. 409

    Great article! I just taught a lesson today on readability, legibility and finding a good typeface balance. Will share this article with my class.

    0
  9. 460

    I find my self too often struggling with combining typefaces that are in love with each other so to speak, so this info is very useful to me. Thank for the great article!

    0
  10. 511

    Very useful guide for who creates stuff everyday.
    You gone deep explaining all pro and cons of every solution, Douglas. Great work indeed.

    0
  11. 562

    Exactly what I was looking for. Useful, thank you!

    0
  12. 613

    Thank you for such a wonderful and informative article.

    0
  13. 664

    Hooray my favorite kind of article! Great examples!

    0
  14. 715
  15. 766

    Great! Thanks so much. You’ve opened my eyes to some great-looking typefaces I hadn’t heard of too.

    0
  16. 817

    A great article on the often overlooked importance of good use of typography in web design.

    0
  17. 868

    thanks a lot m/

    0
  18. 919

    A little late to the comment party on this one… but THANK YOU for this article!

    As someone who is in the “creative” industry, but is NOT a designer, these little hints/tips are like GOLD.

    While I *can* design some good stuff if need be (and I have the time, lol), and am a HUGE fan of design in general, and type design in particular, I’m by no means a natural designer.

    So, again, thanks.

    @Smashing Magazine: more bite-sized chunks like this would be great. Maybe a primer on GRIDS next?

    0
  19. 970

    Great article, nice to see some TRADITIONAL design practises being filter through onto the web, everyones so hung up on ‘web 2.0′ nobody seems to make informed desicions on topic content and combining relavant styles to suit.

    0
  20. 1021

    Great article. We recently launched http://www.ifontyou.com which is a font matching website. I think it will complement this article quite well.

    0
    • 1072

      Douglas Bonneville

      November 7, 2010 6:37 pm

      Hi Krystian: I saw your site all over twitter last week and RT’d myself. Very clever site and I hope it takes off!

      -1
  21. 1123

    great article, the large font in the last example is actually TheMix from the Thesis family.

    0
    • 1174

      Douglas Bonneville

      November 7, 2010 7:17 pm

      Max: You are correct. The Thesis superfamily refers to TheMix as a “style”, and not a typeface, which can be a little confusing when referencing it. I fixed the copy and the graphic.

      0
  22. 1225

    Best article i’ve read in a long time on SM!

    0
  23. 1276

    Thumbs up from this cranky, experienced designer. These examples are spot on and are typesetting principles any designer, print or web, should know inside out and put into practice daily.

    (This also reminded me of my bone to pick with the innumerable self-designated “typographic” WordPress themes out there. Every time I look at one [breathlessly, because I want to see great typography in a theme], I’m utterly disappointed. They’re obviously made by people who know absolutely nothing about type and think using 2x leading or making type a super light gray = “typography.”)

    0
  24. 1327

    Great article! I wish I had read it earlier!

    1
  25. 1378

    Great informative read. I learnt some new tricks.
    I would have preferred that the left and right examples were the same font and background colour though, as different background colours make a huge difference in how text legibility is perceived.

    If they were both the same, we could get a more accurate look and comparison between the different font layouts and see how better choices in typefaces does make a difference. Just makes it a bit more difficult the way it was done, in my opinion.

    But overall a great piece which is now bookmarked for later reference!

    0
  26. 1429

    How come there isn’t a single example of a good use of sans-serif font for body copy?

    1
    • 1480

      Douglas Bonneville

      November 8, 2010 1:01 am

      Hi Vanja: To keep the article to a practical length, we had to limit the scope of the examples we produced. In one of my other articles listed in the resource section, you can see we could have created 30 or so examples or more. Most of the principles listed above could easily apply to a sans-serif body with a serif or sans-serif header or display typeface. We had to cut somewhere :).

      2
  27. 1531

    Great post, enjoyed reading and seeing the examples and comments! Check out some of our thoughts and opinions whitespace-blog.co.uk. Thanks, Adele

    2
  28. 1582

    Awesome! Thank you so much!

    1
  29. 1633

    Some time ago I was reading an amazing book about typography and it appears that in print, it is easier to read serif font in main copy and san serif in headlines – in contrast with screen typography. It may seem really boring for the beginners but the more You design, You start to like it, than love it and at the and You are a typography fanatic! :D

    1
  30. 1684

    I must be totally misfitted: I love the Trade Gothic Bold/Bell Gothic and Myriad Light/Minion Bold combinations!
    Trade Gothic Bold does its work for a heading and Bell Gothic is a delight to read.
    Myriad Light make me stay a long time on the heading, licking the slim lines (maybe that is the problem, spending to much time on the header) While Minion Bold will make a good steady ingress after that.

    1
    • 1735

      Douglas Bonneville

      November 9, 2010 7:50 am

      Hi Miro: Really, depending on context, content, and the roles of each typeface, you could just about any typefaces to play nice with each other. If you see something redeeming in on of the “bad” examples, you should run with it and optimize it. BTW, Bell Gothic is one of my current “new” old favorites :).

      0
  31. 1786

    Another great article. thanx for the effort. much appreciated.

    0
  32. 1837

    Great Article. Tk you for sharing.

    0
  33. 1888

    Excellent article! Thank you!

    0
  34. 1939

    This clarifies some typography questions I have been pondering for quite some time. Thank you so much – hugely helpful to my understanding of typographic design. You have done a good deed kind sir.

    0
  35. 1990

    It helps a lot with my design skill. Thanks heaps Douglas!

    0
  36. 2041

    usefull, usefull :) Thanks

    0
  37. 2092

    very good information. thanks.

    also, i want to point out some minor things. assigning roles section: p3 l2 – ‘roll’ should be ‘role’. keep it simple: p1 l2-3 ‘…using a classic sans serif and [serif] combination.’ sorry to nitpick.

    0
  38. 2194

    Great article, however as Douglas mentioned in the comments the example images were done in Photoshop. For those who are developing for the web you should be aware this is not what you’ll actually see.

    The context in which the images show make it seem like it’s being used in practice on an actual web based page, not a infographic or something that would be a graphic itself. Photoshop has a greater granularity for smoothing out fonts, which does not translate to what you would actually see on the page in a browser, even when using things such as font-smooth in CSS. PS is giving a beer goggle sort of vision that may not play the font out as you’d expect. Personally I would have liked to have seen these fonts actually being used in practice than to have been done in Photoshop.

    0
  39. 2245

    great article as always

    0
  40. 2296

    Great article! Even if I know a lot about typography and I agree with everything here, I saved this article for later. Love the examples ; )

    0
  41. 2347

    Love the dutiful Buckingham Palace Guard / little girl analogy!

    0
  42. 2398

    par excellence article!

    0
  43. 2449

    Most of the time a sans-serif heading with serif body text is suggested, but when I look around on websites (maybe I’m looking at the wrong places) I often see the contrary, where there is a serif heading with sans serif body text. How come? I thought perhaps because sans-serif mostly looks better on the web.

    0
  44. 2500

    Great article! I just didn’t quite understand the “mood” section, let me read again, but in the meantime, any help is welcomed.

    0
  45. 2551

    Good article.

    However, it’s interesting that you’ve used a far more readable light background colour for the ‘correct’ combinations.

    It would be interesting to see the designs with the ‘good’ typeface combinations using the wackier background colours.

    0
  46. 2653

    I think this is one of the best “art of typography” articles on the web today. Great concepts that are relevant to everyday work, and perfect examples to go with each. Thanks for sharing your insight!

    0
  47. 2704

    Thanks a lot… it’s exactly what I needed… I am trying to arrange a document, and make it appear more serious… I’m not a professional designer, but with these basics is enough for me!!!

    0
  48. 2755

    Very interesting article. It is fascinating to see which combinations work and which don’t.

    0
  49. 2806

    Great tutorial! I would like to ask you for permission for translating this post into spanish.

    0
  50. 2857

    Hi,

    Thank you for this article. I’m very inexperienced with typography.

    I guess this article, and most other articles are referring to pairing typefaces for body text and headlines.

    But what about selecting a typeface for logotypes that will complement the body text and headlines on websites? This is what I’m struggling with at the moment. I would love to read an article that explains the “rules” for selecting a typeface for logotypes to complement the rest of the site’s typography.

    0

↑ Back to top