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 Chronicle Hairline

Six new typefaces born of fashion, and designed for all kinds of dramatic visual storytelling.

Fashion changes, yet fashion typography endures. Ever since Alexey Brodovitch adorned the pages of Harper’s Bazaar with high-contrast ‘Modern’ typefaces more than eighty years ago, typefaces with billowy curves and fine hairlines have remained a signature of the fashion industry. More recently, as typography has begun to play a more central role in visual storytelling, these typefaces’ exquisite details and proud features have invited larger-than-life applications, allowing them to create the same kinds of enticing visual fantasies as enthralling fashion layouts and well-dressed windows.

Because readers can identify the style at a glance, high-contrast faces are widely used for fashion titles from the newsstand to the web. But Modern typefaces in the elegant and formal Didot style aren’t the only option for creating stylish, transporting typography. To offer designers a new voice to work with, we’ve taken our Chronicle Display family, a smart and newsy design in the ‘Scotch’ style, and extended it into this new collection of bright and graceful typefaces for creating grand, expressive, and picturesque typography. Meet Chronicle Hairline®.

In contrast to the steely detachment of a Modern, Chronicle Hairline is direct and welcoming: a tweed to the Modern’s silk, a Savile Row to its Place Vendôme. Its subtly shaded curves and neatly bracketed serifs give Chronicle Hairline the kind of warmth normally associated with Old Style typefaces. But the clear geometry of its beaks and terminals, its unfussy numbers, and its alert and practical italics, mark Chronicle Hairline as an indisputably contemporary design.

Perhaps most usefully for anyone who works with big type — whether on book covers, posters, banners, architectural lettering, or identity programs — Chronicle Hairline is designed in three different widths: an approachable Hairline, a cosmopolitan Hairline Condensed, and a dignified Hairline Compressed, each in both roman and italic. Together with the Chronicle Display headline faces, the Chronicle Deck series for subheads, and the Chronicle Text collection for text, the new Chronicle Hairline adds an extra helping of sophistication to one of our most versatile and hardest-working type families.

Introducing Office Fonts from H&Co

Every organization should brand its custom collateral: the proposals, statements, presentations and reports through which it communicates the most. Office Fonts from H&Co can help: they’re specially designed for users of Microsoft® Word, Excel®, Powerpoint®, Pages®, Numbers®, and Keynote®, the business software that runs typography’s last mile.

You know this company: their logo’s in Gotham, their website’s in Gotham, there’s Gotham in their outdoor advertising and their television spots. There’s Gotham in the window of every branch, and inside, Gotham on the in-store displays and the printed brochures. And then the estimate you’re given from their sales associate will be in Arial, your sign-up contract in Times Roman, and your next two years of monthly statements in something someone picked at the lettershop. Typography can be the least expensive and most effective way of reinforcing a brand, or the quickest way to dilute it.

Meet Office Fonts.

Office Fonts from H&Co allow everyone who speaks for the brand to use the same consistent voice. They’re adaptations of some of our most popular typefaces, specifically created for use in the applications that generate personalized communications. They allow an organization’s branding to extend beyond the projects that designers themselves create, to include the reports, proposals, statements, and presentations prepared by non-designers — often the bulk of how any organization communicates.

How They Work

People use the fonts that are easiest: the ones that live in their font menus, work in their software, look good on screen, and behave in familiar ways. H&Co’s Office Fonts are designed for people who use word processors, spreadsheets, and presentation packages, allowing them to participate in the brand typography.

All Office Fonts from H&Co feature:

— Familiar Families. No one looking for “regular type” should have to choose between Book and Medium. In place of the more detailed palette of styles that can be confusing for both businesspeople and their software, H&Co’s Office Fonts are provided in the customary four-style arrangement of Regular, Italic, Bold, and Bold Italic. Bold and Italic styles are mapped to the standard keyboard shortcuts B and I, to avoid the artificially “smeared” and “sloped” romans for which office documents are notorious.

— Enhanced Clarity. H&Co’s Office Fonts have a larger lowercase, a more generous fit, and clearer gestures, making them easier to read both on screen and in print (compare the A columns, above.) They have a heightened contrast between regular and bold styles, to make boldface type unambiguous (A1), and are engineered with ScreenSmart™ technology to render crisp and clear text on Windows.

— Friendly Features. Only a designer should have to contend with old-style figures, lining figures, or tabular figures. Office Fonts from H&Co include one and only one set of numbers, built on a fixed width to ensure that columns of numbers align neatly (B). Numbers are designed to the same width across all styles in a family, ensuring that highlighting text in boldface won’t disrupt the grid (C). And all Office Fonts feature numbers that coordinate with both lowercase and capital letters, making complex syntax easier to read (D).

— Compatibility. Office Fonts from H&Co are produced in TrueType format, to support even the simplest (and oldest) business applications. The same font files can be installed on either Mac or Windows, making asset management and deployment easier.

