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 excellent 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”. 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.
BTW: The Big Book of Font Combinations wants you to stop by and check out its samples. So many fonts, so little time...
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
PDF Download:
Click the preview image below or download “19 top fonts in 19 top combinations chart“:
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! Thanks again for reading and looking and downloading and printing! And please tell me I didn’t make a typo…
[...] 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, [...]
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!
[...] 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 [...]
[...] 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 [...]
First, I’m going to nail this to my office wall.
Second, I’ll post a copy and frame it in my bathroom.
@ Jae: Now THAT’S a happy reaction if I ever saw one!
[...] 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 [...]
This will be extremely helpful – great work.
The combinations looks pretty good. Sad some fonts are payable ones :/
[...] 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 [...]
[...] 19 top fonts in 19 top combinations [...]
Nice effort. One nitpick: Univers is misspelled in your images.
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
.
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
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.
Ridiculously helpful. Thanks!
@ Sharon: Most welcome!
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
@ Franke UK:
Glad you found the site and the list, but more so that you found the list useful!
[...] 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 [...]
[...] 19 Top Fonts and 19 Combinations [...]
[...] 19 top fonts in 19 top combinations [...]
I’m new to design & really appreciate this list!
@ Jackie: I’m glad you found it useful!
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
[...] 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 [...]
[...] 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 [...]
[...] Douglas Bonneville has posted a great resource: 19 top fonts in 19 top combinations [...]
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!
@ Fortelegy: Glad you found the list useful! The list does help get some ideas flowing…
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!
@ Flavio: I’ve been pecking away at a web version…I’ll post back to this thread when I have one done.
Great, looking forward to seeing it.
[...] 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 [...]
[...] 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 [...]
[...] 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 [...]
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.
[...] 19 fonts in 19 combinations, on BonFX [...]
@ 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
Thanks man… you saved me a lot of time…
[...] 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. [...]
Thank you so much for putting this out! Highly valuable information for beginner designers as I am
Thank you for your work!
Sincerely,
Kate
[...] 19 top fonts in 19 top combinations [...]
Thanks for this list! It’s nice to see some type combinations. Thanks again!
[...] 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 [...]
[...] Really in a pinch? Check out this list of fool-proof font combinations by Douglas Bonneville here. [...]
[...] 19 Top Fonts in 19 Top Combinations A look at combining some of the most popular fonts used by designers. [...]
[...] a last note, this post from bonfx has 19 combinations of the top 19 fonts, and a handy, printable PDF version of it that [...]
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.
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!