It has come to my attention that one of the more noticeable traits in my design work is my willingness to use what is perceived to be an excessive number of typefaces. I’ve seen countless articles written on typeface pairing and systems, and nearly all of them push towards using fewer families in any given design. I’ve seen similar comments made towards my own work, implying that they are pleasing despite the number of typefaces they use.

“I love this site because it’s not afraid to break one of the first rules of setting type — don’t use too many different fonts. Four typefaces are used, two sans-serifs and two serifs — Galaxie Copernicus, Interstate, Harriet and Nimbus Sans. The key to getting away with this is consistency and Bethany Heck’s site is relentlessly consistent in using each typeface for a specific purpose.”
— Jeremiah Shoaf, Typewolf

I took this as a challenge. Thank you Jeremiah!

I want to present a counter argument and speak to the value of eclectic type systems, and how you can structure your projects in ways that will allow you to use more typefaces together effectively.

My love for combining typefaces stems from an adoration of turn of the century broadside design.

So why do we have rules about the number of typefaces we should use?

We can all point to questionable designs that use an excessive number of typefaces. You can sense when a designer is trying to compensate for a deficiency by throwing more typefaces into a piece. Like the waitresses at Hooters are distracting you from the fact that you’re eating mediocre wings, and the bedazzling on those Buckle jeans is obscuring your sagging rear end. This is where designs starts to feel busy, confusing or muddied, and where the act of using multiple typefaces gets its poor reputation. You can’t throw more ingredients on top of a dull dish and expect it will taste better.

*insert Helvetica joke here*

The intention behind giving guidelines on the number of typefaces we use is a good-hearted attempt at saving designers from trying to force visual interest and excitement through variety, and encouraging them to look more carefully at the typefaces they use and strive to use well-made, hearty faces that can be repurposed for all the needs at hand. Without the crutch of varied typefaces, designers can force themselves to address concerns about hierarchy and content. Many designers will give the advice of limiting yourself to two faces in a single design, and others will graciously allow a third, but only because you won’t stop nagging them about it.

There’s good logic to the rule of three. You select a workhorse face, a display face to add personality and a third face to cover special occasions. Typefaces work in the same way real families do: any more than three children running around and you are risking serious mayhem (sorry, more metaphors!) Every typeface you choose to incorporate into a design is added responsibility. It has needs, wants and desires, and the more you add, the more cares you’re having to tend to while still pushing towards your ultimate goal of effective visual communication.

So with that said, I want to talk about quotes like this…

This guy obviously wasn’t as passionate about the proper practice of primes vs. apostrophes, eh?

Don’t mistake preferences for rules

I see a lot of comments like the one above regarding typeface selection, but don’t let one designer’s opinion affect how you approach solving a problem. Given the right content and the right faces, any number of typefaces can work in a design. I often find it is designers who are trying to enforce their own opinions of aesthetics pushing for these limitations instead of people actually arguing for the sake of the audience at hand. I don’t think your grandma is commenting on the number of fonts used in her cookbooks. That’s because your grandma is wise.

Don’t design for other designers, design for your audience. Using multiple families can mean you have to make fewer compromises, and it gives you an opportunity to create rich, distinctive palettes. Every typeface you add makes your visual language more nuanced, which can aid, instead of hinder, clarity for your audience and establish an aesthetic that is unique.

http://fontsinuse.com/uses/5431/big-plans-exhibition-design

Building an eclectic system: Start with a pairing

If we’re building a typeface system, we have to start with good pairings of typefaces. Sometimes all it takes to make two faces work together is the relationship of one letter to another. This exhibition branding by Jessica Svendsen and Julia Novitch utilizes a great pairing in Bureau Grotesque and Letter Gothic. This is a high-contrast pairing, so much so that it could risk becoming dissonant, but the key thing that is making it successful is that they share characteristics in letterforms like the lowercase “r” in Letter Gothic and the lowercase “a” in Bureau Grotesque. They both have that same, lazy hang to them, like an arm draping off the side of a bed on a Saturday morning. That similarity in letter construction is all that’s needed to make this combination hit home.

Four very different faces can make one cohesive design language.

