BonFX

Typography & Graphic Design Blog

  • Facebook
  • RSS
  • Twitter
  • Blog
  • Books
    • The Preposterously Huge Book of Google Font Combinations
    • The Big Book of Font Combinations (Classic Fonts Edition)
  • About
  • Gallery
    • Monster Alphabet
    • Pen and Ink Cartoons
    • The Algorithm FX
  • Contact
You are here: Home / Typography / 19 best fonts in 19 top combinations

19 best fonts in 19 top combinations

February 26, 2019 by Douglas Bonneville

Top typefaces and pairings

Update: February 26, 2019: After nine years of the digital-only edition, the Big Book of Font Combinations is available in glorious, full-sized print editions: paperback and hardcover. Learn more!

Update: April 5, 2016: I recently compiled a list of the 19 most popular fonts according to usage by graphic designers from all over the web. I could have had 100, but I got it down to under 50, and from there whittled it down to just the 19 best fonts. Why 19? Because at exactly 20, the “long tail” shot right out and the differences in tallies became negligible. Take a look at those top fonts if you want and come right back because now we are going to have a little typography fun.

What we have here is that list of 19 top fonts once again, but this  time combined into pairs to give us 19 best font combinations.

How does combining fonts work?

I simply followed the golden rule of font combinations, which is simply to combine a serif and a sans serif to give “contrast” and not “concord”. For excellent font pairings, the farther apart the typeface styles are, as a guideline, the more luck you’ll have. Fonts that are too similar look bad. Set a line of Times Roman over Garamond and you’ll see what I mean.  I chose the simple model of a bold headline font and normal weight body font. All the font combinations got the same “lorem” text.

How did I choose the combinations?

I tried to mix it up, but had to make some arbitrary decisions. For instance, I could have picked Baskerville, Caslon, Garamond, or Minion, etc. (all serif typefaces) to go with Futura (a sans serif typeface). I simply choose to spread them out amongst themselves, keeping the use of repeats down to a minimum.


Yo, Font-Addict! Make sure to check out The Big Book of Font Combinations. Go grab a copy from Amazon or B&N, or grab the DISCOUNTED ebook PDF digital download version (40% OFF the hardcover retail price!) from the BonFX Store, and stare at all 350+ examples of informative font combinations for web and print. You know you want to!


The results

You may love some of these combinations and hate others, or be unphased by yet others (or you may think I dwell on this too much). However, this is not a fair fight. Pretty much any two fonts can be balanced out and made to work with each other in some type of context. Our context here was strictly delimited, and so any of these combinations might warrant further experimentation for even better results.

Finally, I tried to keep the look of each example as close as possible to each other. This involved using the occasional semibold or light to balance a font out at certain point size. I also tweaked font size and leading in the interest of creating uniformity amongst the examples.

So here we have the following items:

  • A very long chart of the font combinations
  • We must also technically call this a list of top typeface combinations, which is what it really is (Google “fonts and typefaces” for some spirited discussions).
  • A link to a PDF version (2 column) of the original I composed
  • A text list version of these combinations

19_top_fonts_in_19_top_combinations


Yo, Font-Addict! Make sure to check out The Big Book of Font Combinations. Go grab a copy from Amazon or B&N, or grab the DISCOUNTED ebook PDF digital download version (40% OFF the hardcover retail price!) from the BonFX Store, and stare at all 350+ examples of informative font combinations for web and print. You know you want to!


 

PDF Download:

Click the preview image below or download “19 top fonts in 19 top combinations chart“:

19_top_font_combinations_preview

Text version of list:

  • Helvetica / Garamond
  • Caslon / Univers
  • Frutiger / Minion
  • Futura / Bodoni
  • Garamond / Futura
  • Gill Sans / Caslon
  • Minion / Gill Sans
  • Univers / Caslon
  • Bodoni / Futura
  • Myriad / Minion
  • Avenir / Warnock
  • Caslon / Franklin Gothic
  • FF Din / Baskerville
  • Trade Gothic / Clarendon
  • Baskerville / Univers
  • Akzidenz Grotesk / Garamond
  • Clarendon / Trade Gothic
  • Franklin Gothic / Baskerville
  • Warnock / Univers

Enjoy these font pairings! Thanks again for reading and looking and downloading and printing!

