BonFX

Typography & Graphic Design Blog

  • Facebook
  • RSS
  • Twitter
  • Blog
  • Books
  • Apps
  • About
  • Contact
You are here: Home / Graphic Design / 29 principles for making great font combinations

29 principles for making great font combinations

August 11, 2010 by Douglas Bonneville

When it comes to making font combinations, there are principles and methods, but no absolutes. You can’t apply all the principles or ideas listed here at the same time. Just peruse this list of ideas and see what strikes you as interesting, and then pursue creating your own interesting typeface pairs!

In no particular order of importance…

  1. Combine a serif and a sans serif to give “contrast” and not “concord”. The farther apart the typeface styles are, as a generic but not infallible guideline, the more luck you’ll have. Fonts that are too similar look bad together. Go for concord or contrast but avoid the murky middle ground where all you end up with conflict. Put Garamond and Sabon together to see what “murky” means. Or try Helvetica and Univers together, which is just as bad.
  2. Don’t choose two serifs or two sans serifs to create a combination, unless they are radically different in some way.
  3. Avoid choosing typefaces from the same categories, like Script or Slabs. You won’t get enough contrast, and will end up with conflict. For instance, Clarendon and Rockwell together is not a good thing at all.
  4. Get enough difference in point size between the various fonts to make contrast.
  5. Assign distinct roles to each font and commit to them without variance.
  6. Try finding fonts from different categories that have similar x-heights and glyph widths. For instance, Futura with Times New Roman just doesn’t work that well because there is too much contrast between x-heights and widths, but in this case, mostly widths. However, if you are going to work with a condensed font, you can overcome this problem because now you’ve gone for an extreme contrast.
  7. Find some kind of relationship between the basic shapes. For instance, look to the letter O in upper and lower case. Round letter O’s and taller oval O’s, in general don’t seem to like each other when creating pairs.
  8. Contrast the overall weight of the fonts. For instance, Didot and Rockwell look really bad together for many reasons, but one clearly because they both have a heavy presence and just look mad at each other on the same page.
  9. Pay close attention to what makes your eyes dart around. If your eyes are unsettled, something is off.
  10. Create different typographic colors. By color, I mean the overall tint a block of type has when you squint at it. If both of your type samples with different fonts blur to about the same color, try playing with font size, line spacing, kerning, or even substituting one font for a heavier or lighter one from the same typeface.
  11. Look for clever ways to create contrast. Increase the leading or tracking of one face while decreasing the other and see what happens.
  12. Don’t neglect the fact that using different fonts from the same typeface may also be perfectly suitable. That is why we provided them at the beginning of each font chapter in the Font Combinations book. You might do well with a Helvetica Black for a header and a Helvetica normal for your body.
  13. Try using typefaces from the same historical period. This will take a little bit of leg work, but not much.
  14. Don’t forget to consider how the italics of each typeface look. You might get a nice match with a bold / normal pair, but then discover that their respective italic fonts have a cat fight right in the middle of your composition. Don’t overlook this!
  15. Fonts that are too disparate may not work at all with a large amount of copy, but might work in a logo or strictly minimal text setting.
  16. Try your variations with larger and smaller amounts of text. Personalities multiply or get obscured with varying amounts of texts.
  17. Study and learn the classic typefaces on their own. Print them out and stare at them at lunch. Once you know them pretty well, then think about how they work with other typefaces. You’ll know much more going in to solve your design problem.
  18. Go for a neutral contrast where neither font overpowers the other, and they both are content to play different roles without usurping all the attention one way or another. This kind of neutral contrast allows the interior personality of each typeface to speak on it’s own.
  19. Find a combination that you didn’t make that you like and study why it works. The answers for further combinations are likely in there for you to extrapolate. The entire web is at your disposal for this research.
  20. Stick with high quality typefaces you know the names of. Many free or cheap typefaces are going to be missing important glyphs, and this will kick you later if you don’t take care of this up front.
  21. Stick to two typefaces, but use the natural fonts within those typefaces. This would give you up to 8 fonts to work with: normal, bold, italic, and bold italic. You could possibly have a third very unique font used in a very limited way, such as in the header of a magazine or logo. But if you require 3 or more fonts to achieve your objective, you might be working too hard at it.
  22. If you can’t put your finger on it, change something even if you are not sure what to change. Just change it. Keep moving, keep iterating. You’ll either find it, or change the font for something else.
  23. Change the font sizes. At certain point sizes, a font pair might not agree at all, but at a different point size, everything falls into place.
  24. Avoid mixing monospaced fonts with proportional fonts. Well, you can try it, but don’t say you weren’t warned. I can’t ever get combos from those styles to mix well to my eye. I want to like OCR-A with something, but OCR-A only seems to like itself with nothing.
  25. Contrast a distinctive header sans with a neutral body serif. It’s easy to get a golden combination when following that recipe.
  26. Don’t mix moods: work with complimentary ones. A light-hearted Gil Sans is not going to play well with an all-business Didot, at least not very easily. Either get two fonts in the same general mood, or get one with some personality and another with a neutral personality.
  27. Look for similar proportions, out of the box, and then set the fonts in distinct roles.
  28. Make it obvious. Typeface choices need to have clear distinctions  in order for a document to be legible. If there is not enough contrast, the visual hierarchy breaks down, and the roles you assign to different fonts won’t be clear.
  29. Break the rules. See what happens. There are no absolutes, and a clever designer can make just about any two typefaces combine to work to one degree or another.

