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

Matchbox First!

“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

On the Death and 441-Year Life of the Pixel

The struggle to adequately render letterforms on a pixel grid is a familiar one, and an ancient one as well: this bitmap alphabet is from La Vera Perfettione del Disegno di varie sorte di ricami, an embroidery guide by Giovanni Ostaus published in 1567.

Renaissance ‘lace books’ have much to offer the modern digital designer, who also faces the challenge of portraying clear and replicable images in a constrained environment. Ostaus’s alphabet follows the cardinal rule of bitmaps, which is to always reckon the height of a capital letter on an odd number of pixels. (Try drawing a capital E on both a 5×5 grid and a 6×6, and you'll see.) Ostaus ignored the second rule, however, which is “leave space for descenders.”

I’d planned to introduce this item with a snappy headline that juxtaposed the old and the new — for your sixteenth-century Nintendo! — before reflecting on the pixel’s moribund existence. Pixels were the stuff of my first computer, which strained to show 137 of them in a square inch; my latest cellphone manages 32,562 in this same space, and has 65,000 colors to choose from, not eight. Its smooth anti-aliased type helps conceal the underlying matrix of pixels, which are nearly as invisible as the grains of silver halide on a piece of film. And its user interface reinforces this illusion using a trick borrowed from Hollywood: it keeps the type moving as much as possible.

Crisp cellphone screens aren’t the end of the story. There are already sharper displays on handheld remote controls and consumer-grade cameras, and monitors supporting the tremendous WQUXGA resolution of 3840×2400 are making their way from medical labs to living rooms. The pixel will never go away entirely, but its finite universe of digital watches and winking highway signs is contracting fast. It’s likely that the pixel’s final and most enduring role will be a shabby one, serving as an out-of-touch visual cliché to connote “the digital age.” —JH

Atoms & Aldus

Last week I mentioned the atomic pen, which scientists used to construct some awfully tiny letters one atom at a time. These are small letters indeed: measuring two nanometers in height, they’re about ¹₄₀₀₀₀ the thickness of a human hair, which surely gives their inventor sufficient authority to issue the casual throwdown that “it’s not possible to write any smaller than this.” But it is, of course, and the technique for doing so has been known to typefounders for more than five hundred years.

Continues…

A Typographic Challenge at 0.000007086614175 points

With what is delightfully being called “The Atomic Pen,” a team of researchers has created what are likely the world’s smallest letters. At left is an array of silicon atoms measuring two nanometers in height, or a little less than one hundred thousandth of a point.

Their technique, documented in today’s issue of Science magazine, makes use of an earlier discovery: that within a certain proximity, individual atoms from the silicon tip of an atomic force microscope will exchange with tin atoms on the surface of a semiconductor. “It’s not possible to write any smaller than this,” said researcher Masayuki Abe, which sounds like a challenge to me: I can already think of one way to make letters that are 8% smaller, using the team’s own technique. Can you? Answers next week. —JH

The Smallest Letter in the World

A nice surprise: inside a folder of oversize type proofs, I found a stowaway: A Specimen of Printing Types by Joseph Fry and Sons, Letter-Founders, 1785. Like many contemporary type specimens, it separates dinner from dessert: on the front are romans and italics, in sizes from Long Primer (10pt) to Four Lines Pica (48pt), and on the back are all the specialty types. The latter category includes types for Arabic, Persian, Hebrew, Greek, and Samaritan, a collection of ornaments and coats of arms, a blackletter in nine sizes, and the above, a roman cut in the Diamond size (4pt) and identified as “The Smallest Letter in the WORLD.” It looks pretty good for a 223-year-old! —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.