The Art of Combining Typefaces

Now that all the technical stuff is out of the way, I thought I would discuss combining typefaces; the do’s, the dont’s, and of course the why’s that go along with all of it.

This is definitely where the ‘art’ of typography comes into play, as the designer needs to focus on the message they’re working with, the audience this piece is speaking to, and how it all needs to come together in one beautiful package.

Often clients will tend to put too much stress towards one typeface or another when working with expressing a complex idea, so I always look to build up through the messaging of what the different typographic elements express cohesively.

The main concept to focus on when looking to combine fonts is the basic tenant of concord, or contrast, but never conflict.

When typographers say ‘concord’, they’re simply referring to the overall harmony or unity between the combination of faces used.

‘Contrast’ speaks to using the differences within the combination to it’s strength, and ‘conflict’ speaks to using too similar, but not harmonious, fonts in the same space.

1. Concord

What makes this pairing concord is the combined use of sans serifs, but employing varying takes on the proportions. The ‘EVA BODOK’ in this scenario, Alternate Gothic No. 1 is a bold and condensed weight communicating a solidarity through authority. Pairing it with the clear and compact Whitney complements the authoritative aspect, but uses a more transparent strength. It’s easy to read, instantly understandable and would make a great pairing for someone wanting to communicate a sturdy industriousness side to their work.

2. Contrast

This example uses the clean lines in the Neutraface 2 sans serif to stiffen up the elegance in the Baskerville Italics. Combining a sans serif and a serif is a relatively easy way to start combining typefaces, but I wanted to explore why it works beyond just throwing any old two faces together.

3. Conflict

The conflict element to this example has to do with combining two faces within the same type classification. Using a modern face with another serif, whether it be Garamond, Clarendon, Rockwell, will always read as uncomfortable to the eye. Since the forms are relatively similar with subtle differences, the eye will be constantly bouncing back and forth between the two- wanting to rectify those subtleties. Even playing around with the proportion of the two words, the hierarchy is even unclear. The eye wants to create a synchronicity between the two words in different typefaces and it’s never going to happen given this oh so close/not quite there combination of two serifs.

So how do you know which fonts will just ‘work’? This aspect of it definitely requires some careful practice, but there are some great guidelines to consider when you’re up against this type of issue.

1) Focus on the mood when pairing typefaces.

When I lay out typefaces for a client to peruse, I always organize them based on the general moods they communicate. Take for example, the client who wanted to create the natural line of horse treats. While creating these treats for the horses themselves, the client also wanted to incorporate treatment centers to help humans kick addictions through the use of equine therapy. This tells me that I should look to fonts that speak to age old traditions; the equestrian look, which I immediately attribute to Ralph Lauren; the bakery look, which always has denotations of warmth, friendliness, love, comfort, usually a round font; and a personal touch to it all, which would include scripts to denote handwriting, an individual ‘specialness’ untouched by mass produced items. By grouping and organizing the typefaces this way, you’re allowing the client to determine the hierarchy of emotion they wish to convey. Maybe it’s more important to speak to the tradition of horses than it is to the baking industry, but you won’t know that until you lay out all of the options and see what’s out there.

Preparing the client to think this way will also help prepare the designer to ‘fill in the cracks’ of the brand. If the primary aspect is conceptual footing A then it’s supporting concepts should be B and C, visually executed in a similar fashion. It may seem formulaic, but it helps even the greenest of designers understand the process of  layering conceptual information gracefully into their work.

2. Pair typefaces paying attention to their time period of creation/popular use.

This is definitely a look for someone not afraid of being described as visually noisy! Extremely ‘talkative’, this combination approach speaks to the typographically vibrant posters of the late 19th century, and that is exactly it’s intent. The look was established in order to cram as much information into one space as humanly possible, and a menu would be a fantastic modern execution. Using the multiple weights within one typefaces guarantees consistency without being redundant, and helps to organize the hierarchy of information by establishing clear typographical ‘roles’.

3. Establishing clear typographic roles!

While the HF+J source use this image with a different paragraph, I thought it made a stellar example of employing typographic roles to a piece. Here we have 3 typefaces, a thick and chunktacular slab serif,  an elegant but updated take on the modern serif italic, and a clean balanced sans serif. How I see this working is the designer allowed each typeface to be the star in its own right; the slab serif is allowed to show off it’s curves and thick chunks, the information kept concise and sharp through the use of Verlag, a gorgeous sans serif, and the extra flair is added through the use of Didot italics. Each role is filled perfectly by it’s selection, and allowed to stand alone by complementing each other so harmoniously.

4. Working with proportions to ease congruency.

Every single example I’ve shown utilizes the balance of proportions in order to make the combination ‘work’. It’s one of the main tenants of design, it’s going to be ever so present. I do feel that this example, and probably the one before it, uses varying proportion the best. Combining two serifs and a sans serif in an organized and easily transparent approach makes the page feel effortless to understand. I have no idea where this is from, but I can tell you what a joy it is to read. All of the information aspects are covered, with the small cap ‘chapter heading’, creating a dramatic viewing space for the title’s serif to breathe across the page. The use of the geometric sans serif Gotham to ‘notate’ (whatever it’s notating doesn’t matter I suppose) gives clear way to a structural hierarchy. Bach Cello Suites is part of whatever BWV is, got it. The same typographic scenario is used with the chapter intro of Suit No. 1 in G Major/BWV 1007. Consistency is key when using typographic sensibilities to your best advantage. It can help establish even the most complex information in a way that’s sane to the viewer.

So which typefaces are the best pairs?

A lot of sites I combed through when researching this article attempted to make that argument, and while I think it’s a valiant effort, I do think it’s more best left to the individual piece’s case.

And it’s also why I focused on what you should look for when pairing typefaces; we’ll all be using the typefaces we personally love anyway!

Here’s some further reading on combining typefaces, complete with font by font suggestions for those looking for more instruction

7 Rules for Mixing Multiple Fonts in Good Web Design – 

NoupeBest Practices of Combining Typefaces | Smashing Magazine

Ask H&FJ: Four Ways to Mix Fonts

8 Bits On Combining Typefaces – LGR Internet Solutions

29 principles for making great font combinations

19 top fonts in 19 top combinations

14 Top Typeface and Font Combinations Resources

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s