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.

Introducing App.typography

Now you can use the H&Co fonts you love to publish apps, digital publications, eBooks, and more. Meet App.typography, the simple font licensing solution for digital publishers.

App developers lavish such care creating thoughtful, lovely experiences, places where users can return again and again, and always feel at home. For all the time we spend browsing the web, we’re spending more and more time using our devices’ native apps, a trend that’s poised to continue with the arrival of mobile-minded projects like Facebook Instant Articles and Apple News. The one thing that all mobile experiences have in common is type, making it more important than ever to get the type right — to use the right fonts to create the sophisticated, expressive environments that users deserve.

We’ve long worked with our clients to bring typography into the mobile space. For some, it means developing cross-channel typography that aligns their print, web, and mobile products; for others it means choosing fonts that solve problems, and help shape the user experience from the outset. We’ve found that the needs of designers, developers, publishers, news organizations, institutions and brands are all a little different, but what everyone wants is for type to be functional, and for licensing to be painless. We want these same things, and more: we want to furnish app developers with the same high-quality tools available to print and web designers. We want developers to have access to everything that a font family has to offer, to be free to match the font to the medium and the experience, and to be relieved of having to count styles, platforms, or downloads. In short, we want to do everything for app developers that Cloud.typography did for web developers, allowing people to use their existing H&Co libraries in a whole new way.

Meet App.typography.

App.typography is a service that enables you to publish apps, digital publications, or eBooks that incorporate any of the H&Co fonts you’ve bought for your computer. It’s a new model for licensing fonts, one that’s based not on the number of font styles that you choose to embed, but the number of titles that you publish.

For developers, App.typography means the freedom to choose from whichever fonts you’ve bought, including as many styles as necessary to create the perfect experience. We’ve defined “an app” in the broadest possible way, so that the product you create for iOS, Android, and Apple TV — even if the versions for the Apple Watch and the Samsung Galaxy Tab don’t share a single line of code — is covered by a single App.typography subscription.

For publishers, App.typography offers the ability to port your existing typography to digital publications and eBooks, to distribute these in a vast array of different formats, and to cover all of the books that you publish under a single imprint. Use as many fonts as you’ve purchased, to publish as many books as you like, and see them downloaded as many times as possible, all with a single App.typography subscription.

The Fonts

An App.typography subscription covers all the H&Co fonts you’ve purchased for your computer, and all the fonts that you buy in the future. This extends to the entire H&Co library of more than 1,300 styles, including our nineteen families of ScreenSmart fonts that are specially designed for the screen. You’ll find countless solutions for app design in the H&Co library: fonts with tabular figures for game scores and activity timers, compact fonts for narrow columns, and high-performance text faces for extended reading. Spend some time at Discover.typography if you’re looking for inspiration, or get started with App.typography today.

Use Fonts on iOS!

Now you can install H&Co fonts on your iPhone and iPad, and use them in applications that support fonts.

Great mobile apps like Pages, Numbers, and Keynote make it easier than ever to use your iPad and iPhone not just to consume content, but to create it. Typography, a long-missing piece of the puzzle, just got a lot better: starting today, your iOS 7 devices can use all the Hoefler & Co. fonts you’ve ever purchased, and you can install them directly from this site. Free.

Using Safari on your iPad or iPhone, head over to your Font Library page. You’ll see a list of fonts you’ve licensed for your computer, each with an add to device link that installs them directly into your mobile device. Managing fonts on iOS is easy — you’ll find more information about it in our FAQ. Enjoy!

Pages on the iPad, using Tungsten, Gotham, Sentinel, Surveyor, and Whitney.

Fonts by Hoefler & Co.

We’re marking the change to H&Co with some updates to our font library, some new features on the site, and some good news for app developers.

Improved mobile fonts

We’ve remastered all 1,094 fonts in our library to deliver even more consistent performance across desktop, web, and mobile environments. In the past, we’d supplied app developers with special “mobile” versions of fonts built for iOS and Android — but starting today, any fonts you purchase for your computer will be the same ones you’ll use when developing mobile apps.

Free updates for desktop fonts

We’re building a new feature for the site that makes it easy to download your past purchases any time you need them, and to ensure that you always have the latest versions of our fonts. Today we’re rolling this out to our Cloud.typography subscribers, and soon we’ll be making it available to everyone. If you’re a Cloud user, log in and go to Your Font Library under the “Welcome” menu, and you’ll be able to see your entire font collection, and download the latest versions of any fonts you’ve licensed for your computer.

Streamlined app development

We’ve changed our licenses to make life a little easier for app developers. In the past, developers needed two kinds of licenses: an End-User License to use fonts on their computers, and a separate App License to embed these fonts in their apps. We’ve rewritten our EULA so that anyone buying a computer license can now use these fonts to develop apps, without any separate paperwork. App Licenses are needed only when publishing an app, something our licensing group can help arrange for you or your clients.

Fly Delta, Readability, QuizUp and Threes, featuring our Whitney SSm, Sentinel SSm, Gotham SSm, and Premium typefaces.

We’d like to thank all the designers and developers who’ve made our typefaces a part of your fantastic work. As people who are obsessed with designing fonts to solve problems, we love seeing all the ways you’ve used our fonts to improve familiar experiences, and create entirely new ones. We can’t wait to see what’s coming next. —JH

The Tablet Magazine

Typefaces: Vitesse, Forza, Tungsten, and Gotham Rounded

Wired gets it. Today they’re going public with the prototype they shared with us a few weeks ago, and if you’re like me, your reaction will be an instantaneous “neat!” followed immediately by “well, isn’t it obvious it was supposed to work this way?” When something creates and fulfills expectations at the same time, you know you’ve got it right. —JH

Uptown App, for iPhones

Typefaces: Gotham, Mercury Text, Giant

Manhattan’s urban grid is a vaunted model of simplicity, a rectilinear plan of numbered streets intersecting numbered avenues. Never mind that West 4th Street crosses West 10th, that those walking from Fifth Avenue to Third Avenue will seldom encounter Fourth Avenue, and that “North” in the New York sense differs from conventional “North” to the tune of 29°. It’s this kind of accuracy, transparency and accountability that makes New York the perfect home for Wall Street.

A fixture of the corner of Broadway and Houston, where H&Co makes its home, is a tourist population forever asking that question of the ages, “which way is uptown?” I can’t entirely blame them: in the math of the NYC grid, Houston is 0th Street, and local signs wickedly conceal the real names of avenues below fake labels that are designed specifically to ensnare tourists. (Watch the meter when you ask a taxi driver to take you anywhere on “Avenue of the Americas.”)

To the rescue comes our own Andy Clymer, whose joint interests in typography, programming, and human decency are combined in Uptown App, his new utility for the iPhone 3GS. Andy’s thoughtfully used some of our fonts on what’s actually a pretty handy app: because it uses the iPhone’s built-in magnetometer, it can give you a quick read on “uptown” in places where GPS signals and cellular networks are unavailable or slow to come online, like when stepping out of freezing cold subway stations. Compared to the inconvenience of frostbite, 99¢ is a genuine bargain. —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.