Starting with strong combinations like this enables you to build systems more effectively, and add faces that play off that initial relationship. If we were to build a deeper type system from this initial pairing, a geometric slab like Serifa would be a good starting point. It will add width contrast and a serif style while feeling stable and familiar because of its geometric roots. It’s completely inoffensive and will happily play the straight man when compared to the more personable initial pair. I’m also going to toss in Sweet Sans because it’s THE BEST. It will need specific rules like “only use in all-caps” and “always use wide tracking” in order to make sense, however. The all-caps rule ensures we’re always getting that shape connection with our geometric slab, and the tracking relates it back to the monospacing in Letter Gothic.

As you can see in the above example, we’re really relying on that connection between Letter Gothic and Bureau Grotesque. The Letter Gothic on the left leads right into the headline on the opposite side of the spread. Serifa is anchoring the sidebar sections, and Sweet Sans is sprinkled in to give some playful bits of detail. We’ve got all four typefaces here and they’re all playing nice with each other and creating a unique look and feel.

However, you could very easily break the rules we established and make these same fonts feel unsettling and discordant. Wait for it…

Oh god. I killed it. If we do something as simple as setting Bureau Grotesque in all-caps, a fundamental relationship between the typefaces will be lost, and the system falls apart. Likewise, if the other fonts alternated between being treated in all-caps and not, we would strip out a lot of the logic and relationships that make this system work. Chances are if you’ve noticed the large number of typefaces a design is using it’s because you’re picking up on sloppy usage that isn’t following any set pattern or rules.

If you hunt for similarities in the typefaces you use and exploit them, you can have a great, diverse system of multiple faces that are fundamentally quite different but work well together because you have a specific role for each to play.

http://create.adobe.com/2013/12/1/eight_tips_for_combining_typefaces.html

Don’t be scared by similarities

Just as there are considerations around pairing typefaces that are very different, there are also considerations for typefaces that are similar.

One of the most commonly cited rules about pairing faces is that you should avoid pairing typefaces that are too similar, and instead opt for distinct contrast in letterforms. The reasoning for this is that your audience might pick up on the slight differences and feel there could be a mistake. Letterforms like a lowercase “a” or “g” will be clear giveaways that you are using multiple faces of the same style.

The above example from an Adobe article uses Helvetica and Univers as an example of a bad pairing because the two fonts look so much alike. On first glance, they are extremely similar, but lets take a more analytical look at the two faces and suss out the differences.

So we’ve got Helvetica on the top, and Univers on the bottom. Helvetica is defined by its tight letterspacing, which makes the line of text take less space even though the individual letterforms are more robust and wide. Univers is simpler in comparison, lacking the little flourishes like the curl on the tail of the “y”, and despite the fact that the letters are narrower, the line takes more space because of the more generous letterspacing. It’s especially noticeable between the “B” and the “r” in this example.

So with these differences defined, can we find an example that justifies using both typefaces?

© Royal Shakespeare Company. License: All Rights Reserved. http://fontsinuse.com/uses/7921/royal-shakespeare-company-programme

We can! In this program design you can see the pairing working effectively. Helvetica shines at display sizes because of it’s ultra tight letterspacing, and the more airy Univers makes the body copy easier to read and contrasts with the headline. If the entire thing was set in Helvetica that tightly set it would be a typographical orgy. Each is used in a way that caters to its strengths.

One key to effective type systems is picking typefaces that might be similar and finding ways to give them their own distinctive voice. You can always stretch out the differences between typefaces in the way you treat them, but typefaces that are fundamentally different will remain so. It’s all about pulling and pushing against differences and similarities between faces to try to find the right amount of shared characteristics and interesting contrasts.

Case study inbound!

For my Hive Works branding exploration, the overall mood I was trying to set was something that referenced IBM’s design history, evoked the tech feeling of a science lab, and also had a international type aesthetic to give some structure to the diverse stylistic inspirations.

I started with Interstate, and used it exclusively in all-caps. I then added Tiempos Text as my text copy to add warmth, concerned with the coldness of my inspiration sources. I wanted at least one more sans face, something that was a bit friendlier and could be used in caps and lowers. My final two options were Calibre and Founders Grotesk, both by the Klim Type Foundry.

