How to Use Clashing Fonts

Designers are trained to believe that similar typefaces should never be used together. But breaking this cardinal rule can sometimes be the perfect way to create ordered, elegant typography.

As powerful as typography can be in setting a reader’s expectations, it’s often the dialogue between typefaces that most effectively communicates how information is meant to be understood. Dictionaries use bold Antiques and delicate Ionics to distinguish their headwords and definitions; wayfinding systems use different fonts to identify routes and destinations. Find the most monotonous piece of design you can, and it’s still likely that its logo, headlines, and text are wearing different typographic dress.

It’s therefore customary for designers to reach for palpably different typefaces when assembling a palette. If not, why use more than one font in the first place? It’s hard to imagine the design that truly needs both Univers and Helvetica, and designers who mix both fonts indiscriminately do so at their own peril. Think of a trustworthy website, whose login page is one day mysteriously rendered in Times Roman. Even the most visually indifferent readers feel these disruptions.

But just as the most stylish person you know can pull off wearing four different kinds of check, or live in a room painted six different shades of orange, there are techniques for successfully bringing together typography’s first cousins, its doppelgangers, and its long-lost twins. Here are three types of font pairings that are traditionally scorned, but when used with purpose, can be supremely successful. We’ll be retiring that old chestnut “don’t use fonts that are too similar” in favor of a more constructive philosophy: “make each font’s purpose clear, and use every one consistently.”

1. Two Fonts in the Same Category

Designers contemplating two different fonts of the same general style often limit their choices to designs that have distinct personalities and pronounced characteristics. No one would consider “two serifs” likely to clash if one were tall and lithe, and the other a stocky text face. But few would consider pairing two different Old Style faces, let alone two Dutch Old Styles with the same large x-height and dark strokes, and many similar details. Quarto and Mercury are two such typefaces, and while their differences are clear enough to the typographer, we should assume that the vagaries of serifs and ball terminals are lost on the average reader.

Curiously, it’s this very ambiguity that suggests a union of the two typefaces, in which each is free to assume the role for which it’s best qualified. Quarto is a display face, with the snug fit, delicate hairlines, and discreet serifs that recommend it specifically to headline sizes. The Mercury family contains two kinds of faces for smaller sizes, each with the generous fit, thicker hairlines, and clearer gestures necessary for reproduction at text sizes: Mercury Text was designed for print, and Mercury ScreenSmart was designed and engineered for the screen.

On their website, filmmakers Not To Scale pair Quarto and Mercury ScreenSmart beautifully, by assigning each font a specific and exclusive range of sizes. Quarto is restricted to headlines, with Mercury ScreenSmart supplying everything else. The relationship between these two designs is further articulated by the designers’ use of Quarto’s heaviest weight and Mercury’s lightest, and by routinely pairing one font’s roman with the other’s italic — something the designers archly do in both directions.

Quarto Semibold and Mercury SSm Medium

WHY IT WORKS: Related typefaces can be successfully used together if each inhabits its own altitude, one at text sizes and the other at display. For this to work, each typeface must have the visual characteristics appropriate for its size range, with the hairlines, proportions, and fit that are tuned for either text or headlines. For large sizes, look for serif fonts with Fine, Display, or Titling in their names, as well as sans- and slab serifs with extreme weights such as Hairline or Ultra. For small sizes, look for print fonts named Text, and webfonts that are specifically built for small pixel sizes, such as the ScreenSmart collection.

TIP: Explore the contents of the text and headline faces you choose, reviewing both their styles and their character sets. Display faces often have a broader range of weights to choose from, offering subtle shadings that come alive at large sizes. Text faces often contain features such as small caps, tabular figures, fractions, or symbols, which can help both articulate and decorate text at small sizes.

2. Fonts with Similar Drafting Styles

Typefaces that have similar mannerisms, if they’re intended for the same range of sizes, can make truly ponderous companions. Sometimes such fonts are the work of the same type designer, who exhibits a strong personal style; other times the resemblence is coincidental. The following two typefaces are each the product of a radically different brief: Ideal Sans is a sans serif that renders a Humanist framework with handmade gestures, and Operator is meditation on the technical aesthetic of the typewriter. Yet both faces meet at some unforeseen crossroads, sharing the same motifs of angled stroke endings and asymmetrical curves, similarities that would seem to disqualify them from ever being used together.

For the publication of his longform essay The First Roman Fonts, author and publisher John Boardley chose this very pairing for his website, I Love Typography. Both faces, in their ScreenSmart versions, are used at small sizes, Ideal Sans for text, and Operator for the supporting footnotes and commentary. That both fonts were designed and engineered for small sizes might make either one a good choice to satisfy both functions, but Boardley’s selection of different fonts for different textual roles helps formalize the site’s distinction between text and annotation.

