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.
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 typface 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!