Filed Under: Typography

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. Douglas Bonneville says

    September 20, 2009 at 11:23 pm

    Hey Dear Reader! If you think these examples are too small, please let me know and I’ll make bigger examples just for you 🙂

    Thanks,

    Douglas

  2. Maggy Graham says

    September 30, 2009 at 10:43 am

    Thanks for this, very helpful! One note: I was looking for a “g” in the greeking, and I don’t see one…. That would be helpful.

  3. Douglas Bonneville says

    September 30, 2009 at 10:48 am

    Hi Maggy: You are so right. We need a “g” in there. Maybe there is no “g” in Latin, but I’ll add one. I was going to redo these since I thought they were a bit too small as laid out in the blog. Check back in a week and I’ll have it updated for you (and me)…

  4. Jacob Cass says

    October 18, 2009 at 8:58 pm

    This is a great list, this is something that I wish more people posted about… I think something like this but on a larger scale would be a perfect post for somewhere like Smashing Magazine. hint hint 😛

  5. Phil D. says

    October 18, 2009 at 9:47 pm

    Fantastic article, really useful!

    I’m curious what are a few serif fonts you would recommend used with Gotham?

    thanks again for the article. Great stuff!

  6. Kevin Donnigan says

    October 18, 2009 at 9:59 pm

    I agree with Jacob on making this post not just in a magazine, but a feature within it. Very good post. I am going to forward this to my teachers and boss who continue to argue with me that serifs and sans-serifs shouldn’t be mixed. I knew what heck I was talking about!! ;-p

  7. Douglas Bonneville says

    October 18, 2009 at 10:24 pm

    Does Smashing Magazine accept guest article proposals?

    Big resources are time intensive but there is a direct correlation to the amount of original work and the amount residual traffic you get from an article! Man, if I only had 100 hours a day…

  8. Douglas Bonneville says

    October 18, 2009 at 10:29 pm

    Hi Phil: Thanks! Based on the list here, my first guess would be to pair Gotham with Warnock or Minion, because of their modern angularity. If those weren’t quite right, I’d take a nab at Caslon or Garamond next, but I’m not sure, based on memory alone, if the lower x-heights of Garamond would be too much against the open spaces of Gotham. With enough work and the right font from any of these serif faces, I bet you can get a winning combination.

  9. Douglas Bonneville says

    October 18, 2009 at 10:44 pm

    Hi Kevin: Thanks for the reference! I thought it was really important to have the PDF down load available as the screen resolution just doesn’t do the fonts justice. If you have an 11×17 printer, or can tile a letter-sized print, this looks great at a larger size.

    As for your teacher and boss who say that serifs and sans-serifs shouldn’t be mixed, I would say that they can be mixed if you mix them right. You certainly can mix them wrong to disastrous results. The one rule you have to stick to is create contrast (not too much) and not concord. Put Bodoni and Clarendon together to see what I mean. There is no way to make those look good. Or try Aksidenz Grotesk and News Gothic to really see something hideous that at first glance doesn’t seem wrong. The more you look at that combination the more it looks bad, especially if you get similar weights and point sizes.

    Too much contrast between faces also produces gag-inducing results. Just do this one in your head: Bodoni Poster with Helvetica Extra Light Condensed. Make sure you aren’t drinking or eating anything ;).

  10. Jasmin Halkic says

    October 19, 2009 at 2:45 am

    Very nice and useful list. Thank you.

  11. Ramiro says

    October 19, 2009 at 5:49 pm

    Excellents combinations, the chart is very usefull.
    Thanks.

  12. Jacob Cass says

    October 19, 2009 at 6:44 pm

    Yes of course, see this page:

    http://www.smashingmagazine.com/how-to-become-a-smashing-magazine-author/

  13. Jonathan says

    October 19, 2009 at 7:56 pm

    Wow, really great resource, cheers.

  14. Douglas Bonneville says

    October 19, 2009 at 7:01 pm

    Thanks Jacob! I thought the guys at Smashing Magazine did all their own writing! I popped them a note and they are interested in articles like these, about fonts. You said, and I agree, there aren’t enough good resources like this – at least on the web. When it comes down to it, all the really great stuff is in books, old and new, still. I’ll have to do the work and follow up with them about some ideas. Thanks again for the tip!

  15. SimplyForDesign says

    October 20, 2009 at 8:46 pm

    Great list, combinated Fonts look very well together. From my experience – combination of frutiger and egyptienne (also by Frutiger) also looks great;)

  16. Jasmyn Madison says

    October 20, 2009 at 9:02 pm

    This is a great resource, expecially for a new graphic design student like myself!

    Thanks!

  17. Most Interesting Ideas says

    October 21, 2009 at 2:04 am

    Love the Myriad / Minion combination. One question -> Why I dont see websafe font combinations? 🙂

  18. Douglas Bonneville says

    October 21, 2009 at 2:32 am

    Because I’m running my Windows 3.1 386 24Mghz in 2 bit color, at 640 x 480 in DOS mode with Mosaic, and all the web fonts look the same to me 🙂 🙂

  19. Web Design Maidstone says

    October 21, 2009 at 5:36 am

    Very useful, have downloaded and pinned to the wall!

  20. Douglas Bonneville says

    October 21, 2009 at 9:40 am

    Ah, I was hoping to hear someone did just that! Printing the PDF is really the way to go, even better if you have an oversized color laser on hand…

  21. Dion says

    October 21, 2009 at 2:05 pm

    Very useful list, thanks for putting it together.

  22. Ted Goas says

    October 21, 2009 at 4:31 pm

    It is great to see these font combination in action before choosing. About how long did it take you to create these previews?

  23. Douglas Bonneville says

    October 21, 2009 at 4:47 pm

    Hi Ted: I developed them in Illustrator, which is the PDF you see there, and then ripped the PDF or AI into Photoshop at a high enough resolution to allow me to cut the columns out to fill out the 470px wide slot I have, and rest at 72 dpi. I think I spent 4-5 hours on the graphics and production for the post – I can’t recall exactly. But I had done at least that amount of time in research for the parent post about the top 19 fonts. I’d say I spent between 8-10 hours on this and the parent post.

    This post, about a month old, finally caught wind in the last few days thanks to a few key tweets from Smashing Magazine and Jacob Cass. It will pass 10,000 views by weeks end according to how it’s tracked the last couple days. I think the big value-add in all the tweets and other trackbacks was that there was graphics and a PDF download. Several bloggers grabbed the big jpg and pasted it as-is into their posts – makes for some nice swiss-ish eye candy.

    So the big lesson I learned from this post is don’t cut corners, use lot’s of visuals, make it interesting, word hard, and the web will figure out that the post should do well!

  24. Ted Goas says

    October 21, 2009 at 5:00 pm

    Very cool! And yep, that’s how I found your post (though I forget if it was smashing or Jacob.

  25. Pol Moneys says

    October 21, 2009 at 6:28 pm

    wonderful.
    thank you.
    p

  26. Douglas Bonneville says

    October 22, 2009 at 2:36 pm

    Thanks for the comments everyone, so far. I thought I also might share the inspiration behind 2 of the combos: FF Din and Baskerville combination is really functionally equivalent to the Myriad and Minion combination. Myriad and Minion was, as many of you may know, pioneered and used ad nauseum by Adobe. I was sick of it for ages, but came around to it again, not sure why. I’m loathe to use Myriad these days because I used it so much in the past (I OD’d on it…) which is why I proposed a FF Din / Baskerville set as a working equivalent or at least starting point for a working combination. For that matter, you can make Frutiger work like Myriad with Minion. The contrast that works in a font combination is simply a compressed bold sans serif with a stout, open serif.

    Example: Picture this – Gotham Extra Narrow Bold paired Sabon. You could make that work quite nicely. I know we have some Gotham and Sabon fans reading this…

    My favorite reaction I’ve seen so far: “Futura and Bodoni…no, no, no!” 🙂 But remember the chart is meant to ask the question, not necessarily be the answer!!

  27. Erik says

    October 23, 2009 at 2:14 am

    What an amazingly cool list, so very useful especially for people like me who are starters on the graphic design corner. Great stuff, and thanks for sharing.

  28. B says

    October 23, 2009 at 2:06 pm

    Fantastic, thanks a million!! I send you a virtual beer !!

  29. Douglas Bonneville says

    October 23, 2009 at 2:10 pm

    Hey Brent: Anything amber will do, but if no-can-find, a Guinness Extra Stout is suitable 🙂 If creating typeface pairs like these leads to free beer, I’m on to something wonderful…

  30. Douglas Bonneville says

    October 23, 2009 at 2:12 pm

    Erik: I thought it was odd that there was such a dearth of typeface pair examples on the web! Thanks for stopping by…

  31. Hugh Adams says

    October 28, 2009 at 2:47 am

    Thank you for taking the time to create this list. I’ve printed off your combination list to keep for reference in the office.

  32. Douglas Bonneville says

    October 28, 2009 at 10:30 am

    Hi Hugh: I have been getting excellent feedback for the PDF – glad you find it useful enough to print. It’s funny how with everything on the internet these days, there is still strong value in printed material that you can hold, touch, examine. Something about human curiosity…

  33. John S. Hall says

    November 5, 2009 at 12:51 pm

    Doug — great list! I’m going to download the PDF and add it to my wall o’ inspirations, because I’m always looking for good font pairings.

    The only combination I would suggest — and one I’ve used with good results — is Clarendon Bold as the headline with Franklin Gothic as the body copy.

    Also — no combos with Palatino? 🙁

    Cheers,
    John the Fontaholic

  34. Doug Bonneville says

    November 5, 2009 at 12:59 pm

    Thanks John. I have some other PDF ideas in the queue that I think would be helpful. I’m still surprise this little article caught the attention of so many. In looking around the net after the fact, I found indeed not much has been said, and even less demonstrated.

    I have warm fuzzies, always, for Palatino, but it wasn’t in the list of 19 fonts I decided to work with. I believe though it was in the top 40 I started working with. How could it not be? However, you could swap in Palatino for any other of the classic serifs in the list for similar results. I have since found other “rules” that other people came up with that tried to tie x-heights of serif / sans serif combos, but there are so many other factors including units per letter, leading, kerning, overall font sizes, etc, which effectively means you could find a sweet spot among spots for pretty much any 2 fonts with enough tweaking. Not that they would all be equally pretty, but even with 2 utterly diametrically opposed typefaces, you could theoretically find the best combination among a series of bad ones, after playing with all the variables at your disposal.

  35. Doug Bonneville says

    November 5, 2009 at 1:01 pm

    Oh, and Clarendon and Franklin Gothic would work equally as well as Trade Gothic. Excellent suggestion. In fact it might be a touch better suggestion!

  36. Douglas Bonneville says

    November 11, 2009 at 1:00 am

    Hey Jacob! I got your tweets about the upcoming font combinations article, but I can’t send you a direct tweet for some reason. Twitter has no names to chose from in the dropdown :(. But email me at douglas@bonfx.com or if you want, we can chat about it here….

  37. Shabbir Hussain says

    December 4, 2009 at 8:19 pm

    Great article. Was actually googling around for suggestions regarding Sans-serif fonts. Thanks.

  38. Irene says

    December 24, 2009 at 12:07 am

    Nice post!
    Thanks 4 sharing 🙂

  39. art2code says

    December 24, 2009 at 10:11 am

    Nice list! thx for sharing !

  40. Tiffany says

    December 25, 2009 at 12:41 am

    Sorry, this is a small but annoying thing– it’s actually “Lorem ipsum DOLOR sit…” (not dolar).

  41. Douglas Bonneville says

    December 28, 2009 at 10:29 am

    I can’t believe I let that slip through! I’m going to have to fix that! Thanks for catching that!

  42. John S. Hall says

    December 28, 2009 at 10:47 am

    Hi Doug,

    I’m glad that I could be of help you and your superlative combinations! 😀

    Happy Holidays,
    John the Fontaholic

  43. Rachel says

    February 12, 2010 at 8:43 pm

    Thank you so much—your article is much appreciated!

  44. Douglas Bonneville says

    March 9, 2010 at 6:54 pm

    Hi All! My new iPhone app based on the research done for this post just went live a few minutes ago:

    http://bit.ly/dklncO

    Every typeface mentioned above is in the app, and you can recreate all of the typeface combinations easily just by swiping the header or body. All said, this version has about 2000 font combinations you can make. Not all will be workable of course, but that is the fun.

    Frutiger + Bembo = sweet

    Lithos + Trajan = utter disaster

    Take a gander if you have an iPhone or iPod Touch. The preview page link above has some nice big screenshots and complete description.

    It’s my first iPhone app too. It was a very interesting process I’ll make a post about in the coming weeks.

    I’m hard at work at the iPad version which will be huge on screen.

    Thanks!

  45. Jae Xavier says

    April 13, 2010 at 2:55 pm

    First, I’m going to nail this to my office wall.
    Second, I’ll post a copy and frame it in my bathroom.

  46. Douglas Bonneville says

    April 13, 2010 at 2:57 pm

    @ Jae: Now THAT’S a happy reaction if I ever saw one!

  47. Pete says

    May 11, 2010 at 7:01 am

    This will be extremely helpful – great work.

  48. designi1 says

    May 25, 2010 at 4:39 am

    The combinations looks pretty good. Sad some fonts are payable ones :/

  49. Stephen Coles says

    June 12, 2010 at 3:41 pm

    Nice effort. One nitpick: Univers is misspelled in your images.

  50. Douglas Bonneville says

    June 12, 2010 at 8:53 pm

    Stephen: Wow. I can’t believe that made it all the way through and you are the first person to catch it. Thanks so much. Spell check is your friend and your enemy sometimes. I’ll fix that right away! I owe you a beer or a free copy of my book or something :).

  51. Ileana says

    June 22, 2010 at 3:08 am

    Hi Douglas,

    Great resources. I also installed the iPhone app. Thanks. I also wanted to ask u about an specific problem I am having right now. I am designing a logo for a client and I am using his signature as the main typography. I have to add the word “design” to the composition and I am having a hard time deciding about what typography I should use. His signature looks like an script typeface. I tried several combinations and so far my preference is eurostile and bauhaus. He is a painter and the logo communicate freshness, creativity. Anyway, I will really appreaciate your comments. Thanks in advance for your help.

    Ileana

  52. Douglas Bonneville says

    June 22, 2010 at 3:13 am

    Hi Ileana: Thanks for trying the app! I would say that you want a typeface that is sans serif and neutral. Eurostyle comes close, but depending on the signature and how freeform it is, some other sans serif might work too. I would think Bauhaus has a little too much personality, but again, I’d have to see it. Feel free to email me a graphic. I’d be more than happy to try a few options and just see what happens and send you the results.

  53. Sharon Reus says

    July 7, 2010 at 5:26 pm

    Ridiculously helpful. Thanks!

  54. Douglas Bonneville says

    July 7, 2010 at 5:56 pm

    @ Sharon: Most welcome!

  55. Franke UK says

    September 9, 2010 at 7:07 pm

    I have just stumbled across your site, and I am sooo happy that I did. Great article and I will be definitely be using the combinations list. Thank you

  56. Douglas Bonneville says

    September 10, 2010 at 2:46 pm

    @ Franke UK:

    Glad you found the site and the list, but more so that you found the list useful!

  57. Jackie says

    November 28, 2010 at 5:28 pm

    I’m new to design & really appreciate this list!

  58. Douglas Bonneville says

    November 28, 2010 at 5:29 pm

    @ Jackie: I’m glad you found it useful!

  59. Douglas Bonneville says

    December 22, 2010 at 2:38 am

    It only took 6 months, but I fixed the typos in the graphics. Spell check was convinced Univers was spelled Universe. The PDF has been regenerated too. Hat tip to Steven Coles 🙂

  60. Fortelegy says

    January 10, 2011 at 2:24 pm

    I found this list while looking around for different typefaces that would be a good investment and that typically go hand in hand.

    I’m a Graphic Design student and I found this list to be very helpful for some typography i’m working on for a client. I’ll probably print it out and put it up on my wall. Like you said, it’s not exhaustive, but it’s a great little way to get the feel for what works well.

    Thanks!

  61. Douglas Bonneville says

    January 10, 2011 at 4:27 pm

    @ Fortelegy: Glad you found the list useful! The list does help get some ideas flowing…

  62. Flavio Mester says

    January 10, 2011 at 5:37 pm

    Excellent, I’ll share it with our clients. Any suggestions specifically for the Web? Not just system fonts, but using the current fonts available through @font-face as well. Thanks!

  63. Douglas Bonneville says

    January 10, 2011 at 9:05 pm

    @ Flavio: I’ve been pecking away at a web version…I’ll post back to this thread when I have one done.

  64. Flavio Mester says

    January 10, 2011 at 10:11 pm

    Great, looking forward to seeing it.

  65. Alexander Stanuga says

    February 15, 2011 at 2:56 pm

    Very impressive! great, practical article. A big fan of the font combo iPhone app aswell. 1 thing that struck me though, I find it interesting that both Helvetica & Akzidenz Grotesk, being quite similar, are paired up with Garamond.

  66. Douglas Bonneville says

    March 6, 2011 at 8:59 pm

    @ Alex: If used carefully, both Helvetica and Garamond can pair up with a truly huge number of typefaces. Some typefaces are more pigeonholed than others, but Helvetica and Garamond just seem to know no bounds 🙂

  67. Oscar says

    March 18, 2011 at 3:31 am

    Thanks man… you saved me a lot of time…

  68. Kate says

    April 1, 2011 at 8:49 am

    Thank you so much for putting this out! Highly valuable information for beginner designers as I am 🙂 Thank you for your work!

    Sincerely,
    Kate

  69. Francis Boudreau says

    April 6, 2011 at 3:24 pm

    Thanks for this list! It’s nice to see some type combinations. Thanks again!

  70. Lisa says

    April 25, 2011 at 4:55 pm

    I have been waiting for this list all my web designer life. Thank you. It is already pinned to my cube and Delicioused so I can go back to it. 🙂

  71. Kate says

    June 11, 2011 at 3:48 am

    This is brilliant, thanks so much. After hours of fruitless tinkering with header / body combinations for a new website design (and pretty much hating all the results) I’ve realised there is a LOT more to this than meets the eye. And as I don’t have a year to get up to speed, i think i’ll just stick to one of your combos that I like!

  72. Douglas Bonneville says

    June 11, 2011 at 3:50 am

    Hi Kate – so glad you found something useful!

  73. dustin says

    July 1, 2011 at 11:42 am

    serif – sans serif
    sans serif – serif
    serif – sans serif
    sans serif – serif

    Is that it?

  74. Douglas Bonneville says

    July 1, 2011 at 11:58 am

    @ dustin: For this very limited little post, yes 🙂

  75. Aimee says

    July 12, 2011 at 4:34 pm

    What are the fonts for the orange sub headings? (ie: Helvetica & Garamond, Caslon and Univers).

  76. Douglas Bonneville says

    July 12, 2011 at 4:38 pm

    What a lovely question. The answer is my favorite typeface for some time now, New Century Schoolbook. It’s also in the title and other places in “The Big Book of Font Combinations” and in the logo and UI for the Font Combinations app. 🙂

  77. David says

    July 24, 2011 at 5:52 pm

    thank you for this line up, can you tell me how you go about adding these to a webpage?

  78. Douglas Bonneville says

    July 26, 2011 at 2:48 pm

    Hi David: These fonts are primarily print-based fonts, but most of them are probably available on TypeKit, now that Adobe’s collections are showing up more and more. You’d have to take a look there, or at another web font service.

  79. David says

    July 26, 2011 at 3:05 pm

    I new a service like that existed somewhere but could never find one accept Google fonts(quite lame!).

    Thank you so much.

  80. Tim Kelly says

    August 21, 2011 at 3:30 pm

    I like to use Times New Roman as the body type for my correspondence. What sans serif(s) would you recommend as the contrast type for the header?

    Thank you.

  81. Douglas Bonneville says

    August 21, 2011 at 3:57 pm

    Hi Tim: It depends on what typefaces you have access to on your system, but if you wanted to pair that up with a nice, classic sans serif, either News Gothic or Trade Gothic work pretty nice. Basically you want sans serif font that is a bit narrow and tall.

  82. Filip says

    August 25, 2011 at 11:15 am

    This is great. I like it… But isn’t it Lorum Ipsum *Dolor*… not “Dolar”? 🙂

  83. Douglas Bonneville says

    August 25, 2011 at 11:20 am

    You are correct. I had nabbed a “lorem” from somewhere that had it as “dolar”. Evidently quite a few people get that wrong, after googling around a bit. We should know our Latin better 🙂 Regardless, I’ll get that fixed because now it really bugs me!

  84. Ragdoll says

    October 11, 2011 at 1:28 pm

    I would love to see this pushed further. What about pairing two sans-serif faces together? What about using a non-bold heading? Why did you choose to pair each of these fonts together?

  85. Douglas Bonneville says

    October 12, 2011 at 9:46 pm

    The exercise was to simply use each typeface in a header position (usually bold) one time, but paired up with one of the other top 19 typefaces to show the possibilities (some good, some not so good) with a strictly limited palette. So I could re-do this experiment with non-bold headers and see what comes up. But instead of doing that, I put the time and effort into the Font Combinations App and then the Big Book of Font Combinations, since those cover much more ground than one article ever could!

  86. Jamie says

    January 18, 2012 at 12:49 pm

    Terrific resource! And I love that you have made it available in PDF format!! Many many thanks!

  87. Free fonts says

    January 23, 2012 at 3:25 pm

    Thanks for sharing this great font list. for using them in heading and title. i will use them in my next projects!

  88. Marco Berrocal says

    March 26, 2012 at 12:45 am

    Would LOVE to see two sans-seriff boded together in font combinations to see how well they stack against each other.

  89. muazfaris says

    March 29, 2012 at 8:58 pm

    oh, helvetica is best combine with garamond.. how about georgia?

  90. Douglas Bonneville says

    March 29, 2012 at 10:28 pm

    Georgia was designed for the screen and Helvetica was designed for print. I can’t see those two working very well together. They are different in many uncomplimentary ways, if you ask me.

  91. Parag says

    July 5, 2012 at 11:33 am

    what is a good serif typeface to pair with OPEN SANS (sans serif)

  92. Douglas Bonneville says

    July 5, 2012 at 11:50 am

    Paraq:

    If you mean for web, a stock answer is Georgia, though Georgia is getting long in the tooth these days. I’m using Open Sans for headers of various sizes but haven’t had great luck finding a serif that has good looking italics that is also a web font AND has a tall x-height to go with Open Sans. So those are the criteria: tall x-height, web font, and has a full italic (not just a right-slanted normal face, or “faux italic” 🙂 ).

  93. Adrienne says

    August 22, 2012 at 3:49 pm

    I downloaded Neuton from Font Squirrel for a project I’m having printed through My Publisher.com. I have two issues.

    First, how small can I go and have this still considered readable? Right now I have the font at 10.5.

    Second, I’ve noticed that when I use the quote marks the spacing is really off. Is this because the font is not a good one or it just looks off but won’t be off? Or should I be getting the font from a different supplier to get a crisper version? I use a Mac.

    Thanks in advance for your thoughts.

  94. Douglas Bonneville says

    August 23, 2012 at 5:53 pm

    Adrienne: All typefaces are so different, it’s hard to say what is too small. One thing you can do to benchmark though is set the same copy you are using in Times Roman 6pt and compare how the Neuton 10.5 pt looks. Times Roman set at 6pt on business cards is considered the smallest you should ever go…and that’s pretty small. If the Neuton 10.5 is as-readable as Times at 6pt, you should be OK. If not, you’ll have to bump it up.

    If the spacing for quotes marks is just “off”, it’s because of poor hinting in the font itself. Higher-quality fonts don’t have this issue. However, if Neuton is more of a display font (I don’t have a sample handy), it’s not common for those types of fonts to be unoptimized. You’ll have to fiddle with the kerning and tracking yourself if that is the case.

    Good luck!

  95. Scott Lindsey says

    May 17, 2013 at 3:24 pm

    Thank you for the chart! It’s a great reference and time-saver.

  96. Douglas Bonneville says

    May 17, 2013 at 3:25 pm

    Glad you can get some mileage it out of it Scott!

  97. Blue Popovic says

    June 14, 2013 at 5:28 pm

    For a newbie to font combinations, I must say your explanation and demonstration was not only flawless but executed in a friendly approach …and treating us to a PDF on top : thank you so much! May I ask what the typeface is in the main body of your article (e.g “I simply followed the golden rule of font combinations, which is simply to combine a serif and a sans serif to give “contrast” and not “concord”. The farther apart the typeface styles are, as a guideline…”) ?

  98. Douglas Bonneville says

    June 15, 2013 at 11:06 am

    Thanks Blue, and I hope you get some mileage out of the PDF. The font stack for body copy on bonfx.com is currently: “Helvetica Neue”, Helvetica, Arial, sans-serif. So, it depends on what you have on your system.

  99. Henry A. Taylor says

    June 23, 2013 at 6:51 pm

    Hi Doug, many thanks, you helped me a lot. A question that just arose: I’m writing a book where, obviously, I can’t use bold fonts, neither in the body nor with the names of the chapters, ’cause it would look horrible. Does it work if I don’t combine serif with sans serif but use only one typeface throughout the whole book (Adobe Garamond Pro) both in the body and in the chapter titles? I would use small caps to highlight chapter titles anyway, but would use Adobe Garamond Pro only. What do you think? Thanks in advance.

  100. Douglas Bonneville says

    June 23, 2013 at 6:53 pm

    Absolutely you can use the same typeface throughout the whole book. Can’t go wrong with a Garamond for a timeless, classy look. The key will be making sure the cover design integrates with the look and feel that Garamond gives you. Small caps in the chapter titles would be very classy. So, indeed, a sure-fire way to make sure your typefaces integrate is to…use one typeface!

  101. Henry A. Taylor says

    June 23, 2013 at 7:17 pm

    Superb, million thanks for the fast reply. Definitely, I use Garamond with the cover, so I can’t be wrong then. (*Relieved sigh*) Just another short Q: I was told to avoid page numbers on chapter starting pages, but to me the layout seems much more coherent if I use continuous numbering. Do I have to follow this rule, I mean, does it look less professional to do so?

  102. Douglas Bonneville says

    June 23, 2013 at 7:28 pm

    Well you don’t have to follow a rule but, take a look at a few books on your bookshelf. See what they do. The first nonfiction book I grabbed from my bookshelf had page numbers on the chapters. I think it’s a matter of taste, design, and preference.

  103. Henry A. Taylor says

    June 23, 2013 at 7:50 pm

    Thanks again. I came across your blog totally by chance but I really like what you’re doing. I’ll be a follower (and come up with some silly questions once in a while) if you don’t mind 😉 Best of luck.

  104. Korede says

    July 16, 2013 at 5:35 pm

    What combination would you recommend as the best for a book of poem?

  105. Douglas Bonneville says

    July 16, 2013 at 5:57 pm

    Without knowing what kind of poetry is, but also considering that it shouldn’t matter too much, I’d personally go with something classic and readable. I’d make the body, and perhaps title, something eminently readable like Garamond, Bembo, or Jensen. For titles or chapter titles, TOC or Index, I’d off the bat consider a neutral sans-serif like Helvetica Neue, Frutiger. For a bit more personality that is still classic, you can do a Futura or Aksidenz. There are so many options and personalities that would happen based on how these are combined, it’s hard to say 🙂 Please check out The Big Book of Font Combinations for some ready made pairs and other ideas.

  106. Pradnyaa J says

    August 9, 2013 at 1:22 am

    Thats a helpful post.
    I’m in the process of selecting fonts for a print project. I’ve shortlisted Both Helvetica Light and Myriad Pro; yet to decide between the two.
    What would suit as a heading font for these you think?
    Thanks!

  107. Douglas Bonneville says

    August 9, 2013 at 1:32 am

    Hi Pradnyaa. It’s really not possible to say which typeface is better for headings not knowing anything else about the design, body copy, etc. Those typefaces have such different personality. I do know that Myriad as a heading looks great with Minion or something very close to it for the body. Adobe used this combination for ages going back 20 years. It’s time tested and looks nice and classy.

  108. Pradnyaa J says

    August 9, 2013 at 11:20 pm

    Thanks Douglas!

  109. Scott says

    September 15, 2013 at 6:35 pm

    An interesting post, but sadly I didn’t help me. I’m going round in circles looking for good choices to go with Verdana as body copy. So far I’ve narrowed it down to Lora, Georgia, Liberation Serif, Avenir Light and Gill Sans Light. I cant seem to decide which one of these, or even if a different one would be better?

    What do you think? Thanks 🙂

  110. Scott says

    September 15, 2013 at 6:36 pm

    Sorry, just to clarify, Verdana is the body text, and the fonts I mentioned would be for titles etc. Thanks!

  111. Douglas Bonneville says

    September 15, 2013 at 11:59 pm

    Hi Scott: From the list you mentioned of header fonts to go with Verdana, You can cross out Gill Sans and Georgia. Never use a serif and a serif that are remotely close to each other in classification or style. Not sure about Liberation Serif but Avenir gets you going in the right direction. The basic formula that would be hard to miss out with would be sans serif for the header, and serif for the body, as long as you can make them work with eachother after playing with weights and sizes from the family you pick. Verdana, however, is just not a nice typeface no matter what you pick (it was designed for old-fashioned CRT monitors that blurred text more easily). The only face from your list remotely suitable is Avenir, but you can still do better if you keep looking. That’s my 2 cents!

  112. Scott says

    September 16, 2013 at 12:12 pm

    Thanks Douglas. But I’m confused about something – I thought I’ve read that it was a good idea to combine a serif (titles) and a sans-serif (for body)? The site is a dark background site, so I chose Verdana as it needs a good clear font.

    I also thought that I read that when a serif and sans-serif are similar, they would make a good match. I’m sure I’ve seen Georgia and Verdana be recommended as a good match?

  113. Nina says

    January 31, 2014 at 2:16 pm

    Thanks for sharing! My favorite font will always be helvetica formal because it’s so versatile.

  114. Glickly says

    September 29, 2014 at 10:30 am

    I’ve been reading up on how to choose a font type but hadn’t seen anything in relation to ‘combining’ fonts before. This list is handy. For me- it’s helvetica all the way.

Trackbacks

  1. Twitted by justcreative says:
    October 18, 2009 at 9:09 pm

    […] This post was Twitted by justcreative […]

  2. Twitted by behoff says:
    October 27, 2009 at 9:47 pm

    […] This post was Twitted by behoff […]

  3. Wylie’s Writing Tips, November 2009 : Wylie's Writing Tips says:
    December 6, 2009 at 3:06 pm

    […] The golden rule of font combinations, according to graphic designer Douglas Bonneville, is to combine a serif and a sans serif font to give “contrast” and not “concord.” With that in mind, Bonneville suggests these 19 top font combinations: […]

  4. 19 top fonts in 19 top combinations | Design Newz says:
    December 23, 2009 at 7:31 pm

    […] 19 top fonts in 19 top combinations […]

  5. 19 top fonts in 19 top combinations « The Gymnasium says:
    February 22, 2010 at 1:26 pm

    […] February 22, 2010 · Leave a Comment 19 top fonts in 19 top combinations. […]

  6. Mac 19 font combinations: text and header says:
    March 4, 2010 at 12:19 pm

    […] as a novice to fonts it broke fonts down so even I can choose between a few choices. The article 19 top fonts in 19 top combinations is a first start for those that need to buy a clue from their local graphic artist. But better yet, […]

  7. Arte del Web – Il blog dei e per i designers » Blog Archive » Le migliori 19 combinazioni di caratteri per un sito web says:
    April 5, 2010 at 6:14 am

    […] molto interessanti. Oggi invece, vi segnaliamo le migliori 19 combinazioni di caratteri secondo Bonfx. E’ possibile vedere il PDF contenente le combinazioni cliccando qui. Sicuramente […]

  8. Fonts: Escolhendo a fonte perfeita para o seu site. « mnakashima's Blog says:
    April 6, 2010 at 6:55 am

    […] qual fora projetada, permitindo ao usuário final a harmonização dos elementos visuais), o site: bonfx criou uma lista com 19 pares de combinações de fontes para seu site (Em Inglês), se pensas em […]

  9. Monkey + Monkey = Match « Zoom Creates Blogs says:
    April 28, 2010 at 4:42 pm

    […] list of fonts and their matches Cheat Sheet on mixing typefaces Top type combos with a PDF to illustrate Great article from Font Shop about combining fonts with Helvetica And apparently there is an iPhone […]

  10. What is your favorite font combinations? - Digital Scrapbooking Community - DesignerDigitals says:
    May 31, 2010 at 4:18 pm

    […] could look at these 2 articles: 19 top fonts in 19 top combinations 14 Top Typeface and Font Combinations Resources They do focus on desktop publishing but the […]

  11. otherwise » 19 top fonts in 19 top combinations says:
    June 4, 2010 at 2:31 am

    […] 19 top fonts in 19 top combinations […]

  12. mnakashima | Blog | Fonts: Escolhendo a fonte perfeita para o seu site. says:
    September 22, 2010 at 11:36 am

    […] qual fora projetada, permitindo ao usuário final a harmonização dos elementos visuais), o site: bonfx criou uma lista com 19 pares de combinações de fontes para seu site (Em Inglês), se pensas em […]

  13. Hello world! says:
    October 4, 2010 at 1:30 pm

    […] 19 Top Fonts and 19 Combinations […]

  14. What fonts go together well? | says:
    October 26, 2010 at 5:33 pm

    […] 19 top fonts in 19 top combinations […]

  15. Mastering Font Combinations | The best Tutorials says:
    January 7, 2011 at 1:30 am

    […] you need a type combination and you need it immediately, check out Douglas Bonneville’s 19 Top Fonts in 19 Combinations. This cheat sheet culls the 19 most popular web fonts, imagines them as headers, and pairs them […]

  16. Mastering Font Combinations | Bitmag says:
    January 7, 2011 at 12:20 pm

    […] you need a type combination and you need it immediately, check out Douglas Bonneville’s 19 Top Fonts in 19 Combinations. This cheat sheet culls the 19 most popular web fonts, imagines them as headers, and pairs them […]

  17. Font Combinations | Local First Internet Marketing says:
    January 9, 2011 at 9:32 am

    […] Douglas Bonneville has posted a great resource: 19 top fonts in 19 top combinations […]

  18. Fresh Design Links & Inspiration #4 | Andrew Kelsall | Creative Designer says:
    January 11, 2011 at 11:16 am

    […] out, these textures are available for you to use in any of your projects – personal or commercial.19 top fonts in 19 top combinationsI recently compiled a list of the 19 most popular fonts according to usage by graphic designers from […]

  19. Mastering Font Combinations | Resources says:
    January 15, 2011 at 10:02 am

    […] you need a type combination and you need it immediately, check out Douglas Bonneville’s 19 Top Fonts in 19 Combinations. This cheat sheet culls the 19 most popular web fonts, imagines them as headers, and pairs them […]

  20. Mastering Font Combinations | SEO Domains says:
    January 16, 2011 at 8:44 am

    […] you need a type combination and you need it immediately, check out Douglas Bonneville’s 19 Top Fonts in 19 Combinations. This cheat sheet culls the 19 most popular web fonts, imagines them as headers, and pairs them […]

  21. Pairing typefaces in book design | David Airey, graphic designer says:
    March 4, 2011 at 5:12 am

    […] 19 fonts in 19 combinations, on BonFX […]

  22. Design Charts for Better Typography and Color - Noupe Design Blog says:
    March 21, 2011 at 8:04 am

    […] 19 Top Fonts in 19 Top Combinations This great chart provides an instant visual reference to good combinations of popular fonts, including Helvetica, Garamond, Gill Sans, Minion, and more. […]

  23. Daily Digest für April 2nd, 2011 — Amys Welt says:
    April 1, 2011 at 8:02 pm

    […] 19 top fonts in 19 top combinations […]

  24. Examples of Excellent Font Combinations in Web Design | The Blog of Janna Hagan - Web Designer & Developer says:
    April 11, 2011 at 1:25 pm

    […] sure to check out 19 Top Fonts in 19 Top Combinations and Four Ways to Mix Fonts by H&FJ. Both are excellent resources for future […]

  25. Mastering the Art of Font Combination « The FontGear Blog says:
    April 14, 2011 at 4:57 pm

    […] Really in a pinch? Check out this list of fool-proof font combinations by Douglas Bonneville here. […]

  26. A Crash Course in Typography: Pulling It All Together - Noupe Design Blog says:
    April 18, 2011 at 5:31 am

    […] 19 Top Fonts in 19 Top Combinations A look at combining some of the most popular fonts used by designers. […]

  27. Falling in love with a typeface, and other print things | Dinidu Writes says:
    April 24, 2011 at 11:38 pm

    […] a last note, this post from bonfx has 19 combinations of the top 19 fonts, and a handy, printable PDF version of it that […]

  28. Typography Geekout Recap | Atomic Spin says:
    June 28, 2011 at 3:24 pm

    […] 19 top fonts in 19 top combinations […]

  29. Quora says:
    September 5, 2011 at 6:05 pm

    What typefaces complement Helvetica best?…

    As a starting point to typeface pairings, see [1, 2]. A good pairing would be a serif in a more calligraphic style than Helvetica. Helvetica is a modern sans-serif typeface with fewer width variation than a humanist typeface, like serif Garamond. My pe…

  30. Der Pixelscheucher » Linktipps » sliding, textile, textures, visual identities, photoshop, markdown, grid, grunge, jquery, kundenaussagen says:
    September 13, 2011 at 3:56 pm

    […] 19 Top Fonts in 19 Top Combinations, via Webdesignblog Ja doch, kann man so machen […]

  31. Free fonts to play with « design food says:
    October 10, 2011 at 7:28 pm

    […] 1: A good example of 2 fonts that work well together is Helvetica (as a title font) and Garamond (as the body font). Go on, try it. You will see they […]

  32. Indextwo | Type Connection says:
    March 27, 2012 at 9:41 am

    […] a fun, new way to look at the long tradition of typeface pairing. There have been general guides in the past covering this topic, but I can’t remember one that lets us experiment and guess, […]

