145 responses to “19 top fonts in 19 top combinations”

  1. Maggy Graham

    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.

  2. Jacob Cass

    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 :P

  3. Twitted by justcreative

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

  4. Phil D.

    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!

  5. Kevin Donnigan

    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

  6. Jasmin Halkic

    Very nice and useful list. Thank you.

  7. Ramiro

    Excellents combinations, the chart is very usefull.
    Thanks.

  8. Jacob Cass
  9. Jonathan

    Wow, really great resource, cheers.

  10. SimplyForDesign

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

  11. Jasmyn Madison

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

    Thanks!

  12. Most Interesting Ideas

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

  13. Web Design Maidstone

    Very useful, have downloaded and pinned to the wall!

  14. Dion

    Very useful list, thanks for putting it together.

  15. Ted Goas

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

  16. Ted Goas

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

  17. Pol Moneys

    wonderful.
    thank you.
    p

  18. Erik

    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.

  19. B

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

  20. Twitted by behoff

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

  21. Hugh Adams

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

  22. John S. Hall

    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

  23. Doug Bonneville

    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.

  24. Doug Bonneville

    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!

  25. Shabbir Hussain

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

  26. Wylie’s Writing Tips, November 2009 : Wylie's Writing Tips

    [...] 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: [...]

  27. 19 top fonts in 19 top combinations | Design Newz

    [...] 19 top fonts in 19 top combinations [...]

  28. Irene

    Nice post!
    Thanks 4 sharing :)

  29. art2code

    Nice list! thx for sharing !

  30. Tiffany

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

  31. John S. Hall

    Hi Doug,

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

    Happy Holidays,
    John the Fontaholic

  32. Rachel

    Thank you so much—your article is much appreciated!

  33. 19 top fonts in 19 top combinations « The Gymnasium

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

  34. Mac 19 font combinations: text and header

    [...] 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, [...]

  35. Arte del Web – Il blog dei e per i designers » Blog Archive » Le migliori 19 combinazioni di caratteri per un sito web

    [...] 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 [...]

  36. Fonts: Escolhendo a fonte perfeita para o seu site. « mnakashima's Blog

    [...] 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 [...]

  37. Jae Xavier

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

  38. Monkey + Monkey = Match « Zoom Creates Blogs

    [...] 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 [...]

  39. Pete

    This will be extremely helpful – great work.

  40. designi1

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

  41. What is your favorite font combinations? - Digital Scrapbooking Community - DesignerDigitals

    [...] 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 [...]

  42. otherwise » 19 top fonts in 19 top combinations

    [...] 19 top fonts in 19 top combinations [...]

  43. Stephen Coles

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

  44. Ileana

    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

  45. Sharon Reus

    Ridiculously helpful. Thanks!

  46. Franke UK

    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

  47. mnakashima | Blog | Fonts: Escolhendo a fonte perfeita para o seu site.

    [...] 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 [...]

  48. Hello world!

    [...] 19 Top Fonts and 19 Combinations [...]

  49. What fonts go together well? |

    [...] 19 top fonts in 19 top combinations [...]

  50. Jackie

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

  51. Mastering Font Combinations | The best Tutorials

    [...] 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 [...]

  52. Mastering Font Combinations | Bitmag

    [...] 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 [...]

  53. Font Combinations | Local First Internet Marketing

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

  54. Fortelegy

    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!

  55. Flavio Mester

    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!

  56. Flavio Mester

    Great, looking forward to seeing it.

  57. Fresh Design Links & Inspiration #4 | Andrew Kelsall | Creative Designer

    [...] 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 [...]

  58. Mastering Font Combinations | Resources

    [...] 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 [...]

  59. Mastering Font Combinations | SEO Domains

    [...] 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 [...]

  60. Alexander Stanuga

    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.

  61. Pairing typefaces in book design | David Airey, graphic designer

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

  62. Oscar

    Thanks man… you saved me a lot of time…

  63. Design Charts for Better Typography and Color - Noupe Design Blog

    [...] 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. [...]

  64. Kate

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

    Sincerely,
    Kate

  65. Daily Digest für April 2nd, 2011 — Amys Welt

    [...] 19 top fonts in 19 top combinations [...]

  66. Francis Boudreau

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

  67. Examples of Excellent Font Combinations in Web Design | The Blog of Janna Hagan - Web Designer & Developer

    [...] 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 [...]

  68. Mastering the Art of Font Combination « The FontGear Blog

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

  69. A Crash Course in Typography: Pulling It All Together - Noupe Design Blog

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

  70. Falling in love with a typeface, and other print things | Dinidu Writes

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

  71. Lisa

    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. :)

  72. Kate

    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!

  73. Typography Geekout Recap | Atomic Spin

    [...] 19 top fonts in 19 top combinations [...]

  74. dustin

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

    Is that it?

  75. Aimee

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

  76. David

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

  77. David

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

    Thank you so much.

  78. Tim Kelly

    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.

  79. Filip

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

  80. Quora

    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…

  81. Der Pixelscheucher » Linktipps » sliding, textile, textures, visual identities, photoshop, markdown, grid, grunge, jquery, kundenaussagen

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

  82. Free fonts to play with « design food

    [...] 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 [...]

  83. Ragdoll

    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?

  84. Jamie

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

  85. Free fonts

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

  86. Marco Berrocal

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

  87. Indextwo | Type Connection

    [...] 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, [...]

  88. muazfaris

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

  89. Parag

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

  90. Adrienne

    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.

  91. Scott Lindsey

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

  92. Blue Popovic

    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…”) ?

  93. Henry A. Taylor

    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.

  94. Henry A. Taylor

    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?

  95. Henry A. Taylor

    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.

  96. Korede

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

  97. Pradnyaa J

    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!

  98. Pradnyaa J

    Thanks Douglas!

  99. Scott

    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 :)

  100. Scott

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

  101. Scott

    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?

  102. Nina

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

Leave a Reply

Current ye@r *

Real Time Analytics