Mastering Font Combinations

By / Jan 7, 2011 / Resources
shares

Remember the days of the Commodore computer? Your word processor had one font family, with an italic and a boldface, if you were lucky. Designing a contrasting header to a computer-generated document required scissors and tape.

Though the output of your dot matrix printer was unmistakable and monotonous, at least you never had to sweat the aesthetics of combining type. Matching heading fonts with body fonts, accent fonts and footnote fonts can be a touchy pursuit. Even perfectly balanced fonts can look ungainly and ugly next to the wrong neighbors. If type is the most important aspect of web design, then combining type is a critical skill.

FF Jackie

Unfortunately, it’s also a hard skill to master intuitively. Sharpen your eye for font combinations by taking a crash course in type combination. These links are rife with great explanatory graphics and even better advice. You’ll be mixing type like a pro in no time.

Learn to Combine Fonts – the Essential Basics

Combine fonts

When 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 with foolproof body text choices. Better yet, the convenient cheat sheet shows the pairings together, so that you can merely choose a duo that meets your needs.

For a more in-depth version, try this arrayed infographic codifying 22 possible type combinations. Though it doesn’t provide a visual key, it does offer a quick reference for the advisability of 484 possible pairings.

Get Help on Helvetica Combinations

Helvetica Combinations

And just because you’re entirely in need of some friends for Helvetica, keep this FontShop list handy. Helvetica-savant Indra Kupferschmidt provides an array of choice Helvetica helpers, as well as a first bit of insight into the theory of font pairings.

Learn to Create Well-Balanced Contrast Pairings

Well-Balanced Contrast Pairings

With those immediately accessible type pairings at your elbow, it’s time to incorporate a bit of theory so that you can choose your own. A common theme in the cheat sheets is contrast – for example, serif typefaces are paired with sans-serifs, and vice-versa. Yet the key to well-balanced contrast pairings is to look for subtle similarities. Take a gander at Peatah.org’s combination chart, and follow up with BigBrand’s golden combination rule: Look for similarities in the letters a, g and e.

Further Reading:

Hoefler and Frere-Jones’ Four Ways to Mix Fonts explores a breadth of font combination concepts and their uses. This article and its multitude of examples provide guidelines rather than dogmatic combinations. The most necessary quality of a pairing is that both unity and variety are preserved. H&FJ’s pivotal tenet: When combining fonts, let one design feature stay the same. Let one other thing vary.

These links alone should be enough to serve your basic font combination needs. For advanced study, try Robin Williams’ well-considered Layers Magazine article or Dmitry Kirsanov’s article on type matching theory.

About the Author

Jennifer Moline writes about freelancing, small business and design for the PsPrint Blog. PsPrint is an online printing solutions company, which you can follow on Twitter and Facebook.

5 Comments

  1. Douglas Bonneville
    January 7, 2011

    Don’t forget the Big Book of Font Combinations too!

    http://bonfx.com/the-big-book-of-font-combinations/

    Reply
  2. John
    January 7, 2011

    It seems like there are tuts cropping up every where regarding web type. I usually find my self spending lots of time, just skimming articles, never to find them very helpful. However, I did find this especially helpful.

    “for example, serif typefaces are paired with sans-serifs, and vice-versa. Yet the key to well-balanced contrast pairings is to look for subtle similarities.”

    Thanks!
    -John

    Reply
  3. ben
    January 12, 2011

    You gotta have an to pair fonts. I think font pairing is same to color pairing. Some people have better eye than others. Some people will always rely on color combination charts, others will not. For folks getting into font styling business this is a helpful article. The way I usually pair fonts, is a choose my primary font then look for a complimentary font or two, and I do these combinations on the actual page to see how it all comes together in with images, space and colors. As design trend changes, so is our font combos.

    Reply
  4. Pamela Wilson
    January 13, 2011

    Jennifer,

    Thank you for the shout out for the Big Brand System here. I love writing about typography: it’s always fascinating, and can even be controversial. (It’s not easy for a designer to be controversial!)

    It’s an exciting time for typography right now. With the advent of web fonts, we have a whole new venue opening up where we can apply great typography rules. Very cool stuff, and it will keep us all writing for a long time, I suspect.

    Reply
  5. adumpaul
    November 16, 2011

    Great clollction.Its really look nice.

    Reply

Leave a Reply