It’s always thrilling to see designers combining type in interesting ways, an excitement that’s amplified when a designer uses an exceptionally large set of fonts in a single project. But it’s icing on the cake when that designer shows you ways of combining fonts you’d never have expected. Designer Tré Seals accomplishes all of these things in his new portfolio site, which uses a whopping six font families from our collection: Obsidian, Surveyor, Ideal Sans, Ringside, Operator and Tungsten are daringly diverse choices, which Seals uses to great effect, in clever and delightful ways. He takes a methodical, systems-based approach to select and deploy his type: most of the typefaces are only used in one context, others on just one page in the site. Finding them all is a bit of a typographic scavenger hunt, and a rewarding one for the design-minded.
For his project, Seals took inspiration from vintage postal labels, choosing the engraved Obsidian as his cornerstone when creating the type system for the site. Like Obsidian, the Surveyor, Tungsten and Ringside families have historic roots that connect with the traditions of stamps and labels, an assortment to which he added two novel ingredients: the quirky Operator, which serves as a bridge between the old and the new, and for a neutral voice, the clean, Humanist lines of Ideal Sans.
But Seals’s work isn’t only exciting because of the number of faces he uses or the themes they share. What makes it truly special is his creative eye in deploying the fonts in unexpected ways. When many people think of Tungsten, they immediately recall the robust bolder weights with their industrial presence, but Seals opts instead for a lighter weight that achieves an elegant and refined tone. Ringside is a similarly surprising choice: in less careful hands, its Grotesque construction might feel out of place next to Humanist designs like Operator and Ideal Sans, but Seals makes it work by using only uppercase letters, which naturally have simpler and clearer shapes. Overall, the site is a typographic delight that gives the audience a glimpse of Seals’s design inspirations, his systems-based problem solving abilities, and his creativity. He uses each of these six typefaces thoughtfully and with restraint to create an experience that shows off his work in the best possible light. — Bethany Heck
While good typefaces have prodigious families of carefully related styles, some of the best typography builds unexpected relationships between unrelated fonts. Here are five ways to create typographic connections, to help keep your design engaging and inventive.
by Jonathan Hoefler
1. Avoid the Obvious
When reaching for a different weight, turning to a sympathetic but distinctively different typeface can add drama to a design. Sentinel and Archer are two slab serifs with very different origins — one a nineteenth century ‘Antique,’ the other a twenty-first century invention full of circular ‘ball terminals’ — but using them together adds visual interest to an otherwise muted composition. Among sans serifs, Verlag and Gotham are two plainspoken typefaces whose unique flavors are sharpened by the contrasting of their details, Verlag’s pointy apexes (in its A, N, and W) offering a sparkling counterpoint to the upright candor of Gotham.
TIP: Changes in both weight and scale help to accentuate the differences between these pairs, and draw out the unique character of each design. Used together, Sentinel seems especially prudent and Archer especially happy; Verlag seems doubly elegant and Gotham twice as direct.
2. Create Practical Pairings
No task is more familiar to a designer than selecting two typefaces that can work hand in hand, each chosen to present a similar but distinctive kind of content. Text-heavy applications, whether printed or digital, often need two contrasting faces to highlight different kinds of information. A practical text face with a large x-height, such as Mercury Text, can be usefully matched by a sans serif with similar proportions, such as Ideal Sans. (Try a ScreenSmart font, even if you’re working in print: their generous fit and open gestures make ScreenSmart fonts especially readable at text sizes — and at sizes smaller still.) And don’t be bound to the convention of pitting serif against sans: if your body face is a sans serif workhorse like Whitney, try a more colorful sans serif alternative for contrast, such as Operator. Operator’s taut curves and punchy gestures offer a nice counterpoint to the sobriety of Whitney, and the fixed-width Operator Mono can introduce a strikingly different rhythm that usefully contrasts with the text.
TIP: A fixed-width typeface like Operator Mono helps to quickly identify something as a computer program. But when the manuscript calls for highlighting a code fragment in the middle of a paragraph of text, switch to the font’s natural-width cousin, Operator. Since Operator shares the same underlying design as Operator Mono, these bold keywords are instantly recognizable as pieces of code. But their more traditional rhythm of wide and narrow letters makes for a more comfortable read.
3. Strike Subtle Contrasts
Sometimes the most engaging combinations are the ones that aren’t immediately apparent. Even though Gotham and Vitesse are manifestly different typefaces — one a sans based on the circle, the other a slab rooted in rounded rectangles — both fonts are equally dramatic in their use of geometry, and can be rendered in very similar weights. But typefaces don’t need to share a common weight to be good comrades, especially if they’re used at different sizes. Compared with the smaller Sentinel, the stems in Quarto are nearly twice as heavy, and its hairlines one-fifth as wide, differences that disappear when the reader sees each at its own set of sizes.
TIP: Rendering two contrasting typefaces with a similar fit can help close the distance between them. In both the examples above, careful thought has been given to the tracking of each typeface, with the intention of synchronizing the rhythm of letters and the spaces between them, even as the fonts themselves change.
4. Assemble Elegant Duets
Whether a sans serif with finely-drawn strokes or a serif face with delicate hairlines, light typefaces have long been a mainstay of fashion and luxury typography. Many species of hairline fonts pair handsomely together, especially when additional motifs reinforce their elegance. Here, the “low-waistedness” of Landmark, clearest in its A, R, and K, gives the design a deco-era elegance, a smart counterpoint to the crisp and evenly balanced Chronicle Hairline. Another strategy is to match faces with both common weights and a common approach to construction, like the starkly geometric Vitesse and Gotham — which careful readers may have noticed, reversed, in the section above.
TIP: When working with hairline fonts, decide early what size each font is suited for: some can perform at large text sizes, others are best used only for the largest display typography. When evaluating a serif face such as Chronicle, look not only at the weight of its hairline strokes like the crossbar of its H or the thinner arm of its Y, but also the weight of its serifs. Serifs are often considerably thinner than hairlines, and it’s these delicate gestures that will define how small the font can go.
5. Introduce Strange Bedfellows
Some of the most dazzling typographic pairings — and certainly my favorites — are those that use unexpected fonts together. At left, the grey flannel suit that is Tungsten Compressed is paired with crimson silk doublet of the St. Augustin Civilité, a fiery sixteenth century typeface that demands a good foil. The contrast between Tungsten’s restraint and the swashbuckling Civilité makes for a marvelous palette, and the contrasting proportions of these faces emphasizes the solemn verticality of one and the racy horizontality of the other. At right, the unconventional Acropolis Italic, made only of straight lines, meets the energetic Surveyor Display Italic, a typeface without a single straight line. Lending the fonts extra cohesion is their insistent angle of incline: both lean forward considerably more than a typical italic.
TIP: Keeping eccentric typefaces at arm’s length helps accentuate their uniqueness, something that’s easiest to do by segregating each font by size. In these examples, each typeface is assigned a specific range of sizes that’s free of other fonts, a clear and inviolate ‘altitude’ that further distinguishes its role in the design. —JH
I’ve always wanted to create a decorative display face in the Regency style, one of those stout, industrial alphabets enlivened by bright, detailed illumination. Toward the end of our Surveyor project, a deep exploration of engraved map lettering, this idea started to feel especially relevant: engraved maps were often badged with elaborate title pieces, and the more time we spent with these hatched and shadowed letters, the more we could imagine how some of their visual qualities could be successfully interpreted in a contemporary typeface — and one that would be useful and relevant to designers today. But then there was the matter of draftsmanship: how do you do it? Type design is still largely a manual art, and the thought of devoting years of our lives to drawing tiny curlicues was a bleak prospect indeed. Like the best of dead ends, this was where things started to become interesting.
I’d been discussing this puzzle with Andy Clymer, a senior typeface designer at H&Co. As part of the Surveyor design team, Andy had spent a lot of time with the heaviest members of that family, the ones most closely connected with the Regency style. An accomplished programmer and a procedural thinker generally, Andy had taken a short sabbatical in 2013 to attend the first class of the School for Poetic Computation, an artist-run school in New York that explores the intersections of code, design, and theory. Returning with some fresh ideas about particle studies and 3D modeling, Andy and I met to reframe the project: what sorts of rapid prototyping tools could we build to help explore different options, and how might these help us execute our ideas across the massive scale demanded by a contemporary typeface? Not content to be a mere set of decorated capitals, our typeface would need 1,400 glyphs spanning both roman and italic styles, bringing its esprit to the most esoteric of punctuation marks and accents.
Ultimately, Andy’s scripts would become an entire suite of proprietary tools for interpreting two-dimensional letterforms as three-dimensional objects, through the application of virtual light sources that vary in position, angle, and intensity. Like the best projects at H&Co, the typeface was shaped not only by exchanges between designer and editor, but by the iterative cycle of what the tools can do, what we need the tools to do, and what the tools turn out to be able to do that we didn’t foresee going in. After 53 weeks in development, I’m proud to present a project that seemed unattainable just 54 weeks ago: the new Obsidian® typeface, from the designers at H&Co.
We’re delighted to introduce Surveyor, a new family of fonts for print and web, and sizes large and small.
I love maps, and not just for their vintage charm. I admire them as highly functional pieces of design, packing extraordinary amounts of information into small spaces, and invisibly educating readers about how they’re meant to be read. Spend a few moments with a map, and you’ll find that you’ve learned to distinguish counties, cities, and towns by the styles of type they use, without ever checking the legend. And these are just three of a typical map’s two dozen styles of lettering.
Surveyor® is a new family of fonts inspired by the traditional mapmaker’s letter. It revives a style of lettering that’s unique to cartography, one that evolved in the early nineteenth century and endured for as long as maps were printed by engraving. Beyond reviving the shapes of these alphabets, Surveyor celebrates what maps do best, by providing an expressive typographic vocabulary to help designers articulate many different kinds of information. A peek at Surveyor’s style list hints at what’s possible.
We’ve designed Surveyor in three optical sizes: a Text version for body copy, a Display cut for headlines, and a Fine for sizes larger still. Surveyor goes beyond the mapmaker’s roman and italic by including five weights, each of them outfitted with both roman and italic small caps, swash caps, and swash small caps. In its Text size, Surveyor features tabular figures, fractions, and symbols, to help it conquer the most demanding content. And for Cloud.typography users, we’ve created Surveyor ScreenSmart, a family of webfonts for text that contains all of these advanced typographic features, engineered to work in the browser at sizes as small as nine pixels.