Today we’re introducing twelve families of Office Fonts, all of them available for purchase and download. Some coordinate with our best-known typefaces (which serve the world’s best-known brands), Office Fonts for Gotham, Archer, Whitney and Sentinel. We’re also introducing Office Fonts for some of our newest releases, including this year’s Whitney Narrow and Operator. Below is just a taste of what Office Fonts can do.

Nicely Done: Epicurious

A welcome bit of seasonal fare is the redesigned Epicurious, a hub for recipes, how-to articles, and inspiration for all things gastronomic. Building on the site’s massive recipe database, the Epicurious team took on the challenge of improving accessibility and adding new ways to discover content, two goals in which webfonts play a central part. The new Epicurious offers a fluid experience for visitors, with a more prominent and functional search mechanism, and new editorial features to accompany all the site’s content. We’re especially pleased to see our narrowest ScreenSmart font, Gotham Condensed ScreenSmart, play such a prominent role: it’s a smart choice to convey an authoritative editorial voice, without competing with the site’s hunger-pang-inducing photography. —NW

Made with Cloud.typography

USPS Stamps

As part of their continuing work with the United States Postal Service, Journey Group turned to Cloud.typography for the new USPS Stamps website.

Even when “communications” meant an e-mail campaign delivered to 317 readers, Journey Group of Charlottesville, VA recognized that stamps have a story to tell — and not just to collectors. Stamps are built on typography, making the web a natural place to share their rich visual heritage, and making webfonts an important part of the experience.

Though postage stamps can pass unnoticed, their typography is wonderfully playful, and the new USPS Stamps website strikes this balance with aplomb. It delights readers with its typographic grace and wit, but relies on webfonts to perform in a diverse set of circumstances, accompanying an unforeseeable collection of images, and rendering seamlessly across all the browsers used by the site’s vast audience.

For the site’s typography, Journey Group chose our Verlag and Chronicle webfonts. Instead of merely styling the site’s headlines, they implemented webfonts for all of the site’s type, using Verlag for both headlines and annotations, and Chronicle ScreenSmart for text. Using a ScreenSmart font ensured that the site’s text would maintain its visual integrity at even the smallest sizes, so that all of the site’s readers are presented with crisp, legible type.

“I’ve always admired Verlag for its modernist swagger,” said Senior Designer Seth Nickerson. “My feeling was that it could carry a page when needed, but also be objective enough to live comfortably with disparate elements, without looking out of place. Chronicle ScreenSmart seemed the obvious choice to pair with it: it has a crispness that matches Verlag, and just seemed to invite long-form reading when we looked at it in the design, which is paramount.”

The site’s typographic sophistication goes far beyond its palette. CSS transforms and subtle animations play a gentle but effective role in bringing the type to life, and the site is filled with gracious nods to philately (including our favorite, the perforated edge in the main nav.)

We’re proud to feature Journey Group’s work for the USPS as our first profile of a website using Cloud.typography. When we return, we’ll introduce you to a site that uses meticulous type and illustrations to strike the right tone for an international company. In the meantime, if you’ve made something special that uses Cloud.typography, let us know: we’re on Twitter at @HoeflerCo. —NW

Good Fonts, Bad Fonts, and the Presidency

Somehow we’ve let the election season come to a close without thanking both parties for making this an 100% H&Co election. Continuing the signature voice of its 2008 campaign, Obama for America kept Gotham as its typographic keystone, this year adding our Sentinel typeface as a companion slab serif. The GOP chose fonts from us as well, the Romney campaign settling on Mercury for its serif and Whitney for its sans.

We’d especially like to thank the teams at Obama for America and Blue State Digital for making us a part of their outstanding work on Barackobama.com. Eagle-eyed viewers may have noticed that webfonts from H&Co made their first appearance on that site earlier this year, an especially meaningful milestone for all of us. It’s not often that your first beta tester is the President of the United States.

If the coming days bring a bitter electoral challenge, or the next four years bring the nation continuing deadlock on Capitol Hill, Americans will know exactly who to blame: typeface designers. According to this study by researchers at the University of Illinois at Urbana-Champaign, bad typography may be useful in softening the stance of the politically extreme. The theory is that awkward or uncomfortable typography disrupts a reader’s “confirmation bias,” one’s tendency to only see things that are agreeable. What amateur typography might do for a candidate’s credibility is anyone’s guess, and whether the study’s choice of Times Bold really counts as an acceptable control for “good typography” remains an open question. But I look forward to the 2016 election, in which the honorable grunge candidate will face off against his esteemed colleague using Comic Sans. —JH

Things We Love

Typefaces: Tungsten and Gotham