At first glance, these typefaces are quite similar. Founders is a grotesque typeface with a lot of friendly features. It has a taller cap height and is wider than Calibre. That extra width also has the effect of making the x-height appear lower even though they are basically identical. Calibre is narrower and more influenced by geometric faces like Futura, and the x-height to cap height ratio makes it more approachable and better suited for small copy.

After trying them both in context, Founders’ connections with the international type style were overwhelming the rest of the aesthetic influences on the page, and the added contrast between the cap height and x height hurt its pairing with Tiempos Text in the body copy. Calibre is more geometric while still retaining the grotesque qualities I wanted, and brought in that technical feel I needed without being too cold. It fit along with the international influence without being overwhelmed by it, and all the elements combined to make a cohesive aesthetic. So done deal, right? Calibre works best here, so I should just continue to use it throughout the book, correct? Well…

Calibre worked in all the applications inside of the book, but it was lacking the impact I wanted for the page headings. It’s a beautiful face which worked perfectly fine, but why would I settle for fine when I could have incredible? At this larger scale, the curvaceous letterforms of Founders really shine (that lowercase “g”!) and there’s less of the international influence in the interior of the book, so it wasn’t dominating the aesthetic. The added width of Founders also contrasted nicely with the tidy and narrower Calibre introductory text, so not only was it nicer for the headline, it helped showcase how freaking gorgeous Calibre is in that use case. And just like that, I had another layer to my typographic solution.

Even though I’m using two extremely similar faces in this project, and three sans across the whole branding, they all work together instead of competing because I know the strengths and weaknesses of each one intimately. I know when and why I’m using one over the other and I’ve established rules around those characteristics. If some pages used Founders and the next used Calibre with no rhyme or reason, the justification for using both becomes shaky. It becomes indulgent and meaningless without the system in place.

Pictured: Every piece of copy you’ve ever been given.

Creating informational hierarchy

One of the greatest arguments you can make for adding typefaces to your design is to make it easy for your audience to know what type of information they are looking at before they’ve even read it. The issue is that usually when you are given copy it’s just a mountain of paragraphs, headings and subheadings. Not exactly compelling stuff. But are you going to shrug your shoulders and just decorate that crap? No, because you’re a designer, and that’s not your job. Visual design goes beyond how the content looks. Visual design is about how to make the content communicate most effectively.

Your job as a designer isn’t just to mindlessly style what’s been given to you. You need to find the life in the content and bend it to your will. Don’t give up when you’re given copy that’s not thoughtfully composed. Absorb the message and find ways you can extract meaningful data in a repeatable way that will not only flesh out your designs, but help your audience process the data in front of them. You have to become an expert in the subject you are working on and put yourself in the audience’s shoes and help them find the best bits of content. That’s the mark of a real designer.

Source: IL Magazine

The example above uses typefaces, color and styling to segment the information into meaningful chunks that allow the audience to switch context very easily from the narrative writing to the focused insights. Making a design look this layered and nuanced takes work; opportunities like this are rarely just handed to you.

You want to help your reader identify the different types of information being presented to them, and after you’ve established those levels, you can justify treating their typography differently. You have to earn the right to use multiple typefaces, or else you’re just making more noise.

The most extreme example I’ve seen of this is Typography for Lawyers, by Matthew Butterick. Mr. Butterick is using at least eight families in this design, and I’ve found this to be polarizing. Many designers argue the palette is too eclectic and that he could have accomplished the same thing with fewer typefaces, or one superfamily. For one thing, any design could be accomplished with fewer typefaces. Any pizza would be just as edible with no toppings, but sometimes I want a supreme, dammit! Again, your grandma doesn’t know what a superfamily of typefaces is and that’s because she’s got real problems to worry about, like when the Price is Right is coming on.

I think the book is brilliant. If we claim to be lovers of typography, why would we argue against someone skillfully putting well-crafted typefaces together in a symphony of well-written communication? Why are graphical elements acceptable ways to differentiate between content types, but multiple typefaces are not?

Mr. Butterick’s book is so successful because he was able to create so many use cases for specific styling in his content: headings, tables, captions, body copy, subheadings, tips, call-outs. Each has its own style and it only takes the reader a few pages to encounter them all and understand their purpose. If you’ve found the tip sections to be particularly valuable to you, you will find them easily because of the unique styling. If you find they aren’t helpful, you can easily brush past them and focus on what is more important to you at the moment.

