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…
Hey Dear Reader! If you think these examples are too small, please let me know and I’ll make bigger examples just for you
Thanks,
Douglas
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.
Hi Maggy: You are so right. We need a “g” in there. Maybe there is no “g” in Latin, but I’ll add one. I was going to redo these since I thought they were a bit too small as laid out in the blog. Check back in a week and I’ll have it updated for you (and me)…
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
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!
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
Does Smashing Magazine accept guest article proposals?
Big resources are time intensive but there is a direct correlation to the amount of original work and the amount residual traffic you get from an article! Man, if I only had 100 hours a day…
Hi Phil: Thanks! Based on the list here, my first guess would be to pair Gotham with Warnock or Minion, because of their modern angularity. If those weren’t quite right, I’d take a nab at Caslon or Garamond next, but I’m not sure, based on memory alone, if the lower x-heights of Garamond would be too much against the open spaces of Gotham. With enough work and the right font from any of these serif faces, I bet you can get a winning combination.
Hi Kevin: Thanks for the reference! I thought it was really important to have the PDF down load available as the screen resolution just doesn’t do the fonts justice. If you have an 11×17 printer, or can tile a letter-sized print, this looks great at a larger size.
As for your teacher and boss who say that serifs and sans-serifs shouldn’t be mixed, I would say that they can be mixed if you mix them right. You certainly can mix them wrong to disastrous results. The one rule you have to stick to is create contrast (not too much) and not concord. Put Bodoni and Clarendon together to see what I mean. There is no way to make those look good. Or try Aksidenz Grotesk and News Gothic to really see something hideous that at first glance doesn’t seem wrong. The more you look at that combination the more it looks bad, especially if you get similar weights and point sizes.
Too much contrast between faces also produces gag-inducing results. Just do this one in your head: Bodoni Poster with Helvetica Extra Light Condensed. Make sure you aren’t drinking or eating anything
.
Very nice and useful list. Thank you.
Excellents combinations, the chart is very usefull.
Thanks.
Yes of course, see this page:
http://www.smashingmagazine.com/how-to-become-a-smashing-magazine-author/
Wow, really great resource, cheers.
Thanks Jacob! I thought the guys at Smashing Magazine did all their own writing! I popped them a note and they are interested in articles like these, about fonts. You said, and I agree, there aren’t enough good resources like this – at least on the web. When it comes down to it, all the really great stuff is in books, old and new, still. I’ll have to do the work and follow up with them about some ideas. Thanks again for the tip!
Great list, combinated Fonts look very well together. From my experience – combination of frutiger and egyptienne (also by Frutiger) also looks great;)
This is a great resource, expecially for a new graphic design student like myself!
Thanks!
Love the Myriad / Minion combination. One question -> Why I dont see websafe font combinations?
Because I’m running my Windows 3.1 386 24Mghz in 2 bit color, at 640 x 480 in DOS mode with Mosaic, and all the web fonts look the same to me
Very useful, have downloaded and pinned to the wall!
Ah, I was hoping to hear someone did just that! Printing the PDF is really the way to go, even better if you have an oversized color laser on hand…
Very useful list, thanks for putting it together.
It is great to see these font combination in action before choosing. About how long did it take you to create these previews?
Hi Ted: I developed them in Illustrator, which is the PDF you see there, and then ripped the PDF or AI into Photoshop at a high enough resolution to allow me to cut the columns out to fill out the 470px wide slot I have, and rest at 72 dpi. I think I spent 4-5 hours on the graphics and production for the post – I can’t recall exactly. But I had done at least that amount of time in research for the parent post about the top 19 fonts. I’d say I spent between 8-10 hours on this and the parent post.
This post, about a month old, finally caught wind in the last few days thanks to a few key tweets from Smashing Magazine and Jacob Cass. It will pass 10,000 views by weeks end according to how it’s tracked the last couple days. I think the big value-add in all the tweets and other trackbacks was that there was graphics and a PDF download. Several bloggers grabbed the big jpg and pasted it as-is into their posts – makes for some nice swiss-ish eye candy.
So the big lesson I learned from this post is don’t cut corners, use lot’s of visuals, make it interesting, word hard, and the web will figure out that the post should do well!
Very cool! And yep, that’s how I found your post (though I forget if it was smashing or Jacob.
wonderful.
thank you.
p
Thanks for the comments everyone, so far. I thought I also might share the inspiration behind 2 of the combos: FF Din and Baskerville combination is really functionally equivalent to the Myriad and Minion combination. Myriad and Minion was, as many of you may know, pioneered and used ad nauseum by Adobe. I was sick of it for ages, but came around to it again, not sure why. I’m loathe to use Myriad these days because I used it so much in the past (I OD’d on it…) which is why I proposed a FF Din / Baskerville set as a working equivalent or at least starting point for a working combination. For that matter, you can make Frutiger work like Myriad with Minion. The contrast that works in a font combination is simply a compressed bold sans serif with a stout, open serif.
Example: Picture this – Gotham Extra Narrow Bold paired Sabon. You could make that work quite nicely. I know we have some Gotham and Sabon fans reading this…
My favorite reaction I’ve seen so far: “Futura and Bodoni…no, no, no!”
But remember the chart is meant to ask the question, not necessarily be the answer!!
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.
Fantastic, thanks a million!! I send you a virtual beer !!
Hey Brent: Anything amber will do, but if no-can-find, a Guinness Extra Stout is suitable
If creating typeface pairs like these leads to free beer, I’m on to something wonderful…
Erik: I thought it was odd that there was such a dearth of typeface pair examples on the web! Thanks for stopping by…
Thank you for taking the time to create this list. I’ve printed off your combination list to keep for reference in the office.
Hi Hugh: I have been getting excellent feedback for the PDF – glad you find it useful enough to print. It’s funny how with everything on the internet these days, there is still strong value in printed material that you can hold, touch, examine. Something about human curiosity…
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
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.
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!
Hey Jacob! I got your tweets about the upcoming font combinations article, but I can’t send you a direct tweet for some reason. Twitter has no names to chose from in the dropdown
. But email me at douglas@bonfx.com or if you want, we can chat about it here….
Great article. Was actually googling around for suggestions regarding Sans-serif fonts. Thanks.
Nice post!
Thanks 4 sharing
Nice list! thx for sharing !
Sorry, this is a small but annoying thing– it’s actually “Lorem ipsum DOLOR sit…” (not dolar).
I can’t believe I let that slip through! I’m going to have to fix that! Thanks for catching that!
Hi Doug,
I’m glad that I could be of help you and your superlative combinations!
Happy Holidays,
John the Fontaholic
Thank you so much—your article is much appreciated!
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!