In a manner more typical of the corporate than the corporeal, designer Nicholas Felton marks the passage of each year with an annual report. Past editions of the Feltron Annual Report have ranged in sensibilities, from his editorial 2006 (smarter than the smartest magazine) to his diagrammatic 2009 (which out-Tuftes Tufte.) While the very concept is arch, making the Feltron Report a beloved fixture in the offices of so many graphic designers, I really have to hand it to Nicholas for never stooping to the obvious and allowing his yearly record to become a mere send-up of the annual report form. This year’s report, awash in our Tungsten typeface, is no exception: it uses the tools of data visualization and typography to tell a compelling story, and color a narrative that might so easily have been reduced to a mere family tree or a timeline.

Spend some time with The 2010 Feltron Annual Report: I think you’ll find it smart, touching, and inspiring, an uncommon trifecta. —JH

These Aren’t The Fifty States You’re Looking For

Photo: Michael Moran. Typeface: Gotham Bold

In Fast Company, Ellen Lupton writes:

The graphic designer Michael Bierut, a partner working in the New York office of the firm Pentagram, designed a 21-foot sign for the new U.S.-Canada border crossing at Massena, New York. The sign, as well as the building, which was designed by architects Smith-Miller & Hawkinson, has received substantial praise as a bold and daring piece of federal design. Too daring, perhaps. The sign is being dismantled by the Customs and Border Protection Agency for fear that it will be a target for terrorists.

I share Michael Bierut’s hesitation in second-guessing the seasoned professionals at the Department of Homeland Security, who surely know more about armed extremists than I would ever want to. Still, I think there’s a compromise to be struck: if the goal is to create a typographic fig leaf that disguises one’s arrival at our 9,161,923 square kilometer nation, why not change the inscription to “Bienvenidos a México?” —JH

Guggenheim Redux

Typeface: Verlag Light

For one quarter of its lifetime, the Guggenheim Museum has enjoyed the use of a signature typeface created by H&Co. The project originally commissioned by Abbott Miller, a sans serif in six styles called Guggenheim, has since grown into a family of thirty styles, now known as Verlag. This expanded set of fonts, now including five weights in three different widths, is now available from H&Co. And gratifyingly, it’s still being used by the Guggenheim — now more than ever.

If the fonts’ thirteen years of continuous use can be attributed to anything, it’s the careful formulation of the original brief. The iconic lettering on Frank Lloyd Wright’s famous rotunda furnished the seed for the project; unchecked, this might have grown into an overly stylized typeface, too eccentric to be of much use. A more short-sighted designer might have made the easy play for nostalgia, but Miller took a more thoughtful approach, envisioning all the different applications that the typeface would come to serve. The family of types we created was therefore more interpretation than facsimile, a versatile family that we all hoped would evoke the qualities of the museum without simply replicating its signature. It was the right call: the fonts once used only by the Guggenheim New York’s publication department now serve the signage programs of four museums, the institution’s Webby Award-winning website, and now the new identity for the Guggenheim Foundation, also designed by Miller, and premiering this year as part of the Guggenheim’s fiftieth anniversary. —JH

Fontogenic

Typeface: Gotham Medium

Veteran campaigners know that the best way to gain someone's vote is to be photographed holding their baby. It seems that the same goes for fonts: it’s hard to take a non-partisan stance when one of the candidates looks so good standing in front of your typeface. Helvetica director Gary Hustwit shared this image with us, along with a hopeful observation about both the candidate and the typeface behind him:

“I think it’s interesting that the design of Gotham was influenced by early Modernism, another movement that was about change and social idealism. And I like that the design aesthetic that may help move Obama into the White House was inspired by the humble NY Port Authority Bus Terminal sign.”

A Font We Can Believe In, from the Helvetica Film Blog. —JH

The Timeless Typography of Harper’s Bazaar

ASME has announced its winners for Best Cover of 2007, and we’re thrilled to see that of the six covers that feature typography, five are clients of H&Co. You’ll see Chronicle on the cover of O, and our forthcoming Sentinel font on the cover of Texas Monthly. But especially gratifying is the 2007 award for Best Fashion Cover, which went to Harper’s Bazaar: it was Bazaar who commissioned our HTF Didot typeface in 1992, and fifteen years later, they’re still winning awards with it.

The flagging magazine that Liz Tilberis and Fabien Baron reinvented in 1992 has earned a place as one of the most significant redesigns in modern history. It debuted with an iconic cover that ASME ranks as one of the top ten covers in history, memorable not only for its striking portrait of Linda Evangelista, but for its arrestingly simple typography: in a font commissioned to be as crisp as possible, there appeared the single headline “Enter the Era of Elegance.” In an age when it’s not uncommon to run the entire table of contents on the cover, this was a brave and startling move. It’s telling that this same strategy is still serving Bazaar after all these years, and it speaks to the strength of the magazine’s editorial vision and the thought that went into its typography. So thanks to Stephen Gan and Glenda Bailey for including us in your continuing tradition, and to Fabien Baron and the unforgettable Liz Tilberis for making us a part of this extraordinary institution. —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.