Fonts for Complex Data

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.

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.

Whitney and Whitney ScreenSmart

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.”

Gotham Condensed and Gotham Narrow

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:

Chronicle Text Grade 2 Pro

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:

Inkwell

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.

Isotope and Whitney Office

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

Introducing Whitney Narrow

The Whitney typeface has always been an adroit multitasker. Having grown out of a commission from New York’s Whitney Museum, the typeface was designed to serve two masters: the museum’s publications department, which needed a design both compact and energetic, and the facility’s public signage, which above all required legibility and sturdiness. A later addition designed for headlines, the six-style Whitney Condensed family, made Whitney an even more valuable tool for both publishers and brands.

But one challenge that Whitney has never confronted is the narrow column. As editorial designers know, narrow columns are the bugbear of typography: they’re hostile to wide typefaces, perverting text with overzealous hyphenation, and often demanding that headlines be craftily written. Designers, developers, publishers, and brands now face the challenge of narrow columns every day in the form of the mobile phone: with the ascendancy of apps and the mobile web, fonts are routinely set on a two-inch measure. For these applications — as well as the narrow columns that permeate magazine sidebars and captions, paper packaging, data visualizations, and product literature — we’ve created the compact and economical Whitney Narrow®.

Whitney Narrow was designed to thrive at sizes both large and small. At small sizes, it excels not only in text and informational typography such as charts and graphs, but for rendering the growing universe of fine print that’s often required but infrequently read: the ingredient lists, nutritional information, regulatory notices, disclaimers, and copyright legends that attract compact typefaces. In print, Whitney Narrow renders this fine print with clarity and warmth. For the screen, we’ve created the companion Whitney Narrow ScreenSmart family, a collection of twelve screen-optimized typefaces that’s designed and engineered to perform at sizes as small as nine pixels.

At headline sizes, Whitney Narrow makes a hale companion to the regular-width Whitney. It preserves Whitney’s angular motif (originally inspired by the iconic geometry of Marcel Breuer’s Madison Avenue museum), and features an option to disable these details when they’re not wanted. Above, Whitney Narrow Bold in two different moods: jaunty with its angled stroke endings, and sober without them. These gestures appear in 231 different characters, but can be quieted with a single setting in any application that supports OpenType Stylistic Sets, such as Adobe InDesign, and the Cloud.typography webfont dashboard.

What’s Cooking

Menu typography at Discover.typography

If you’ve ever dated a graphic designer, this has likely happened to you. You’re seated comfortably at a charming restaurant, presented with menus, and you watch as your companion scans up and down the entrées. Menus are flipped over, brows furrow; eyeglasses are lifted as eyes squint at the details. You catch an occasional “huh” that suggests the discerning judgment of the true connoisseur, and think you’re in for a treat. “See anything you like?” you ask innocently. “I like the italic small caps on the wine list,” comes the response, “but they used Arial for the bottom two lines.” It’s amazing we get invited anywhere.

Lunchtime at H&Co tends to provoke these conversations, and with no civilians in attendance, we’re free to nerd out. We’ve been thinking a lot recently about the different typographic idioms that restaurants use to telegraph what’s in store — how the folksy barbecue joint distinguishes itself from the faux French bistro, or the more-Brooklyn-than-Brooklyn sandwich shop — and have been looking for ways to help designers communicate a restaurant’s culture without resorting to shopworn clichés. No wood type with the pulled pork, or belle epoque frippery with the poached eggs: you can definitely use modern, relevant, and satisfying typography, and still set the right tone.

You’ll find a few of our suggestions at What’s Cooking, a collection of thirteen typographic menus (plus a few amuse-bouches), today at Discover.typography. These autumnal settings are a follow-up to Save the Date, our summertime celebration of the invitations that turn into cherished keepsakes once the first chill of fall enters the air. We hope you’ll enjoy them both. —JH

Ask H&Co: Fonts for Financials

Typefaces: Sentinel and Gotham