On the site, each typeface serves a function that’s sympathetic with its origins. Ideal Sans, with its large vocabulary of organic shapes, produces the kind of complex texture traditionally associated with seriffed text faces. Operator, with its roots in typewriting, can effect an authorial, academic voice, the perfect choice for the commentary that surrounds the text itself.

Ideal Sans Light and Operator Book

WHY IT WORKS: Instead of dividing the typography by type size, these typefaces have been assigned different semantic functions. The choice of typeface is prompted by the structure of the content itself, with each selection informed by both the fonts’ abilities and their intentions. Spending time with the fonts’ character sets revealed that their superficial resemblence goes no deeper than a handful of letters in a few core styles, and uncovered some useful textures in the auxiliary styles, such as these very different forms of italic.

TIP: Remember that even fonts that share the same visual cues can have wildly different proportions, which affect the leading, column width, and tracking they require. Compared with Ideal Sans, Operator has narrower letters, a larger x-height, and dramatically shorter ascenders, descenders, and caps, which together invite much tighter settings. Varying these parameters can help play up the differences or similarities between the two typefaces.

3. Two Revivals of the Same Source

To many designers, historical revivals are the core of the typographic canon. Those who depend on these classics are tasked with the duty of presiding over many different revivals of the same original, and choosing a single correct version for every project. (To see something beautifully set in Adobe Garamond, with a late addition hastily added in itc Garamond, produces a special kind of dissonance. Typography is that art in which the tiniest errors are always the most conspicuous.)

Many consider the idea that revivals aim to be definitive — that history is heading toward one ultimate Garamond revival — to be outmoded. Instead, contemporary designers often approach historical material in a more interpretive way, finding qualities in historical artifacts that resonate with ideas and requirements of their own. Some of the most interesting contemporary typefaces are those that are grounded in historical forms, but are less “recreations” of old typefaces than “occasioned by” them. This invites the possibility that a type designer might revisit the same historical source many times during his or her career, and produce many different interpretations that have both differences and similarities. Sometimes these designs will conflict with one another, other times they’ll be compatible. Most often, they’ll do both.

An example from our library is the pairing of Champion Gothic with Knockout, two divergent type families created years apart, and both inspired by the same historical source. Champion Gothic was my first typeface, designed in 1990, and intended to be a modern interpretation of nineteenth century American wood types. Designed for Sports Illustrated, its sentimentality is checked by the needs of an energetic editorial art department, and its design shaped by a magazine format that required five closely-related condensed faces plus one heavy outlier.

A few years later, I revisited these typefaces with different goals in mind, thinking about how this material might be rationalized into a larger grid of both widths and weights, to ultimately produce the 32-member Knockout family. Above are nine of Knockout’s styles, alongside all six of Champion’s, showing the common ancestor that both fonts share.

Just as a designer might pick the most appropriate Garamond revival for a project, most designers can evaluate Champion and Knockout’s merits and decide which fits the project at hand. But some designers use styles from both families together, and sometimes to great effect: the example below is a favorite, pairing two styles of Knockout with Champion Gothic Heavyweight.

Knockout No. 34, Champion Gothic Heavyweight, and Knockout No. 26

WHY IT WORKS: When working with two different families built on the same historical ground, look for points of overlap and differentiation beween them. If both families have the same range of styles, and include the same kinds of features and character sets, stick with the one that feels best for the project. But if there are outliers in one family that aren’t represented in the other, try using them together. This design works because its central style, Champion Gothic Heavyweight, is the farthest afield from the styles in Knockout, not only in weight and width, but in character. Similarly, the two weights of Knockout used here are ones that have no analogue in Champion, whose weights never go this wide, this narrow, or this light.

TIP: Look first to the extreme ends of a family to see what makes it unique. Many historical revivals take on the challenge of adapting traditional models to new purposes, often including the weights, widths, or optical sizes for which the original source wasn’t intended. Also spend some time with both fonts’ character sets, looking for any points of departure. Subtle adjustments like the alternate R in the top line here serve to heighten the differences between this font and its neighbors, further ensuring that these closely related designs never clash. —JH

Made with Cloud.typography

Football as Football

How six designers in Minneapolis crashed the American sports vernacular with the grandest graphic traditions of European football.

As the World Cup winds down, many Americans will turn from the excitement and agony of football to another beloved pastime: football. American football, to be precise. This year, six Minneapolis co-workers have combined these obsessions with their love of design into a single experience called Football as Football, which reimagines the logos of American football teams in the heraldic language of the great European football clubs. Watch as the mascots and monograms of the NFL take on German, English, Spanish and Italian accents: the design is both hilarious and spot-on.