This type of visual distinction and wayfinding is the foundation of systems and UX design (which we’ll talk more about in just a moment). When a user sees an element immediately understand what it is and what value it has to them, regardless of the exact typeface choices the designer made. So why do we shame designers for accomplishing this feat by using a varied palette of typography? Having an unformed mound of content, carefully crafting its informational structure, then applying visual distinction via typographic choices is at the core of what we do as designers. Works like this should be celebrated. You can still crystal goblet with multiple typefaces if the end result is that the audience notices the styling not for its own aesthetic characteristics, but for the type of content it’s presenting.

Typefaces as UX aids

Which text here is actionable and which isn’t? Even the addition of color doesn’t provide the needed clarity, because some of the green text is just window dressing.

Great UX design is hallmarked by clearly identifying the function of all the interactive, informational and wayfinding elements on the screen, emphasizing recognition of an object’s value in addition to its legibility. It’s not just about what the word says, it’s about what it does. Typefaces are immediately identifiable wayfinding elements, and we should take advantage of that.

At my day job as Creative Lead of Microsoft Power BI, we are encouraged to use one typeface, and it’s an awful one. Segoe. Even the name is awful.

So. Many. Words.

The problem with Segoe (besides its wretchedness) is that it’s a pretty big ask to have a single typeface convey all the subtleties that exist in a complicated piece of software. If you look at any software in the Microsoft Office suite you’ll start to see the strain the typeface limitation is causing on the UI. There are dozens of elements on the page, all set in the same typeface, and for the most part using the same weight and color. But not all of these elements have the same functionality. Some of the text is purely categorical or informational, while other elements are interactive and will perform an action for the user. To add insult to injury, much of the copy implies it’s interactive when it isn’t (“Get External Data” in the top left, for example, is not interactive). The result of this is the eye gets fatigued from the wash of similar elements and the user can never feel 100% certain of what a text element will do until after they’ve interacted with it once. We are forcing users to make mistakes and feel like they failed.

Traditionally, if you needed to differentiate between the functionality of elements in your UI, you would be expected to use borders, boxes, colors, arrows, icons and other shenanigans. The idea of using additional typefaces to accomplish this differentiation would be frowned upon. WELL NOT IN THIS HOUSE!

Power BI: Less poopy since 2015.

To combat this situation on Power BI, we have begun incorporating a second typeface in our designs. DIN is a classic German typeface that is squared off, a little condensed and has lovely numerals. It pairs well with Segoe because it has a different style without being too brash or distracting. However, knowing which typeface we would add was just one part of the solution; we also had to establish rules about when to use it. How do we make sure we’re not just using DIN for the stylistic differences and are actually using it as a tool to aid user comprehension of our product?

The solution I settled on was that we would use DIN to help us separate our interactive and non-interactive textual elements. There are many cases in our product where we need subheadings or labels inside of the UI inline with interactive elements, and since color isn’t a universal option for us (our product color is yellow, which doesn’t pass accessibility requirements on a white background) bringing in a second typeface in these situations makes the distinction of interactive vs. non-interactive extremely clear and helps us have a go-to rule to follow in these instances.

There’s no question which option most clearly delineates interactive vs. informational.
We now have a rule that works well in both our light and dark UI situations.
Suck it Segoe!

You can see in the UI comp here that a change as simple as introducing a second typeface is taking the wash of text that hits the user and segmenting it into easier to digest chunks. The words set in DIN serve as clear informational markers, supplementing the actionable commands of the application and creating clear distinction for the user. The UI is instantly easier to process and more approachable. This isn’t about aesthetics, making things look pretty, or adding visual flair just for the sake of it. It’s about helping our users process what’s on the screen and empowering them to know exactly what’s going to happen any time they encounter text in our application.

Case study: Eephus League

So, through all this analysis and reflection about the virtues of multi-typeface design, I felt I needed a good opportunity to put my money where my mouth was. I had the perfect playground to do this: the Eephus League website. The Eephus League is a small business I started in 2010 that sells baseball-related items. I won’t bore any of you by talking about what they are (scorebooks) because you’re designers and for some reason despise sports almost as much as you love single-speed bicycles and coffee.

