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…
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!
Would LOVE to see two sans-seriff boded together in font combinations to see how well they stack against each other.
[...] 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, [...]
oh, helvetica is best combine with garamond.. how about georgia?
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.
what is a good serif typeface to pair with OPEN SANS (sans serif)
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”
).
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.
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!
Thank you for the chart! It’s a great reference and time-saver.
Glad you can get some mileage it out of it Scott!
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…”) ?
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.