How the virtues (and pitfalls) of type, calligraphy, and handwriting came together in the design of a new typeface: a lecture at Typographics 2017.
I recently had the privilege of speaking at the third annual Typographics conference, an event organized by the Type@Cooper program at The Cooper Union, to share a new project with fellow designers. While visually this new typeface would be unlike anything we’ve ever done before, in many ways it’s the quintessential H&Co project, taking on many of the themes that have characterized our work over the past twenty-eight years. It pokes at the perimeter of the “type family” as it’s commonly understood (much like Hoefler Text, The Proteus Project, Knockout, Numbers, and Nitro), it meditates on the relationship between formality and informality in typography, like Ideal Sans, The Historical Allsorts, Archer, and Operator; it looks for clues in the observable world about how people interpret letterforms, like all of our typefaces, from Shades to Gotham.
The conference has just posted the video of the talk, which I’m pleased to share with those who were unable to attend. And attached below are my lecture notes, which may make up for my double-time performance: already someone who speaks too quickly, I’d mistakenly planned a forty minute lecture for a twenty-five minute slot! —JH
New from H&Co, Inkwell is a tiny universe of fonts in which handwriting meets formal typography.
Sixteen years ago this week, I was designing my wedding invitations. The invitations were set in my typefaces, and printed by a friend who runs a letterpress shop in Berkeley, and the enclosing envelopes were hand-addressed by a calligrapher. Each kind of letterform served a different purpose: the type was dignified, and the calligraphy was personal. But I never really figured out what to do with the map.
Out-of-town guests would need a sophisticated map of the venue, explaining how to get there by road, rail, and air, where they might park, and some sort of assurance that it really was safe to take the subway. Set in type, this looked too institutional: it didn’t feel like it came from the bride and groom, but rather from someone’s marketing communications department. But rendered in calligraphy, it looked ridiculous. I felt like I was directing my friends and relatives to a wedding in Middle Earth.
My dream was to letter this myself. Not in fussy, mannered calligraphy, but in simple block printing, something that was an extension of my own handwriting. I’d have done this, had I the time, skill, and patience. Instead, I filed away an idea for later, that somewhere there might be a useful intersection of type, calligraphy, and handwriting, that might one day become a typeface. Something with the versatility of type, not only because it could be summoned from the keyboard, but because it would have methodical drawings and spacing, a proper character set, and the kinds of relationships that designers depend on — italics, small caps, and so on. But it would also have the expressive dimension of handwriting, with writing’s ability to fluidly change styles to suit the message. (When something is important, I find myself dropping my longhand script in favor of letterspaced capitals, but still punctuating these with the occasional cursive “of” or “for.”) I imagined that a sufficiently large family of types could do the same thing, so I set to work on a prototype as a proof-of-concept for the idea. After simmering for more than a decade, we picked up the project last year, with H&Co typeface designer Jordan Bell leading the charge, and our Andy Clymer graciously lending an indispensable assist. Today we’re very pleased to introduce the result: Inkwell®, a collection of typefaces for expressive writing.
Not quite a typeface, or even a family of typefaces, Inkwell is more like a family of families, featuring a Serif, a Sans, a Script, a Blackletter, a Tuscan, and a set of Open capitals. While it’s designed for serious content — it can effortlessly dispatch detailed maps, complex reference books, or anything displayed in a digital app — Inkwell wears its attitude lightly. It’s “serious” in the sense of thorough, rather than earnest, speaking in a decidedly personal, authorial voice.
Inkwell explores six different genres of type with which readers already have strong associations. It begins with Inkwell Serif, a book face for text, designed to avoid any obvious typographic style and simply look like “plainly lettered text.” It’s provided in romans and italics, with small caps in both postures, with a few unexpectedly sophisticated touches like tabular figures, fractions, and symbols. These styles feature both swash caps and swash small caps, making it possible to dial up the typography’s whimsy in subtle increments.
Inkwell Sans is the companion sans serif, provided in the same twelve parallel styles, again with small caps and numerics throughout. Its capitals are reminiscent of inscriptional lettering, taking nicely to letterspacing, and its lowercase is again designed to be unmannered in style. Where the sans roman was based on my handwriting (or rather, an idealized version of what I might be able to print with great care), the sans italic is the product of Jordan’s hand, and brings a touch of signpainting to the Inkwell family, especially in its heaviest weights.
Designers have been asking us for a script since we first opened for business in 1989, and we’re very pleased to answer with Inkwell Script. Like the rest of the family, Inkwell Script strives to be informal, avoiding the fussiness of the studied calligrapher, and speaking instead with the confidence and joy of an enthusiastic writer. We’ve included small caps in all of its weights, so that acronyms and abbreviations can be set more easily, something you might appreciate if your name ends with “iii.”
I’ve always had a deep fondness for gothic forms, and couldn’t resist making Inkwell Blackletter a part of the family. It’s tempting to write off the blackletter as an archaic style, but it’s very much alive today, and remains the easiest way to signal gravity in anything you do. It’s ceremonial for weddings and graduations, and adds a dash of tradition to the rustic and highbrow alike. Law journals and heavy metal bands both rely on blackletter typefaces for their gravitas, in admittedly different directions. Inkwell Blackletter is happy to serve both masters.
Because written letters can often take a turn for the fancy, we’ve designed Inkwell Tuscan as the decorative member of the family. Tuscan faces are nineteenth century inventions that feature fishtailed serifs, an idea that we’ve implemented in an unusual way to ensure that even serif-free letters like O can be fully embellished. As it progresses from light to dark, Inkwell Tuscan takes on very different flavors, from sweet and bucolic to boisterously burlesque.
The final style is Inkwell Open, a set of capitals inspired by the sorts of letters used by engineers. My father was a theatrical set designer, and I remember his titling his shop drawings in a style like this. I’ve since seen letters like these on blueprints, patent applications, and technical drawings, and even reduced to geometry on a lettering stencil. Open capitals are a useful way to identify something as a heading, or to indicate that something is otherwise elevated above the text.
The entire Inkwell family is designed to be used interchangeably, which opens up some interesting opportunities for designers. At the scale of the paragraph, it means that designers who are accustomed to shifting roman type to italic or bold will have new options, and can move from serif to sans, or script, or swash small caps, or blackletter, to achieve different distances from the center. At the scale of the word, it means that letterforms from different styles can be juxtaposed in unexpected ways — sometimes invisibly, other times with great flourish — making Inkwell a powerful tool for creating logotypes. Included in the Inkwell gallery you’ll find artwork that mixes blackletter capitals with the roman lowercase (and vice versa), script capitals with sans serif roman small caps, blackletter caps with tuscan caps, roman swash caps with the blackletter lowercase, and more. Each of Inkwell’s styles is provided in the same six weights, from Thin to Ultra, yielding a total of 48 font styles, which today we’re introducing at a special price, for those designers looking add something new to their stables. On behalf of everyone at H&Co, I hope you’ll find a place for Inkwell in your collection, and I look forward to seeing how it serves you! —JH
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
“Mobile First” is an indispensable approach for designing digital experiences. The idea is to first consider the restrictions and expectations of the handheld browser, and thereby identify and distill our very best ideas. For designers working on broader identity systems, I propose a parallel rallying cry: matchbox first.
A matchbox might be a charming memento of an evening well spent; a matchbook an ersatz way to share a phone number or jot down an idea. But materially, these tiny pieces of cardboard are usually the most reduced manifestations of an organizations’s visual identity. Only the best parts of a resturant’s front window, its menu, or even its business card will make it to the matchbox, so it’s here that both design and designers must be at their best. When it comes to working with limited resources (both space and budget), it’s often typography that comes to the rescue, and sometimes typography is the only ingredient. One de-prioritizes the mission statement and thought leadership/heritage backstory right off the box, and discovers the freedom to also leave them off the website, the billboard advertising, and the rest of the business. If the matchbox doesn’t need them, nobody does.
Today at Discover.typography, thirty-nine small-scale identities reduced to their very essence. We love the way these tiny tableaux rely on the smallest type to do the heaviest lifting, and the joy of seeing how the right fonts can communicate all the essentials at a single glance. —JH