Friday, July 3, 2015

Concord, Contrast, and Conflict... Oh my!


Years ago, I worked with a young designer who always matched the same handful of typefaces with each other, regardless of the project he was working on. Despite the fact that we had thousands of fonts at our disposal, he inevitably just used those 8-10 options, and got really edgy and defensive any time he was asked to change them. One day, I asked him outright why he always gravitated towards those specific choices, and he told me that one of his graphic design instructors had used them as examples of typefaces that could be mixed and matched, so those are the ones he used. I asked him if he knew why his instructor had recommended those pairings, and he shook his head—he didn't remember the hows and whys of those pairings, so he refused to budge from his comfort zone.

Mixing and matching typefaces is a subtle art, but ultimately, the goal is to create concord and contrast—not conflict. Some people aim for the tried-and-true method of pairing a serif with a sans serif, or a sans serif with a script, but those rules can create some pretty heinous combinations if you're just grabbing them at random.

A better approach is to determine what type of feeling you'd like the text to convey, and then assign fonts that serve specific purposes.

Concord

You can combine fonts within a type family in a variety of widths, styles, and weights that work well together because they were designed to work together.

With these low-contrast type combinations, you really can't go wrong with combining the different weights/widths, but each style within a family should be used for a specific purpose: You'd call attention with bold, but place emphasis with italic.

Bottom line: it's a means of differentiating areas of copy, as it changes the text colour.

If we were going to compare this to fine art principles, it's like working in a monochromatic palette; adjacent hues that work with one another.

Contrast 

The opposite of concord, you're creating contrast by using different type families. The basic rule in this regard is as follows:
If you have a serif, pair it with a sans serif.
If you have a sans serif, you can pair it with a script.
As long as you're pulling from notably different type families, and not combining two that are incredibly fussy and ornate, you're probably doing something right.

Good on you.

Fine art comparison: opposites on a colour wheel. These would be hues that complement one another because they contrast and/or vibrate.


Conflict

There are many different ways that font pairings can fall into disharmony and conflict, and you want to avoid them... like pairing two different scripts, two different serifs, or two different sans: the general rule here is NO.

One big hellstorm occurs when there isn't enough difference between the typefaces you've chosen. As an example, I recently came across a banner ad that combined Futura and Gill Sans, and my retinas started to foam. This pairing is a case of conflict; it combines a geometric sans serif with a humanist one, and although some people might argue that the friendly rounded-ness of Gill Sans complements Futura's sharp, geometric edges, I think this combination is absolutely appalling because they look too similar to create contrast, and they look too dissimilar to create concord.


NO! Bad puppy.

If you're dead set on using two sans serifs together, then consider using two different weights or widths from the same font family, like teaming Univers roman and bold, or Garamond regular and italic.

Pairing Futura with Gill Sans is the equivalent of serving spaghetti carbonara with a side order of fettuccine Alfredo. Seriously? Serve it with a f*cking salad.

*Note: One caveat with regard to pairing different styles from the same type family is that you need to ensure that there needs to be at least 20% difference in colour to create a noticeable visual contrast. As such, you wouldn't combine ultra-thin with thin, or bold with semi-bold, because well, they're almost twinsies. They should each be separate entities that can be differentiated at a glance.

What are some of your favourite pairings?

4 comments:

  1. Roboto y alegreya son mis favoritas!

    ReplyDelete
  2. Loved the humor in this! I love to laugh while I am learning. Thank You for a fun and informative article.

    ReplyDelete
    Replies
    1. Delighted to have coaxed a smile or two. ;)
      Thank you for your feedback!

      Delete