HOW TO MAKE INSPIRED FONT COMBINATIONS (without spending all day clicking things).


Font Combinations Book  

On Sale Now at
Amazon / Barnes & Noble

Or get the PDF eBook version, INSTANT ACCESS, 40% off Retail, now at the BonFX Store

Recent Inspirations

  • The, ahem, “League of AI Artists”, 2022 edition October 12, 2022
  • How To Use DreamStudio / StableDiffusion To Create A Traditional Illustration August 31, 2022
  • DALL-E, pixel art, and a silly story August 9, 2022
  • A Bunnies Tale August 8, 2022
  • The Great Watermelon Conflagration of Watermelonville August 8, 2022
  • Edward Gorey’s…Cat? July 13, 2021
  • Grid Use In Graphic Design March 27, 2021
  • The Preposterously Huge Book of Font Combinations January 13, 2021
  • Three secrets to ignite inspiration December 22, 2020
  • How to “Draw Out” Your Creativity November 27, 2020
  • Finding Your Voice as an Artist: The Paradox of Originality October 18, 2020
  • Artist Frederick Franck on Seeing September 15, 2020
  • How to Move Beyond Creative Blocks August 10, 2020
  • Claude Bernard: The Only Way to Learn July 25, 2020
  • Ornate Leaf Sculpture and Crochet Art by Susanna Bauer June 18, 2020

Copyright © 2023 · BonFX

  • Blog
  • Books
    • The Preposterously Huge Book of Google Font Combinations
    • The Big Book of Font Combinations (Classic Fonts Edition)
  • About
  • Gallery
    • Monster Alphabet
    • Pen and Ink Cartoons
    • The Algorithm FX
  • Contact