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

Meet Isotope

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

Introducing Peristyle

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

The Loveliest Living Fossil

The ocean of ideas, teeming with words and numbers, is underpinned by a vast tectonic plate that’s powerfully transforming the language. It’s the force that gives rise to new continents of meaning, while it inters the remains of countless extinct species. We know its name, but we rarely think about it, and we certainly never visit. It’s just there, helping to clarify our words and numbers in an invisibly supportive way. But it’s one of the culture’s most unstoppable forces. It’s called Punctuation.

At its leading edge, punctuation is volcanically active, giving shape to concepts that move far faster than words. Anyone communicating today has seen #topics and #themes and #categories identified this way, using a symbol that was intuitively understood and replicated even before it was first called a hashtag in 2007. The symbol and its meaning are now universally recognized, transcending even the locality of language, but their use is scarcely a decade old — an astounding accomplishment for a bit of lexical fluff, when you consider that the newfangled OMG was first recorded in 1917 (and in a letter to Winston Churchill, no less.) Similarly meteoric is the rise of @, not only in its initial evolution from grubby commercial symbol to digital thingum, but in its latest metamorphosis, which has left it poised to become a bonafide verb. Formulations like “write in or @ us on Twitter”¹¹ I owe this cheeky example to Kory Stamper, a lexicographer at Merriam-Webster. You should read her blog. may seem casual, or may be arch, but since they’re easily understood by the initiated, they’re grammatical fair game. Punctuation FTW!

As it advances, punctuation leaves behind a sepulchral physical record, an ocean floor littered with the remains of creatures that didn’t make it. English-speakers who live with Imperial measurements can probably guess the meaning of ℔ from lb., but most have never encountered that symbol, and fewer still have run into a wild ℥, long since replaced by oz. (There may be pharmacists among us who know this one, but they are the same mysterous guild that traffics in ℞s and c̄s and other things that aren’t on the keyboard.) The ellipsis (…) drove out the asterism (⁂) to signal breaks in text, and the decimalized percent (%) eliminated the need for a permille (‰) — not to mention something called the “basis point,” also known as the per-ten-thousand, which naturally, and horribly, looks like this: ‱. As a typeface designer, I am not sorry to see these go. Drawing a character is one thing, but adding a character to a family that requires twenty-four variations, including an Extra Bold Compressed Italic, is another story. Especially if there are nearby lining figures and old-style figures and tabular figures to consider. So R.I.P., basis point. Or as a typographer would say, “.”

Between the symbols we live with and the symbols of yore is a third category, characters that are no longer considered ‘standard’ (by someone’s arbitrary standard), but are nonetheless still meaningful, and immediately understood. If you’ve ever addressed correspondence to someone in the care of someone else, you might have used ℅, a pretty hanger-on that I think has a place in the right kinds of typefaces, but one that should by no means be considered a typographic requirement. But the best and most active of these living fossils is a personal favorite: it’s the Numero, known to us by the monogram Nº.

Nº was the number sign before # became a number sign, and it refreshingly serves this one and only purpose. Compare the #, which when preceding a number is read as “number” (“#1 in my class”), but when following a number means “pound” or “pounds”²² If you’re curious what the # symbol has to do with the abbreviation lbs., here’s one possible missing link. (“70# uncoated paper”), leading to printshop pile-ups like “#10 envelope, 24# bond.” To programmers, a # can mean either “ignore what follows” (as in a Python comment) or “use what follows” (when referencing a page fragment, or a Unicode value in html.) To a proofreader, a # means “insert space,” so in the middle of a numbered list, the notation “line #” does not mean “line number,” but rather “add a line space.” Because of #’s resemblance to the musical symbol for “sharp” (♯), it’s a frequent stand-in for the word “sharp,” and often the correct way of rendering a trademarked term such as The C# Programming Language. The # is rapidly assuming musical duties as well, especially in online databases, leading to catalog collisions like “Prelude & Fugue #13 in F#.” How fortunate a designer would be to have a numero symbol, with which to write “Prelude & Fugue Nº 13 in F#,” or “Nº 10 Envelope, 24# bond.”

The Chicago Manual of Style unequivocally favors ‘no’ over ‘#’ when listing the issue number of a periodical: “When the issue number is given, it follows the volume number, separated by a comma and preceded by no.”³³ The Chicago Manual of Style, 15th Edition, §17.163. And this introduces an interesting complication for Russian language periodicals, or those published in any language that uses the Cyrillic alphabet, because Cyrillic does not contain the letter N. It’s for this reason that typefaces that include Cyrillic alphabets always include the numero symbol, which is why you’ll find them in both Whitney and Gotham.

But the place you’ll find the greatest concentration of numero symbols in our library is in the Numbers collection, where I insisted upon them simply because they’re delightful. The typefaces in this collection interpret many different traditions in lettermaking, including rubber stamps, cash register receipts, railway car numbering and street signs, and in each of these environments you’ll find the numero. Many of these styles trace their origins to the nineteenth century, when numbers were more commonly introduced by Nº than #; others in the collection never used this symbol, but their styles seemed ripe for decoration. We recently had this same impluse with the Inkwell collection, which includes pen-drawn numeros in all forty-eight of its styles.

It’s this desire to decorate that shapes expectations about what should be in a typeface. On your keyboard next to the return key are the brackets [ ], and atop these are the braces { } that are sometimes — tellingly — called curly brackets. In theory, braces exist to present things on an equal footing: in music they connect staves that are played simultaneously, in genealogy they relate siblings, and in drama they group characters that move or speak as a unit (such as a nobleman’s Attendants in Shakespeare.) But braces are graphic rather than typographic forms, seldom meant to be used at the same size as the type they enclose, making them a questionable member of the character set. Frankly, they endure because they’re fetching, a spicy alternative to the humdrum geometry of square brackets, and these days they’re almost always used decoratively. Designers love to use braces, and type designers love to draw them, and it’s this unspoken bond that keeps them in the character set. Like the braces, the Nº is a reminder that typography exists to serve readers, and that readers do not live by semantic punctuation alone. There’s a place for variety and richness in typography, for colorful and engaging creatures that live at abyssal depths. Bring them up for a closer look: they’re splendid to behold. —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.