Typography x dataviz 01
Data visualization practitioners need to think more deeply about typefaces and fonts
When my ADHD meets up with Adobe Fonts, hours often pass as I seek font-pairing perfection and dive deeply into the stories of fascinating foundries. This isn’t “wasted” time — it’s fun!— but I do have deadlines to meet.
Recently, I tried to define a more systematic process for choosing fonts for my data visualization projects. (The ones that don’t come with brand guidelines or a style guide from a client, anyway.) My “process” heretofore has been to emulate other designers’ effective use of type in dataviz and in general, informed by my skills and expertise in other areas. (For example, I have a solid understanding of visual hierarchy and layout from having learned HTML and CSS.) Throw in some raw intuiton — et voilà, a process!
Before I did any additional learning or research, I listed what I thought I knew, like when I mapped out everything I considered to be “good” UX for dataviz almost exactly a year ago.
My baseline understanding of UX was better than my baseline understanding of typography. I basically regurgitated advice I’ve heard from a variety of sources, mostly other data visualization practitioners:
Use at least x-point typefaces, where x equals 9, 10, 12, 14, or 16.
Always use sans-serif fonts.
Use condensed fonts.
Do not use condensed fonts.
Never center blocks of text. (To be totally transparent, I learned this one from a UX designer I worked with at Cart.com.)
To begin to close my significant knowledge gaps, I’ve been reading. And reading. And read some more. I've found a number of fantastic typography reference materials and articles online, which I’ll link to throughout this post and the next. The best thing I read, however, was the book Clothes for Language, an utterly hilarious and informative introduction to typography from the Graphic Design for Beginners series by Antonis Tsagaris. It’s short enough that I read it in one sitting. (It’s also free to read if you’re a Kindle Unlimited member.)
I love Creative Mornings Virtual FieldTrips, so I attended a recent one with Oliver Schöndorfer of Pimp My Type, which was so fun and informative. (To get a sense of his style, check out this short, amusing video about how WCAG guidelines really are the barest of minimums for accessibility.)
Ultimately, I concluded that most of the items on my list above are either wrong or much more flexible guidelines than I thought.
What is typography?
Typography encompasses more than just typefaces and fonts (there is a difference, which we’ll get to shortly). The data analyst in me requires clear definitions, so I perused the interwebs in search of a comprehensive and concise one. I like this one from CareerFoundry:
Typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader.
It involves font style, appearance, and structure, which aims to elicit certain emotions and convey specific messages. In short, typography is what brings the text to life.
This one from Vectornator is good, too:
Typography is the art of putting language into visual form. It is the craft of arranging, spacing, choosing, and manipulating type.
Terminology: a typeface vs. a font
Most of us use the terms typeface and font interchangeably. Practically speaking, that’s probably fine. But they are subtly different and it’s worthwhile to understand that.
A typeface is the set of aesthetic qualities that make up a particular visual design in typography. A font is an implementation of the typeface along with its weight, style, and size. (I adapted these definitions from Google Fonts.) Arial is a typeface. Arial Bold Italic is a font.
Why learn about typography?
➡️ Nothing — NOTHING! — is more distracting than a terrible font.
Comic Sans basically built its entire career on this fact. (Domestika’s Curious Minds podcast did a fascinating deep dive on why we all hate Comic Sans so much.)
➡️ Knowing some typography basics aids in communication with UX, UI, and graphic designers (in business speak, “working in cross-functional teams”).
It gives us a language for discussing type. “The tail on the lowercase q is too long,” is far more precise and informed feedback than, “I don’t like the squiggly thingy on the little q.”
There’s no need to memorize anything. Just have a good resource like Type Deconstructed’s Type Glossary on hand for moments when you might need to communicate to your team about the obnoxious swash on that capital “B” that’s drawing attention away from your utterly riveting histogram.
➡️ Understanding typography improves the accessibility, readability, and usability of your visualization design.
In other words, you’re more likely to create a good user experience for everyone. By now, we all know that the text in our vizzes should be large enough, legible enough, and have sufficient contrast to be read by our entire audience. But there’s so much more that even a little knowledge of typography can do to help you communicate data as clearly and beautifully as possible.
Where do I start?
Fortunately, there are objective indicators of the appropriateness of a typeface for a specific role in a data visualization. I say a “specific role” because while a font may be excellent for display text (e.g., a title), it may be terrible for axis labels or other functional text.
The three types of text
Display text catches the attention of the reader, drawing them in to your work. So, in dataviz, this is the title of the whole piece (dashboard or graph) and maybe the titles of graphs within a dashboard, depending on size. Display text should be 20 pixels (1.25 rem) or larger.
Functional text does what it sounds like it does — it serves a function. Think axes labels, annotations, and navigation elements. Sorry, y’all, but Oliver “Pimp My Type” Schöndorfer says this should be 11 pixels or larger. (I am guilty of using a super light grey, 9-pixel axis label, too. When we know better, we do better, right?)
You’re reading body text right now. Body text is longer than display or functional text, intended to deliver the main content in a document. In data visualization, the amount of body text varies greatly. Dashboards and graphs embedded in academic publications tend to have less; scrollytelling and longform vizzes tend to have more. Body text should be optimized for readability and legibility and sized no smaller than 16 pixels (1 rem).
Anatomy of a typeface, part 1: the bare minimum
In this post, I’ll briefly describe the most impactful characteristics of a typeface for data visualization —or, the bare minimum number of factors I urge you to consider when selecting fonts. (Please keep in mind the type of text you’re setting.)
Apertures
The aperture is the partially enclosed negative space in a somewhat rounded area of a character. Open apertures are a key feature of readable text. The smaller the text will be, the more important open apertures are.
X-height
The x-height is the distance between the baseline and the midline (or mean line). In the image below, the baseline is the red line underneath the word “boxes” and the midline is the line above the lower case letters without ascenders (so, all except for “b”).
Typefaces with taller x-heights tend to be more legible at smaller sizes because, to our eyes, they appear larger. Elliot Jay Stocks explains the origin of the term in this fantastic article written for Google Fonts.
The term [x-height] itself was established because while the height of each lowercase letter varies slightly, the flat edges at the top and bottom of the x character make it a good representative for the typical height of all lowercase letters.
Weight
Weight refers to relative thickness of the stroke of a font. When you see variations of a typeface such as Medium, Bold, or Extra Bold those refer to increasingly “heavier” weights. Tableau users can relate to just how light Tableau Light really is relative to Tableau Regular. Weight — and other styling — impacts readability.
Alignment
Dataviz people, if you must keep centering text, please only do it with short snippets of text. A centered paragraph is very challenging to read because both the right and left ends of the line are uneven. Practical Typography’s “An Ode to Centered Text” shows and tells this guideline very nicely.
I hope this was a helpful primer. I’d love to hear your thoughts regarding the role of typography in data visualization and what you think works, and what doesn’t.
Additional resources:
How to use fonts in Tableau, Judit Bekker
Fonts for complex data, Jonathan Hoefler
Understanding typography, Google Material Design
Placing text on arcs with d3.js, Nadieh Bremer
This was very informative and well done!! Also thank you for linking all of your resources! I am new to datavis and this was really helpful!