Yo, Font-Addict! Make sure to check out The Big Book of Font Combinations. Go grab a copy from Amazon or B&N and stare at all 350+ examples of informative font combinations for web and print. You know you want to!


Filed Under: Graphic Design

About Douglas Bonneville

Douglas has been a graphic designer since 1992, in addition to software developer and author. He is a member of Smashing Magazine's "Panel of Experts" and has contributed to over 100 articles. He is the author of "The Big Book of Font Combinations", loves cats, and plays guitar.

Comments

  1. Phyllis says

    August 16, 2010 at 10:12 am

    Hey, this is an awesome list, thanks!!! BTW, in points #5 and elsewhere, I’m pretty sure the word you want is “role” not “roll.” 🙂

  2. Douglas Bonneville says

    August 16, 2010 at 12:13 pm

    Thanks Phyllis! I fixed the embarrassing typos. 🙂

  3. Joe Clark says

    September 10, 2010 at 2:22 pm

    Dude, don’t hy-
    phenate a headline.

  4. Douglas Bonneville says

    September 10, 2010 at 2:29 pm

    Oops. An unintended consequence of a using hyphenate.js! I’ll see if I can fix the CSS rules and exclude H1 tags. Thanks for pointing that out Joe!

  5. Douglas Bonneville says

    September 10, 2010 at 2:39 pm

    Thanks again Joe!

    For the record:

    http://code.google.com/p/hyphenator/wiki/en_HowToUseHyphenator

    So I added this:

    jQuery(document).ready(function() {
    var $j = jQuery.noConflict();
    $j(“#content”).addClass(“hyphenate”);
    $j(“h1”).addClass(“donthyphenate”);
    Hyphenator.run();
    });

  6. Douglas Bonneville says

    September 10, 2010 at 2:41 pm

    And let’s tweak one line of that to include all the headers I might use:

    $j(“h1, h2, h3, h4”).addClass(“donthyphenate”);

  7. Brett Widmann says

    September 14, 2010 at 1:17 am

    I’m always prone to breaking rule #2. I don’t know why, but I just am.

    Great set of principles. Definitely worth having posted on a wall as a set of typographical commandments 🙂

  8. Douglas Bonneville says

    September 14, 2010 at 1:21 am

    @ Brett: Thanks – and print them out so you can break them 🙂

  9. Jahmasta says

    November 5, 2010 at 6:31 am

    Great article, helpfull to have the rules of combinated fonts.

  10. Douglas Bonneville says

    November 5, 2010 at 9:54 am

    Thanks Jahmasta. This seems to be a topic a lot of people silently struggle with :).

  11. studiojones says

    March 11, 2011 at 10:25 pm

    Really like this post. A lot of these principles are not necessarily taught – most designers pick them up along the way. So it’s good to see all of these ideas in one place.

  12. Douglas Bonneville says

    March 11, 2011 at 11:21 pm

    Thanks Jason. It took some time and effort to gather it all together! Glad you found it of use!

  13. Stephen Tiano says

    August 31, 2011 at 2:38 am

    I’d just add, “Be careful with number 10.” You really do want uniform color on pages of a book.

  14. Douglas Bonneville says

    August 31, 2011 at 2:48 am

    @ Stephen:
    Yes, for something like literature or other single-thread text blocks. The assumption, which could be clarified in the example, is that the user is designing something like a web page or something complex that needs clarity in its information hierarchy.

  15. Stephen Tiano says

    August 31, 2011 at 2:53 am

    Okay, that makes better sense. Thanks for explaining.