Annual reports offer designers a marvelous opportunity to strut their stuff. In the hands of a thoughtful typographer, a dense volume of technical text can become warm and welcoming, its changing rhythm of introductions, statements, analyses, and disclosures calling for a beautiful typographic system to help organize the text. Financial data can be uniquely satisfying to design, offering an irresistible opportunity to work with large type families in intricate ways. There are tables both long and short, as well as charts, graphs, and diagrams, all studded with headings, footnotes, and legends that defy even the most ingenious grid.

Each of these details places a special burden on the fonts, making it especially important to choose the right palette up front. We’ve gathered some thoughts about choosing fonts for annual reports for our Techniques library, here you’ll find four things to think about when considering a typeface — and a collection of font families specifically designed to meet these unique challenges.

The New Gothams: 46 New Fonts from H&Co.

Fans of our Gotham typeface will be pleased to find that as of this morning, there are three times as many Gothams in the world as there were yesterday.

Designers who work with Gotham have enthusiastically deployed the fonts in a range of environments. We’ve seen Gotham on soda cans, boarding passes, billboards and banner ads; we’ve seen it engraved in marble on a cornerstone, and cast in rubber on the sole of a shoe. One newspaper used Gotham for financial listings, another for saucy tabloid headlines. But what we see the most are designers facing the challenge of making one typeface work across all channels. Last year saw one of the most remarkable examples of this: journalists couldn’t stop writing about something that designers have always known, which is that a candidate for president should use the same font for everything, from lawn signs and flyers to the campaign’s website.

Making a font work everywhere is a tall order. H&Co’s designers love these kinds of challenges, and are driven by an incurable compulsion to make fonts that can answer everyone’s needs. But designing a typeface is an arduous process requiring serious commitment, and we realized early on that if we weren’t careful, there could suddenly be an endless number of very specialized Gothams. The prospect of a “Gotham for embroidery” collection and a “Gotham for box scores” was daunting, and ran counter to one of H&Co’s core philosophies: that type families should be as small as possible, but as large as necessary.

So we organized all of these ideas into a coherent design brief, mapped out a way to bring a larger Gotham family to life, and then devoted years to drawing the new fonts that we’re delighted to present today. Today’s Gotham contains a total of 66 styles, neatly organized into four widths: regular Gotham, the new Gotham Narrow and Extra Narrow, and the newly-expanded Gotham Condensed. They’re available in packages starting at $169, exclusively from their designers at Hoefler&Co.

Introducing Archer

We’re delighted to introduce Archer®, a new slab serif in forty styles. Sweet but not saccharine, earnest but not grave, Archer is designed to hit just the right notes of forthrightness, credibility, and charm. Romans and italics in eight weights each, including a delicate hairline for display work, and featuring small caps, fractions, tabular figures, and our Latin-X® character set for extended language support. Now shipping in OpenType, with prices starting at $149, plus special savings when you order two or more Archer packages.

High Scores for Service and Style

Typeface: Whitney Medium

With the arrival of a new year comes a new Zagat Survey, and with this year’s edition comes a special typographic surprise: a complete redesign using our Whitney family. The indomitable Zagat team has given the fonts one of their most rigorous workouts ever, using Whitney’s many special features to excellent advantage — here’s some of what’s inside.

Typeface: Whitney Book (including Numerics)

Pocket guides have an especially compelling need to keep page count low and legibility high, making Whitney’s compact forms a good match for the project. In its pro edition, Whitney contains a set of even-width tabular figures, which the Zagat team used for this very clear and sensible wine vintage chart, above.

Typeface: Whitney Index Black Round Medium

Since guidebooks feature both maps and numbered lists, a set of numbered indices is often useful. Here, Zagat’s heavily-automated pagination system is able to call upon the pre-built Whitney Index font, rather than demanding the intervention of a designer for every single table. (If you’ve ever tried to make numbers in circles yourself, you know how treacherous they can be — especially when lists spill over into double digits!)

Typeface: Whitney Light and Bold

Newsprint is an appropriate choice for a pocket guide, since it helps reduce both weight and cost, but it’s an especially hostile environment for typography. To survive newsprint, letterforms need to have clear gestures and open apertures, to prevent their forms from clogging up at small sizes. And because type on newsprint can gain weight unpredictably, sans serifs with a broad range of weights are especially useful. Whitney has six weights, each of which makes an appearance somewhere in the 2008 guide. —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.