Menu Search
Jump to the content X

Best Practices of Combining Typefaces


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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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

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 Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11

↑ 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 typeface combinations, he authored The Big Book of Font Combinations and developed the Font Combinations App. He is also proprietor of Oxbow SEO and Oxbow Domains.

  1. 1

    Nice post, i love this examples very useful.

  2. 2

    Clever article, thanks Douglas.

  3. 3

    I’m so happy to see this tutorial.

    I was looking for some tips to improve the typography on my WordPress theme SWIFT
    This tutorial is spot on.

  4. 4

    Good read – informative. One thing I would have appreciated are examples displayed on the same background for direct comparison with similar style treatments. This didn’t, however, detract from my enjoyment of the article or the lessons learned. Thanks!

  5. 5

    “Sabon works very well with Trade Gothic which is a serif typeface.”

    I think that needs to be reworded. Sabon is serif and Trade Gothic is sans (right?).

  6. 6

    Lovely article Douglas

  7. 7

    There is also the “make sure your chosen font family has a diverse set of weights” rule (not just regular, italic, and then the bold versions of both), otherwise your design will be severely limited.

  8. 8

    Love the examples, thanks for the post!

  9. 9

    Very useful article and a good read – thanks! If I had to make one suggestion I would agree with Karm (above )that it might have been more useful to compare examples on the same background :)

    PS – downloading your app now!

    • 10

      Agree here with the backgrounds, and even more I think the actual TYPE shoulda been the same colour, and without effects to be really usefull, notice all the “bad” examples are white and Embossed while the “good” are black and Debossed, creating a veeery different feeling.

      Nevertheless a good article.

    • 11

      My thoughts exactly. If you want to compare, make them comparable.

      However … I enjoyed the article and found it unusually informative and useful.

    • 12

      Same thing here, it stopped me from reading the full article. And I couldn’t stop wondering if you’ve designed these examples this particular way because you want to show your eye for markup and presentation or to give your point that extra boost of pursuation…

      Sorry, I’m not questioning your article and experience (because I’ve only read a few paragraphs), but I simply can’t read / view an article which relies on comparisons which have to much noise around.

  10. 13

    Excellent typography primer – guidelines for combining typefaces, are so often overlooked!

  11. 14

    Wow – I learned so much from this post. As an untrained designer typography is something I still have trouble wrapping my head around. I know good pairing when I see it – but know I understand better why.

    This post will be something I’ll reference for future work. Thanks so much for sharing!

  12. 15

    just in time. Tnx for the article!

  13. 16

    Typography is something I feel a lot of us struggle with. It’s nice to see an article addressing an issue in a clear and helpful manner. Thanks for putting this together.

  14. 17

    awesome article, very educational and great to come back to when in doubt

  15. 18

    Great article. Hoefler & Frere-Jones have some good info on this as well. The focus is on their typefaces but it’s still a good reference point. The forums on are also a good resource.

  16. 19

    Very nice post! Thanks

  17. 20

    Valuable post. I like it when it stays focused on a very specific aspect of a matter. Next step: White balance in typography?

  18. 21

    Garrick Van Buren

    November 4, 2010 8:19 am

    over at, we’ve kicked off a new membership program all about combining typefaces:

  19. 22

    Very Nice Post !! Thanks !!

  20. 23

    Great article. This is the worst part of my design skillset – typography. Which is probably the most important.

  21. 25

    Awesome!! Type nerds rock. It’s amazing how many designers don’t practice or even know the value of good typographic skills. It really is the keystone to high vernacular in design.

  22. 26

    Great article. Things that are slightly over looked but very important to a website.

  23. 27

    Joseph Cohen - UX Designer

    November 4, 2010 8:40 am

    Great post

  24. 28

    It’s been a while since I’ve read an article of this quality.

    I’ve been wanting to get to know more about typography for a while, this article introduced me to some terms while giving me a lot of usable information in a “starter friendly way”.


  25. 29

    Man this is awesome! You are awesome! I love the lexicon of adjectives you use to describe the relationships between and idiosyncratic personalities of different fonts. Your book is going in my Xmas wish list! :D

    A great weekend to you, sir!

  26. 30

    Excellent article, thanks! I enjoyed reading it and know I will come back to reference this in the future.

  27. 31

    Really interesting read. Cheers!

  28. 32

    Douglas Bonneville

    November 4, 2010 9:25 am

    Thanks for the kind words on the article. But thanks to Vitaly and team for the opportunity to write at Smashing Magazine.

    @Megan gets Comment of the Day: “[Typography] really is the keystone to high vernacular in design.” I love the sound of that bit of prose :)

    You are right. It should be “Sabon, which is a serif typeface, works very well with Trade Gothic”. I’ll see if I can get that fixed.

    It’s so boring to write boring, so I try to amuse myself first and foremost. Then I hope my amusement gets across to the reader :) I personally like to be educated and entertained at the same time. It increases retention!

    • 33

      Vitaly Friedman (Editor-in-chief of Smashing Magazine)

      November 5, 2010 2:17 am

      @Douglas, thanks, we just fixed the Sabon/Trade Gothic error. And thank you for your beautiful article, look forward to be working with you again on the next article!

  29. 34

    Love it! Thanks.

  30. 35

    Great post thanks for sharing with us.

  31. 36

    Fantastic examples – just what I was looking for – thank you!

  32. 37

    Very insightful thank you, have always underestimated the importance of typography in design. This has made me see the bigger picture :)

  33. 38

    Great post. Quick question: what did you use to generate the sample text?

  34. 43

    I know when type looks good, and when type looks bad. But articles like this really help me understand and be able to articulate *why*. Knowing that, I feel much more capable of actually using type effectively myself rather than just appreciating it.


  35. 44

    Martin Silvertant

    November 4, 2010 4:02 pm

    You wrote an article concerning things I already knew, but it was an interesting read nevertheless. I can’t agree with a few of your statements and examples though.

    “They [Trade Gothic & Sabon] are both focused on bold clarity with highly-readable glyphs due to their tall x-height.”
    That’s clearly true for Trade Gothic, but Sabon is a Garalde, which almost always means a relatively small x-height. And bold clarity? Why do you think the transitional serif, slab serif and sans serif were developed? Because the Venetian and Garalde types weren’t what you would define as bold clarity. Sabon is not the greatest choice for that example. I would have gone for a more modern serif with a slightly lower contrast and taller x-height.

    “In the example on the left [with Myriad Light for the heading and Minion Bold for the body text] , we have a decent size contrast, but not enough font weight contrast.”
    I agree that it’s generally smart to give headers some weight, but there are (of course) exceptions that work excellent. Open a fashion/women’s magazine and you will see plenty of headings in hairline sans serifs. Though of course they don’t set the body text in a bold font…

    “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.”
    Caslon is certainly a good choice for setting body text in print, but I don’t see how a Garalde fits with an ultra modern typeface such as Dax.

    And lastly, I like the colors of the pictures, but I feel like you’re cheating a bit by setting the wrong example in white on a dark background and the (supposedly) correct example in black on a light background as the latter environment is already easier to read; the purely typographical impact could potentially have been obtained by setting both examples in the same colors so it’s a fair comparison and the significance of the choice of type would have become more apparent.

    I might sound negative, but in all honesty and besides the points I just made, great article!

    PS: I know your work and experience so I hope I didn’t sound condescending; I’ve learned that typography – regardless of all those rules which are based on scientific aspects such as human perception and how the eyes/mind read(s) words – is quite a subjective area; not every typeface or combination of typefaces appeal to everyone or are equally well perceived, after all.

    • 45

      Douglas Bonneville

      November 4, 2010 7:19 pm

      Hi Martin: To keep the article short, I couldn’t go into every detail or back every assertion with detail. Regarding Sabon, I could have qualified what I meant about its x-height when compared to other similar serifs, like Garamond, Bembo, or Arno to name few popular ones. Yes, compared to Trade Gothic, the Sabon x-height is not as tall. That could be more clear.

      Dax and Caslon? It’s admittedly arbitrary, but the point of this article was to give plausible options for designers struggling with this topic with fonts they likely already had. Notice I qualified the use of Caslon only as a *sufficient* choice. There are certainly better modern serifs, but they are less likely to be known on a first name basis. Caslon is easily one the top 20 fonts of all time, and likely to get used a lot because of how its distributed with software packages from Adobe, for instance.

      “I feel like you’re cheating a bit by setting the wrong example in white on a dark background and the (supposedly) correct example in black on a light background…”

      I’m 100% busted on that one. A little drama never hurt anyone, right? Someone else pointed that out too. I think the next round we’ll do the same background and colors. Either way, the examples are fun to come up with.

      And I agree, typeface combinations are absolutely subjective :)

  36. 46

    It was pleasure reading your post. Thanks for sharing with us.

    Flash Animations

  37. 47

    Like always! good post and examples/showcases

  38. 48

    This is a classic combination, and it’s almost impossible to get wrong.


  39. 49

    This is a great article! It really opened my eyes concerning typographic use. And I really love the examples as well. Thanks!

  40. 50

    Great post! thanks

  41. 51

    I read smashing every day and I don’t think I have ever commented, but I think you are definitely one of the best writers on here. It shows especially in the comments section where you take the critique with a grace usually unseen in the blog format.

    • 52

      Douglas Bonneville

      November 4, 2010 11:10 pm

      Thank you Brandon. I think you, likewise, are one of the best commenters on Smashing, if you don’t mind me saying so :). I could be biased though.

      One of my most effective strategies for writing is maintaining a healthy fear of the “Submit” button, especially when that button sends a copy of what I’m writing to the Smashing editorial team. Don’t think twice, think like nine or eleven times before hitting that button!

  42. 53

    Interesting. It’s funny, because I don’t “think” about it as much as the above. I just “do” and I think I have the right eye to make decisions on the fly. But for junior designers, this is a great guide. It’s funny, because within a few seconds of glancing at your examples, I can see why some combinations work and some don’t immediately. Your explanations as to those harmonies and discourse – if not always based in rational reasoning – make sense. Good call.

    • 54

      Douglas Bonneville

      November 4, 2010 11:17 pm

      Robert : I agree rational deduction only takes you so far in many cases. But intuition is effective in direct relation to the facts and knowledge from which it leaps. So you study some rules, then you put the rules aside and play around. The rules keep you in the playground and out of the traffic in the street :).

  43. 55

    Very well written article, and has helped me immensely! Thanks SM! My favorite line and awesome metaphor!
    “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.”

  44. 56

    Very informative article. Shows how simple yet complicated Typography is. AWESOME!!!

  45. 57

    Thank you so much for this gift of knowledge. It brightened my day, and it’s not yet 10 A.M. I often wondered why my intuition didn’t always give interesting graphic results ;) I understand now!

  46. 58

    Nice article.

    In the “Avoid Similar Classifications” section you say that in the left example the body copy on the left is Officina Serif. But the picture says it’s Joanna.

    • 59

      Douglas Bonneville

      November 7, 2010 7:20 pm

      Hi Martin: The original example referenced Joanna, but I changed it to Officina in the copy. The corrected graphic is there now. Thanks!

  47. 60

    Why do you use Sans Serifs for headings and Serif for content? I thought that Sans Serifs are more readable on PCs and it will be better to use them for main content on the web. Is it a kind of a personal preference?
    Thanks in advance

    • 61

      Douglas Bonneville

      November 5, 2010 6:16 am

      Hi Zihotki: We aren’t necessarily talking about web. This article applies to both web and print. Sans Serifs are not necessarily more legible on on the web than serifs. Georgia, for instance, is used all over the web for both heading and body. But in creating combinations of typefaces, you normally don’t want to combine two sans serif typefaces. So if one needs to go sans, it’s usually the header or headline. Look at some popular news papers, for instance. Yes, there is a combination of both practical and personal preference.

      • 62

        Thanks for explanation. Yep, in real world the things are like you said. I’m not a designer but a programmer and I just like this stuff too and learn it. Thanks a lot.

      • 63

        Have to disagree about the readability bit – the majority of computer displays have much lower resolution than printed media, which means that for small sizes a sans-serif will generally be more readable, which is the reverse of print. But of course, defining exactly what size the cross-over occurs at is dependant on the particular fonts in use…

        • 64

          Douglas Bonneville

          November 7, 2010 7:25 pm

          I think the overall amount of text and width of the text container need to be considered on the web too. Text of any substantial length on the web or print is best handled by serifed fonts when set at a decent or user-adjustable size.

  48. 65

    excellent posting, i need to bookmark for future reference

  49. 66

    Good article.

    One point I’d make: I keep seeing (presumably webkit) debossed body text all over the web these days, and I find it terribly unreadable. I agree the effect can look good when applied judiciously on header text, but not on body text. Just because you *can* do it, doesn’t mean you *should*.

    • 67

      Douglas Bonneville

      November 5, 2010 10:31 am

      Loud and clear from quite a few people: no more embossing. Got it! I’m late to the trend. Perhaps “embossed text” can join “glossy web 2.0 icons” in an article about overused design trends :).

  50. 68

    Nice article. Very informative especially for a newbie like me. Another thing I appreciate is that the author respond to comments actively unlike others I’ve seen that just posts and seldom if ever respond to readers. two thumbs up to you!


↑ Back to top