It began as my last project in undergrad, and the visual language of the brand and the typefaces I use throughout it have changed as time has gone on. As the brand grew I introduced more typographic diversity and incorporated a more playful voice throughout the brand.

*Insert gratuitous shots of Eephus League goods*

If you thought you were getting out of this section without pictures of this stuff, well… sorry.

These images show just a sampling of the typefaces I’ve used on the project throughout the years. It’s my opportunity to try out new typeface purchases and have fun. The brand as it exists today is a unique mix of typefaces and treatments.

There was just one exception to this typographic paradise: the website. I built the website in summer 2010 as a poor college student with limited web fonts available to me, so it had been in bad need of a refresh for quite some time. I had previously played with some new ideas for the shop pages but kept getting stuck in the design. It was stiff, and I was getting lost trying to find the best subset of typefaces I had used previously to bring into the new site.

Meh. Not good enough.

I decided to use myself as a guinea pig to test out the value of going overboard in typeface selection to try to get out of the creative slump I was in. The website was a great playground for this, because its foundation is built on the idea of several different types of posts: nicknames, quotes, stats, jargon, and equipment patents. Each type of post has its own unique hierarchical data inside of it and has elements of unique styling. I wanted to take that concept and hit it even harder than I did with the original site. How unique could I make each of these posts without the design devolving into chaos?

None of these options had the appropriate tone for the playful nature of nicknames.

I started with my favorite type of data, nicknames. Nicknames are colorful, silly and rich in meaning, so it was important that the design of the tile reflected that mood. However, I was finding most of my treatments to be a little cold. After trying every other face I had used in the brand I remembered that I had a lovely little display face in my back pocket: Brothers.

Brothers. We all know it. It’s so distinctive that it’s hard to pull it off without it overtaking your entire aesthetic, but knowing I had so many other faces at my disposal meant I could use it as a headline here and only here. I wasn’t at risk of overusing a distinctive face while still getting to take advantage of it in my design. This is a key argument in favor of these eclectic systems; it gives you the freedom to let display faces be bit players that add appropriate levels of punch and play to your designs without enveloping everything else.

I decided on Founders Grotesk for the body copy instead of a serif, knowing it would mix well with any of my other faces. Once the nickname block was designed, a method started to emerge for making each subsequent one: shared elements would be styled consistently and the unique data would be distinctive. Each category has a unique headline style and the typefaces reflect the content.

The stats tiles are clinical and stark, reflecting the mathematics they are communicating. The quote tiles have a traditional pull quote styling, and I really love the patent tiles, which reflect the typography you’ll find on old patent documents.

YAS QUEEN!

After completing that exercise, I went back and re-addressed the shop pages I had started with. The result was much richer and in line with what I hoped to achieve with the brand as a whole. In the end, I used six unique typefaces in the Eephus League redesign, and I think if any of them were removed the site would suffer.

The design system in use on a long-form article.

By establishing these typefaces as my visual language and being diligent in how they are used, I can have the visual diversity I want. I have to ensure that each type of content has its own voice, but is still in harmony with the choir. Design work that utilizes multiple typefaces doesn’t have to be discordant, sloppy or chaotic; it can be just as focused as design that only deploy a single typeface.

You have to start by creating rules to earn the right to break them. Build up your style library of typefaces, sizes, colors and usages, and use them methodically before you make exceptions. Your audience will have the benefit of delighting at the visual diversity you’ve provided them while also drawing connections to style and content. Then, when you do choose to diverge, your audience will recognize it as being significant and you can play off of that reaction.


Conclusion

Alright, bite-sized insights we’ve learned today!

  • It’s less about the fonts themselves and more about how you use them
  • Focus on the differences of typefaces that are similar at first glance
  • Start with relationships within a pairing, then add from there
  • Set rules about typeface usage and stick to them
  • Contrast in type pairings is overrated; real contrast comes from content and hierarchy
  • If you don’t have layered structures within your content, build them yourself
  • Use different faces to distinguish distinctive elements in your content
  • Use distinctive faces sparingly, with clear intention

If you made it this far, I sincerely thank you. Each one of these bullet points could easily be turned into a smaller click-baity piece, but I think it’s the combination of all these concepts in tandem that makes this way of thinking about type so fun and interesting.