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…
Hi Kate – so glad you found something useful!
[...] 19 top fonts in 19 top combinations [...]
serif – sans serif
sans serif – serif
serif – sans serif
sans serif – serif
Is that it?
@ dustin: For this very limited little post, yes
What are the fonts for the orange sub headings? (ie: Helvetica & Garamond, Caslon and Univers).
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.
thank you for this line up, can you tell me how you go about adding these to a webpage?
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.
I new a service like that existed somewhere but could never find one accept Google fonts(quite lame!).
Thank you so much.
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.
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.
This is great. I like it… But isn’t it Lorum Ipsum *Dolor*… not “Dolar”?
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!
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…
[...] 19 Top Fonts in 19 Top Combinations, via Webdesignblog Ja doch, kann man so machen [...]
[...] 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 [...]
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?
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!
Terrific resource! And I love that you have made it available in PDF format!! Many many thanks!
Thanks for sharing this great font list. for using them in heading and title. i will use them in my next projects!