Trackbacks

  1. Tweets that mention 29 principles for making great font combinations -- Topsy.com says:
    August 11, 2010 at 11:49 am

    […] This post was mentioned on Twitter by Jacci Howard Bear and Douglas Bonneville, Douglas Bonneville. Douglas Bonneville said: 29 principles for making great #font combinations http://bit.ly/9RMsra – #typography buffs, pls RT […]

  2. 29 principles for making great font combinations says:
    August 16, 2010 at 2:33 pm

    […] 29 principles for making great font combinations Aug 16, 2010 No Comments by designmodo When it comes to making font combinations, there are principles and methods, but no absolutes. You can’t apply all the principles or ideas listed here at the same time. Just peruse this list of ideas and see what strikes you as interesting, and then pursue creating your own interesting typeface pairs! Source […]

  3. 29 principles for making great font combinations : Speckyboy Design Magazine says:
    August 17, 2010 at 11:50 am

    […] Direct Link […]

  4. This Week in the Self-Publishing Blogs, August 15 – 21, 2010 — The Book Designer says:
    August 22, 2010 at 3:03 am

    […] Bonneville on bonfx 29 principles for making great font combinations “When it comes to making font combinations, there are principles and methods, but no […]

  5. Teaching the Static Image: Colour | Lynley Stace says:
    August 27, 2010 at 5:03 pm

    […] an image in their own right (e.g. as part of the picture). If they’re going to combine them, here are some […]

  6. This Week in the Self-Publishing Blogs, August 15 – 21, 2010 — The … | Self Publishing Companies says:
    August 28, 2010 at 3:30 pm

    […] Bonneville on bonfx29 principles for making great font combination…“When it comes to making font […]

  7. Best Practices of Combining Typefaces - Smashing Magazine says:
    November 4, 2010 at 10:40 am

    […] […]

  8. Best Practices of Combining Typefaces - Smashing Magazine says:
    November 4, 2010 at 10:40 am

    […] […]

  9. How does an engineer get started learning graphic design (color selection, texture, typography, shapes, etc.)? - Quora says:
    November 4, 2010 at 1:55 pm

    […] a dynamic date here  Ashit Vora, web junkie & aspiring entrepreneur http://localhost/wordpress/29-principles-f…Insert a dynamic date here BIU     @   @ ReferenceEdit […]

  10. links for 2010-11-12 - ReFactor.it says:
    November 12, 2010 at 3:02 am

    […] 29 prin­ci­ples for making great font combinations When it comes to making font com­bi­na­tions, there are prin­ci­ples and methods, but no abso­lu­tes. You can’t apply all the prin­ci­ples or ideas listed here at the same time. Just peruse this list of ideas and see what stri­kes you as inte­re­sting, and then pur­sue crea­ting your own inte­re­sting type­face pairs! (tags: typo­gra­phy fonts inspi­ra­tion gui­de­li­nes 2010) Scritto il 12/11/10 da giorgio_v. […]

  11. Tips and Resources to Make You a Better Designer Web Design DVD | Web Design DVD says:
    January 29, 2011 at 10:59 pm

    […] 29 principles for making great font combinations […]

  12. Complete List of Resources to Become a Web Designer | InspireMonkey - Neverending Web Curiosity! says:
    July 4, 2011 at 8:03 am

    […] enough to make everyone aware of it:Learn the Basics: 25+ Sites and Resources to Learn Typography29 Principes for Making Great Font CombinationsThe Beauty of Typography: Writing Systems and Calligraphy of the World50 Helpful Typography Tools […]

Subscribe to the BonFX Newsletter

Keep tabs on the latest typography and design books and apps from BonFX. If you subscribe today, we'll also send you the classic "Typography Primer" from Adobe!

Recent Inspirations

  • Claude Bernard: The Only Way to Learn June 25, 2019
  • Negative Space: Saying A Lot With Nothing June 25, 2019
  • Shadowy Black and White Watercolors by Artist Elicia Edijanto June 18, 2019
  • Copland on What Creativity is Not June 18, 2019
  • Ornate Leaf Sculpture and Crochet Art by Susanna Bauer June 18, 2019
  • How to choose from among all your great ideas June 17, 2019
  • What you see is not always what you are looking at June 14, 2019
  • The Key to Unleashing Your Natural Creativity June 14, 2019
  • An Artist According to Mondrian June 14, 2019
  • Henry Miller: Forget Yourself June 14, 2019
  • Become a better writer by the time you finish reading this post June 13, 2019
  • You Can Design Everything June 13, 2019
  • Minimalist Brand Identity for Your Cat June 13, 2019
  • Act Like a Child to Spark Your Creativity June 13, 2019
  • Less is More with Hong Kong Coffee Shop June 13, 2019

PAIRING PROBLEMS?


 

On Sale Now
Amazon / B&N

Copyright © 2019 · BonFX