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 ScreenSmart
Helpfully, there’s an adaptation designed for the web that proves useful in any medium: 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 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 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:
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. 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 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:
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. For these projects, we’ve created Office Fonts.
Whitney Office
Office Fonts are straightforward 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 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