While the crests are the star of the show, their designers lavished just as much care and attention on the site that presents them. “We wanted a brand for the project to wrap around the experience,” said Garrick Willhite, one member of the team. “We started with an icon, that lead to a logo, that guided the overall look and feel.” To support its vivid and varied imagery — and typography that includes fonts as far afield as Gotham and Hoefler Text — the team chose our Knockout family to use for the site’s webfonts. Originally inspired by sports ephemera, Knockout’s strong and athletic character makes it an apt choice for the project, and applied in a studied and subdued way, it supports the art instead of competing with it — just as a good team player should. —NW

The Plastic Wood Type

Typeface: Knockout

One of the joys of designing typefaces is seeing the flavors that designers coax out of your work. A fair amount of exploration always goes into our own process: Gotham wouldn’t be Gotham were it not able to look simultaneously young and old, and one of Idlewild’s virtues is the range of wildly different qualities that emerge in company of friends. But type designers never have the final say on what’s possible: it’s always the graphic designers who use our work who deliver the greatest surprises.

Over on Dribbble, I’ve been collecting some of my favorite projects that designers have created using our Knockout type family. Some dial up the typeface’s wood type heritage, evoking either vintage warmth or the charm of anonymous commercial printing. Others update the genre more subtly, using Knockout to give a little traditional depth to an otherwise contemporary design. Some unexpected moments await you, in which this typeface with nineteenth century roots becomes futuristic, atmospheric, or in one moment, simultaneously festive and earnest. Check it out. —JH

Things We Love

Typeface: Knockout

When we designed the Knockout type family, which celebrates the exuberance of nineteenth century wood type, we wondered: what designer would knowingly use the fonts to recall a world of quack medical cures and traveling vaudevillians? The answer, as it so often turns out to be, is “smart aleck Canadian advertising agencies.” Behold the truly excellent Grip Limited, who have created a typographic tour-de-force in Knockout (and a little Archer) that really repays scrolling in all directions. I especially like the end of the second column. —JH

Things We Love

Typeface: Knockout

This morning’s post by the always-fertile Grain Edit reminds me that I’ve wanted to write something in appreciation of Mark Weaver. As with so many things I like, Weaver’s work is difficult to classify: design? illustration? art? The term “collage” might do as a formal description, but it’s a shabby word to describe Weaver’s mysterious inventions, which so successfully bypass both the senses and the intellect and go straight to the mid-brain. His tableaux that simultaneously evoke grange exhibits, Japanese consumer goods, early David Bowie, and recent Wes Anderson — without ever quoting any of them literally — are worth experiencing up close; spend some time with his Make Something Cool Every Day series, and I think you’ll leave intriguied, delighted, and inspired. —JH

A Treasury of Wood Type Online

The Hamilton Manufacturing Co. traces its roots back to the very first wood types made in the United States. Darius Wells produced the first American wood type in 1828; his business was reorganized into Wells & Webb, then acquired by William Page, later passing back to the Wells family, and finally sold to Hamilton sometime before 1880. The product of this consolidation was a type specimen book issued in 1900, Hamilton’s Catalogue No. 14, which offers a good survey of American display typography of the nineteenth century.

Open to the public is the Hamilton Wood Type Printing Museum in Two Rivers, Wisconsin, a collection of 1.5 million pieces of wood type maintained by volunteers of the Two Rivers Historical Society. For at-home viewing, the calendar printer Unicorn Graphics has just launched their Web Museum of Wood Types and Ornaments, which offers a sundry collection of scans and photographs of American wood types — including every page of the great Catalogue No. 14.


Typographic Gifts for Designers, Part 13

Typeface: Knockout

The disappearance of wood type has something to do with the slow fade of letterpress from the world of commercial printing; it also has something to do with that dude at the flea market who sells hot-glued wood type sculptures on the weekends. And the Dust Bowl didn’t help: seventy years ago, Americans throughout the Great Plains discovered that blocks of hardwood impregnated with linseed oil could be very useful in a whole new way, so into the furnace they went.

Uppercase Gallery in Calgary has collected some wood type that’s been removed from circulation, and is offering it as the cheerfully packaged Authentic Vintage Woodtype Lettermix. We’re delighted that they chose our Knockout font family for the packaging, a typeface founded in the very sans serifs that their package contains. —JH

Politics Without Gotham

Typeface: Knockout No. 48

Not all political typography has to be set in Gotham (though it seems that way) — here for example are some calls to action by Shepherd Fairey that don’t use any Gotham at all. They use Knockout No. 48.

Designers in Louisiana, Nebraska, Washington, and Maine have primaries this weekend; Virginia, Maryland and DC, you’re up Tuesday. This means you. —JH

Your project exceeds the 1,000k limit, so your changes have not been saved.

Try adding fewer fonts, fewer styles, or configuring the fonts with fewer features.