Five non-obvious ways to use type to evoke the speed, power, and control of performance racing.
Typeface designers frequently speak of curves being fast or slow. We’re often talking about the kind of motion that we imagine having created a shape, whether something feels like the product of a relaxed wrist loosely holding a pen, or pinched fingers meticulously turning a compass. A common topic is changes in speed, whether throughout a curve, an alphabet, or even a family of typefaces. There are curves that breathtakingly decelerate in exciting ways, letterforms that employ different strategies (so that a boxy W feels as nimble as a sinewy S), and the constant battle to ensure that lithe alphabets aren’t paired with sluggish boldfaces. Here are some of the techniques we use to convey speed in our letterforms, and some things that you as a designer can do when choosing and applying typefaces. —JH
Relieve the corners. Above, in the IsotopeN, the font’s energetic movement comes from the placement of its curves and corners. In a typeface that generally has sharp edges, subtle curves on the outside diagonal corners help to heighten the momentum through the line.
Choose extreme proportions. Idlewild’s pronounced width is accentuated by gestures that extend outward, like the elongated tail of this capital R. A typeface originally inspired by lettering on cruise ships and jet fuselages, these proportions have long been used to symbolize the perfect balance of speed and control.
Look for controlled dissonances. Even unexpected genres like the slab serif can achieve a feeling of speed. Above: more sophisticated than a simple rounded rectangle, the Vitesse typeface contrasts round sides and flat bases to introduce a dynamic tension. Even the simple letter O has moments in its ‘corners’ where its material seems to bend almost to the point of breaking, adding a little drama to what could otherwise be a unadventurous letterform.
Tighten the curves. Letters in the Tungsten Compressed family take every opportunity to square up against their sides, to convey a clean, engineered feel. Instead of slowly moving through a graceful curve, the spine of Tungsten’s S has tight turns that quickens the movement, creating a brisk, staccato tone.
Turn up the contrast. In the Peristyle typeface, the stark contrast of thicks and thins is never more dramatic than in its letter M, which cycles rapidly between quiet and loud timbres. As the font gets heavier, and the distinction between dark and light strokes becomes more pronounced, adding a little letterspacing helps make the font rev louder.
Retail displays, packaged goods, financial reports and apps all present readers with a dizzying array of data. Here are a few ways to make quick work of their long lists, tiny annotations, and mighty stacks of numbers.
by Jonathan Hoefler
Type designers work with a diverse clientele, and yet common themes always seem to emerge in our conversations. This seems to be the season of complex typography, in which designers everywhere are faced with the challenge of presenting different and competing kinds of information to readers. An agency we’re working with is designing a demanding identity for a fast-moving consumer goods brand; an in-house art department is creating a responsive website for complex financial disclosures; a freelance graphic designer is doing the identity for a local coffeeshop, and discovering the joys and perils of digital menu boards. As always, the wrong fonts can lead designers into sticky dead ends, but the right ones can be immeasurably helpful. Here are some of the things our clients consider when faced with complex typography, and some of the typographic strategies that can be the quickest routes to success.
Strategies for Small Sizes
Information can often be divided into data and annotations. A web form needs a way to distinguish entry fields from labels; a graph needs not only labels for its x and y axes, but most crucially a verifiable reference for the source of its data. (#fakenews, I’m looking at you.) The most familiar and obvious way to establish this hierarchy is through type size, using palpably smaller type to distinguish the content from its notes. But at smaller-than-text sizes, even the most lucid typefaces can become difficult to read, their spacing overly tight, their counters congested, and their x-heights measly. Compare the tiny type in these two examples.
Helpfully, there’s an adaptation designed for the web that proves useful in any medium: a typeface’s ScreenSmart fonts, which are designed to compensate for the effects of scale. Above, two compositions using the Whitney typeface, the one at the right substituting Whitney ScreenSmart for the tiny annotations below the graph. ScreenSmart fonts always deliver greater clarity and more comfortable reading at smaller-than-text sizes, making them a useful companion to a multipurpose typeface for setting the fine print.
Dealing with Lists
Fine print is the bugbear of typography not only for its tiny size, but often its prodigious length. Disclosures, disclaimers, and lists of ingredients may be the sections that readers most often ignore, yet they’re among the most heavily regulated part of any typographic object, and therefore the content that’s most heavily scrutinized by an alarmingly large portion of an organization. Hands up if you’ve ever received a request from Legal to fit in a few more sentences once a design has been approved. Hands up if this wasn’t exacly a “request.”
A non-designer’s first impulse is often to reach for a condensed typeface, on the principle that narrower letters take up less space. Yet it’s almost always a better option to make the counter-intuitive choice of a wider typeface, and to set the type in a smaller size with tighter leading. Wider letters have more comfortable proportions, they’re more generously spaced, and they have more ample counters, collectively making them the more legible choice. Above, two ingredient lists in Gotham: at left the passable Gotham Condensed, but at right the far more inviting Gotham Narrow, a family that’s two steps wider. TIP: Use not only a wider font, but a wider ScreenSmart font as well, for maximum clarity.
Working the Character Set
The humble annotation can give designers the chance to flex their creativity, and an excuse to explore the more colorful quarters of the character set. Reference marks, starting with the asterisk and dagger, are sometimes a welcome grace note whenever the subject matter becomes dry, but beware their use if there are more than three notes in a document. Readers can be counted upon to recognize the cycle of *, †, and ‡, but probably not the longer series of **, ††, and ‡‡ — or §, || and #, depending on your house style. If there are more than three footnotes, stick with unambiguously numbered superscripts instead:
Superscripts are included in every H&Co font that has a Pro edition, as well as Gotham, Ringside, and Inkwell. TIP: In the text, mark your footnotes with superscripts, which ascend above the cap height. But in the notes themselves, use numerators instead, which are lower on the body. This connects them more clearly with the explanations that follow, and gives them greater clearance from the preceding lines.
Numerics, Numerics, Numerics
The same Pro packages that contain superscripts and numerators contain tabular figures, the most vital part of any composition that includes numbers. Unlike a font’s traditional proportional figures, whose widths vary with the natural shape of each number — from a narrow 1 to a wide 0 — tabular figures are all built on the same horizontal measure, ensuring that columns of data always align correctly.
Tabular figures have a second and equally important characteristic: they maintain their equal widths across a range of weights. (This runs counter to the typical behavior in a typeface, in which heavier weights become progressively wider.) Known as “duplexing,” this is one of the essential characteristics of tabular figures, because it allows designers to highlight individual lines in boldface without disrupting the width of the column.
TIP: The word “tabular” may imply the dense tables that are annexed to annual reports and financial disclosures, but don’t forget how often stacks of numbers appear in other contexts. Tabular figures are essential in menus, indexes, and directories, and anywhere that a design includes prices, statistics, account numbers, or scores — or any kind of dynamic data online. Any digital experience that shows changing numbers such as stock prices, sports scores, product skus, exchange rates, flight numbers, timetables, or membership points will absolutely demand tabular figures. Design your projects with tabular figures from the outset.
Making Creative Choices
Advanced numeric characters like tabular figures and superscripts aren’t the exclusive province of workhorse type families, and not every project demands a sober serif or sans. When a project’s complexity requires a hard-working typeface, but its subject matter invites a more individual tone, look for unexpected typefaces that feature extended numerics. The handwritten Inkwell contains all the features needed to articulate demanding content, but its relaxed demeanor has a natural affinity for entertainment, retail, food services, the arts, hospitality, pediatric care, and even philanthropy:
TIP: If your tables will use only a single weight, consider a typeface whose numbers have equal widths without the regular-and-bold duplexing of true tabular figures. The Indicia, Claimcheck, Revenue and Greenback typefaces in our Numbers collection are designed on a fixed width, as are the cheeky digits in each weight of Inkwell Blackletter.
Branding Custom Collateral
The last mile of visual communications are often the things created not by designers, but by software. It’s frequently the operators of word processors, spreadsheets, and presentation packages who need to speak in the organization’s voice, but lack the tools to do so properly. For these projects, we’ve created Office Fonts.
Office Fonts are adaptations of H&Co’s hardest-working typefaces, specifically engineered for use in business packages such as Word, Excel, and PowerPoint. These are the same families whose ScreenSmart fonts invite use at small sizes, and whose Pro character sets can tackle complex data. Reimagined for the non-designer, Office Fonts are limited to a familiar four styles per family (roman, italic, bold, and bold italic), and feature exclusively tabular figures, to avoid typographic mishaps that might go undetected. (And they ship in TrueType format, for maximum backward compatibility with even the most antiquated operating systems.) TIP: If a brand’s communications will ultimately include custom collateral like reports, proposals, statements, and presentations, design these documents from the outset using Office Fonts, to take advantage of their unique characteristics. —JH
Inspired by a style of lettering invented to convey precision and reliability, Isotope is a new family of typefaces designed to be both luxurious and fit.
If your idea of a luxurious product is one that’s stainless steel rather than gold, you may be a Functionalist. Functionalism is an approach to design that gained popularity in the decade after World War II, especially among German manufacturers of consumer goods, for whom a thing’s visual design was the natural expression of how it was meant to be used. In their desire to be intuitive and straightforward, the designers of a generation of unobtrusive radios, bathroom scales, and turntables would define a new aesthetic, one that still resonates with us as useful, well-built, honest, and timeless.
In the years that followed, the Swiss International Typographic Style would supply the letterforms for this philosophy, and industrial design would forever be associated with Helvetica and Univers. But briefly, before Swiss typography swept the continent, there was a strikingly beautiful species of letterform that arose in Germany — never produced as a typeface, but popular among lettering artists, through whom it became fossilized in company logos. For their precision-built products, companies like Sennheiser, Liebherr, Soehnle and Leifheit would adopt this new style of letterform, to convey the solidity, reliability, and practicality of products from kitchen appliances to bulldozers. It’s this style that we’ve explored in Isotope®.
Where Functionalist lettering was limited to boxy capitals, Isotope reimagines the style across a full range of weights, and a complete character set including a lowercase. The broadest strokes of the style have been preserved — contrasting vertical and horizontal weights, complex letters like S reduced to their most linear essence — to which Isotope brings new subtleties that help make the design not just purposeful, but luxurious and elegant. Corners are intermittently softened, to heighten the momentum through letters like A, M, N, V and W; in the numbers, strokes are sheared at unexpected angles to give them a welcome liveliness. From the initial Ultra at the heaviest end of the spectrum, Isotope descends through eight discrete weights down to a sinewy Thin, where subtle details rescue the design from sterility, to create a typeface that’s smartly clinical, and reassuringly exact.
My thanks to our typeface designers Troy Leinster and Sara Soskolne, who joined me in developing this idea into a fuller and more practical family of typefaces than any of us ever imagined. Their backgrounds in graphic design helped keep the project focused on its end uses, and prompted an ongoing conversation about what the fonts were for. In lesser hands, this lettering might have remained a nostalgic curio — or worse, veered into the sort of streamlined lettering that’s the exclusive province of science fiction. Instead, we found ourselves able to steer Isotope towards associations of luxury, fitness, health, fashion and beauty, as well as engineering, technology, and industry. We’re looking forward to seeing what designers will do with it. —JH
A new font family restores the chic long vanished from the condensed, high contrast sans serif.
So many of a typeface’s attributes have obvious associations for readers. Extreme weights can suggest delicacy or strength; extreme widths can be bustling or contemplative. Even the size of the lowercase sends a quick signal to the reader: a small lowercase can read as precious, and a large one can feel gentle and good-natured. Rare are those typographic qualities that have an immediate effect on readers but are open to interpretation, and chief among these is contrast, the quality we’re exploring with Peristyle®.
Contrast, the relationship between an alphabet’s thickest and thinnest strokes, is present in all typefaces. It’s a vestige of calligraphy, revealing the distant influence of the broad-edged pen, and it appears in even the most mechanical geometric typefaces. Amplifying a design’s contrast makes it less familiar, and therefore more dramatic, most often in the service of some kind of exoticism: there’ve been high-contrast faces that are newfangled, old-fashioned, futuristic or retro, ones that evoke the mechanized clichés of science fiction, or the streamlined motifs of Art Deco. With Peristyle, we wondered: could we turn up the contrast without looking either backward or forward, to create a typeface for today? Could we use this drama to create a strong personal style that was chic, fashionable instead of fussy, and elegant instead of eccentric?
Peristyle explores the effects of contrast across six weights, from a vertiginous Light to a groovy Black. In place of the repeated gestures that are common to condensed typefaces — a pattern that quickly becomes tiresome — we’ve added a couple of supplementary motifs to keep the design engaging and upbeat. Circular ‘ball terminals’ on letters like y and r help drive them apart from their cousins u and n, and vigorous wedges on letters like k and g help distinguish them from the workaday h and q. These dynamic shapes recur throughout the character set, and across the full range of weights, creating an effervescent rhythm everywhere the font is used.
Having distilled Peristyle down to a sufficiently expressive set of parts, we couldn’t resist further reducing the design down to its parts alone, so we added a stencil design to the family. It’s included as three styles: a standalone Peristyle Stencil font, and two bicolor layers that can be tinted differently and stacked together. (Letters that can be divided into left and right halves irresistably invite the use of color, to create a secondary rhythm of alternating hues.) Peristyle Stencil’s two layered fonts make settings like these easy to design — and an additional piece of back-end logic, built into the fonts themselves, makes it easier than ever to create two-color typography that’s balanced and consistent.
Separating a character into two colors works intuitively when the letterform has two equal halves, but becomes trickier in letters with one stroke (like i, l, and t) or with three (such as m and w) — not to mention more complex characters like g, Ǿ, or %. Without carefully managing which shapes get which color, two-color typography quickly develops unwanted concentrations: above, the sequences Illu, stra, and tio are overwhelmingly blue. Peristyle Stencil solves the problem by automatically reversing the color orientation whenever necessary, in order to maintain an even rhythm of color throughout the line, and a better balance of both colors everywhere.
The three-minute film above introduces Peristyle and the team behind it. Troy Leinster and I worked on the typeface together from its earliest stage, and H&Co’s Sara Soskolne provided valuable insights along the way. Our designers Andy Clymer, Colin M. Ford and Graham Weber helped bring the typeface home, and throughout the project, no one was more enthusiastic about Peristyle than our Creative Director, Brian Hennings. Brian found in Peristyle some unexpected affinities with a few truly far-flung species of typeface, and takes the time here to share the useful perspective of someone who uses fonts. We hope you’ll find Peristyle as practical, as companionable, and simply as enchanting as we have, and we look forward to seeing how it serves you. —JH