Which fonts to use for your charts and tables

…and how to customize them.

decorative header image showing different kinds of font styles

How should the text appear in your data visualizations? The possibilities are endless: There are millions of typefaces out there (Arial, Times New Roman, Lato, …) belonging to different categories (serif, sans-serif, condensed, wide, …). Many of these typefaces come in different fonts (thin, bold, …). And then they are so many extra ways of adjusting them (uppercase, size, color, …).

The short answer: When in doubt, set your text in a font that’s easy to read. Easy to read is everything that readers are used to. On the web, that means sans-serif, neither overly narrow nor wide, regular (instead of bold or thin) text set in sentence case, in a size that’s big enough to read, and in black or almost black. This article explains all these options — and shows how ignoring this advice can set your visualization apart from others.

Choosing a font
01 Use sans-serif typefaces.
02 Use a font with lining and tabular numbers.
03 Use a font with all the symbols you need.
04 Use bold fonts only for emphasis.
05 Avoid very thin fonts.
06 Use neither overly narrow nor overly wide fonts.

Adjusting the font
07 Use text that’s big enough.
08 Use a high-contrast color for most text.
09 Use uppercase text sparingly.

Let’s start:

Choosing a font

Use sans-serif typefaces.

left side: serif fonts, right side: sans-serif fonts

Serif typefaces (like Times New Roman or Georgia) bring you into a reading flow — that’s why they’re great for setting long texts like novels or newspaper articles. For data visualizations, sans-serif (”without serifs”) typefaces are most often the better choice. They look cleaner and are often easier to skim than serif fonts, especially when it comes to numbers. Our free Datawrapper visualizations, for example, use the sans-serif typeface Roboto. Changing the fonts – including size, placement, color, etc. – in Datawrapper is possible with a custom theme.

left side: chart with Roboto serif text; right side: chart with Roboto (sans-serif) text

Most data visualizations use sans-serif typefaces — like all charts from The Economist and Bloomberg:

Chart by the Economist
The Economist, 2022. Fonts: Econ Sans and Econ Sans Condensed. The Economist uses different styles from the same commissioned typeface for all text in their visualizations.
Chart by Bloomberg
Bloomberg, 2022. Font: Neue Haas Grotesk. Bloomberg’s typeface is based on Helvetica but has a slightly straighter appearance, e.g. in its R and a.

While serif typefaces are rare in data vis, they do exist. Serifs look a bit more classy, traditional, and serious/professional than sans-serifs and can set a visualization apart from others out there. Most often, serifs are only used for visualization headlines:

Chart by the Guardian
The Guardian, 2022. Fonts: Guardian Headline and Guardian Text Sans. The Guardian uses the same commissioned serif font for chart titles as they use for article titles.
Chart by Our World in Data
Our World in Data, 2019. Fonts: Playfair Display and Lato. “Display” means the font is only suitable at large sizes, like in titles. (The font name doesn’t seem to be an homage to data vis pioneer William Playfair.)
Chart by The Washington Post
The Washington Post, 2022. Fonts: Postoni and Franklin. Like Playfair, Postoni is a Display font: It has a high contrast of thick and thin strokes (just look at that “U” in “Ukraine”) and should therefore only be used at large sizes, like here.
Chart by Pew Research
Pew Research, 2022. Fonts: Georgia Italic and Franklin Gothic. Unusual: Pew Research uses sans-serifs everywhere except in the description.

But some data vis designers use serifs for labels and numbers, too:

Chart by Federica Fragapane
Federica Fragapane, 2022. Most of Federica’s data visualizations use serif fonts. They help set an almost “map-explorative” and literary vibe.
Chart by the Guardian
The Guardian, 2018. Fonts: Guardian Text Egyptian and Guardian Figures. One of the rare news projects that uses a serif typeface for all labels and numbers.

If you browse a font catalog like MyFonts, Adobe Fonts, or Google Fonts, you’ll notice more categories than just serif and sans-serif: They also let you choose slab serifs, script fonts, handwritten-looking fonts, and monospace fonts. They’re all rarely used in data visualization — but here are a few examples:

Chart by SPIEGEL
SPIEGEL, 2022. Fonts: SPIEGEL Slab and SPIEGEL Sans. Slab serifs have serifs that are thicker and more emphasized than those of normal serif typefaces.
Chart by the Pudding
The Pudding, 2020. Font: Walter Turncoat. Handwritten fonts are most often encountered in comics. They give a playful, fictional vibe.
Chart by NBC News
NBC News, 2022. Font: Founders Grotesk Mono. Monospace fonts give each letter the same width, and hence have a typewriter look and feel.
Chart by Density Design
Density Design, 2019. Font: Roboto Mono. Another data vis project that uses a monospace.

When in doubt, use a sans-serif typeface for the text in your visualization. Roboto, Lato, Open Sans, Source Sans Pro, and Noto Sans are all good options and free to use. None of them will make your visualization stand out, but all of them will be readable and pleasant to look at.

If your organization uses a lot of serif text, consider using that same serif typeface for the title of your visualizations to make them more recognizable.

👉 Read more: Choosing Fonts for Your Data Visualization by Tiffany France

Use a font with lining and tabular numbers.

Left side: Oldstyle figures; right side: lining figures

Different fonts have different ways to display numbers. There are two distinctions: First, between so-called oldstyle figures and lining figures. Lining numbers “line up”: They’re all the same height. Oldstyle numbers go below and above the “line.” They’re common in serif typefaces like Georgia and beautiful to look at in a paragraph, but hard to read in a table, tooltip, or as an axis tick. For your data visualizations, use fonts with lining figures.

The second distinction is between proportional and tabular figures:

Left side: proportional figures; right side: tabular figures

Tabular figures are, as the name implies, great for tables. That’s because every number is the same width. It’s easy to see instantly how many figures a number has, because a 124.17 will be the same length as a 680.90, but shorter than a 1,111.17.

So why do proportional figures exist at all, you ask? It’s because they’re nicer to look at in a paragraph than tabular figures. An 8 deserves more width in text than a 1, just like a W deserves more space than a J. But for most of your data visualizations, use tabular figures.

As in the examples above, oldstyle figures are almost always proportional and tabular figures are always lining figures. All the sans-serif typefaces I mentioned (Roboto, Lato, Open Sans, Source Sans Pro, and Noto Sans) come with tabular, lining figures. You can also use font catalogs like Adobe Fonts to filter by “default figure style.”

👉 Read more: Finding the best free fonts for numbers by Samantha Zhang
👉 Read more: Fonts for Complex Data by Jonathan Hoefler

Do you create a lot of tables and want to go one step further? Then consider fonts with tabular, lining figures that are multiplexed (also called duplexed or uni-width). Multiplexed means that each character and figure uses the same width in each font weight. Bold text set in most fonts is wider than the same text in a regular font style. Multiplexed fonts don’t have that quirk, which makes them great to highlight numbers in tables:

Left side: not multiplexed figures; right side: multiplexed figures

To play around with a multiplexed font, you can download and try out Recursive from Google Fonts. For more multiplexed fonts, visit the article Uniwidth typefaces for interface design by Lisa Staudinger.

Use a font with all the symbols you need.

Left side: special glyphs of Roboto; right side: special glyphs of the font called Source Code

Besides the figure style, the font you choose should also have all the characters (typographers call them glyphs) you need. Do you need special characters for specific languages (ü ß é)? Are you using lots of currency symbols ($ € £ ¥)? How about math symbols (+ ÷ × = %)? ® and ©? Reference marks (* † ‡) or superscripts for footnotes (¹ ² ³)? Confirm they all exist before you adjust your whole visualization to a font.

All these glyphs need to be drawn by a type designer — often by hand — so don’t take for granted that they come with every cheap font. For example, superscript numbers (¹ ² ³) are not simply smaller numbers. Good type designers draw a ² so that it’s more legible than a simply size-reduced 2.

Don’t just check that all needed glyphs exist, but also that you like how they look. Do the % signs in the Source Code and Recursive fonts make you happy, or are they too experimental for your needs?

👉 Read more: Checklist for choosing data viz typefaces by Diana MacDonald

Use bold fonts only for emphasis.

The six font weights of Roboto

Most typefaces come with fonts for different weights, like thin, light, regular (= the default, also called normal), medium (= a slightly bolder regular), bold, and black (= extra bold). Webfonts often use numbers for these weights, where 400 is regular and 700 is bold.

Bold or even “black” text feels more self-confident and attention-grabbing than regular font weights. But for the slightly longer text in your visualizations (like descriptions, notes, or annotations) the regular or medium font weights are often the easiest to read. Use bold text only for titles or to emphasize a few words in annotations.

Left side: Chart in which all text is bold; right side: Chart in which only selected text is set in bold

Here are two examples, both by The Washington Post:

Chart by the Washington Post
The Washington Post, 2022. Font: ITC Franklin Pro in regular (400) and bold (700). Note that the most important numbers are set in bold and black, while less important values are in regular and gray.
Chart by the Washington Post
The Washington Post, 2022. Fonts: Franklin (as above) and Georgia (“Gulf of Mexico”). The longer text to the left is set in a bigger size, but “Port Arthur, Texas” is what readers will notice first, thanks to its boldness.

Don’t use very thin fonts.

Left side: Chart where all text is set in thin and light text; right side: Chart where all text is set in regular and bold text

Text set in a thin or light font weight has such delicate strokes that it looks as if it’s set in a brighter color (e.g. gray instead of black). If you’re trying to make text look less important while getting around a restrictive color contrast ratio, thinner weights might sound like a great solution.

But as you can see in the example above, thin font weights are also really, really hard to read. Only use them in a high-contrast color and in big sizes (often, that means for titles only).

👉 Read more: Do’s and Don’ts of Using Light Typefaces by Anthony Tseng

Use neither overly narrow nor overly wide fonts.

Left side: narrow & condensed fonts (Futura Condensed and Avenir Next Condensed); right side: wide fonts (Montserrat, Avenir next)

Narrow (also called condensed) fonts need less space, so it’s tempting to use them in a data visualization. The problem: The less space a character gets, the harder it is to read. Narrow fonts are more difficult to decipher than normal-width fonts. Very wide fonts like Montserrat have the opposite problem: They’re easy to read but use too much space.

Left side: Chart in which all text is set in narrow fonts; right side: Chart in which all text is set in overly wide fonts

Most newsrooms use normal-width fonts. I can only think of two that diverge from that norm, NPR and The Wall Street Journal:

Chart by NPR
NPR, 2022. Fonts: Gotham, Knockout, and Helvetica. The wide Gotham is only used for the title of this visualization.
Chart by Wall Street Journal
Wall Street Journal, 2022. Fonts: Retina and Retina Narrow. The Journal uses the normal-width Retina in most charts but falls back to the narrow version when they feel it’s needed.

It’s hard to use narrow typefaces elegantly. They quickly look like a slightly retro, cramped compromise that communicates, “We wanted to remain a certain font size but couldn’t make the design work for a normal-width font.” But often, normal-width text in a smaller size is as or even more readable than bigger text in a narrow typeface:

Left side: Chart in which a big font size is used for narrow text; right side: Chart in which a normal-width font is used in a smaller font size

But there are beautiful examples too. The 2007 Feltron report uses an extremely narrow typeface and makes it work by setting only really big text:

Chart by Nicholas Felton with very condensed text
Nicholas Felton, 2007. Font: Univers 49 Light Ultra Condensed.

👉 Read more: Condensed fonts: The good, the bad, the ugly by Carrie Cousins

Adjusting the font

Use a font size that’s big enough.

Left side: Chart in which text is set too small and is almost not readable. Right side: Chart in which text is set big enough to be readable.

So far, we covered which typefaces and fonts we should choose for our data visualizations. Let’s now talk about how and when we can customize them by making them bigger or smaller, giving them a higher- or lower-contrast color, and making them uppercase. First, the font size:

The Web Content Accessibility Guidelines (WCAG) have a lot of opinions on how to make the web more accessible and readable. It’s likely that your organization tries to comply with these guidelines. So what do they advise your minimum font size to be? Turns out, they don’t give a clear answer. That’s because the readability of a typeface depends not just on font size, but also on font family, capitalization, letter spacing, and text color:

Four different fonts (Roboto, Roboto Condensed, IBM Plex Mono and Garamond) all in the same font-size. They all look differently sized.

Text annotations in Datawrapper use a default 14px for Roboto. Depending on the font family, everything below 12px will likely be too small. If you’re not sure, ask a friend or coworker to help you make the decision.

👉 Read more: Accessible Font Sizing, Explained by Andrés Galante

Use a high-contrast color for most text.

Left side: Chart in which some text is set in a gray that's too light against the bright background to be readable. Right side: Chart in which the color has a contrast that's high enough to be readable.

While the WCAG can’t give us a minimum font size, they do mention a minimum contrast ratio. Use a contrast checker to make sure your colors comply. For more explanations and a more critical view on the topic, read our article It’s time for a more sophisticated color contrast check for data visualizations.

Use uppercase text sparingly.

Left side: Uppercase text. Right side: Sentence case text.

Uppercase (“all caps”) text is harder to read than “sentence case” text that has both uppercase and lowercase letters. That’s because the shapes of letters help people to recognize words – and in uppercase, the whole text looks like a rectangle. That said, uppercase text can look tidier precisely because of the missing up and downs.

Left side: Chart in which all text is set in uppercase. Right side: Chart in which only a few words are set in uppercase.

As soon as you transform your text to uppercase, you’ll find that the text becomes wider than it was in normal sentence case — while also looking a bit dense:

Two sentences, one sentence case and one uppercase, in the same font. The uppercase text is wider than the sentence case text.

But there are a few tricks to adjust that:

  • Space out the letters a bit more. Typographers often call that “tracking”, while web designers call it letter-spacing.
  • Decrease the font size to make it shorter.
  • Now make the text bolder to give it the same letter stroke width as your original text.

Here’s the full process:

The process of adjusting an uppercase text. The original text is set in Roboto Medium, 10pt, 0pt tracked. The adjusted text is set in Roboto Bold, 8pt, 50pt tracked.

The result is an uppercase text that’s similar in length and letter stroke width to the lowercase version:

Direct comparison between the original text and the adjusted uppercase text.

If you want to use uppercase text in your data visualization, limit it to just a few words. Because uppercase words look so important and neat, they communicate: “I’m not like the other elements here.” Often they’re used for labels or headlines, e.g. filter elements, (a few) category labels in tooltips, group labels, axis labels, or header text in tables:

Chart by Le Figaro
Le Figaro, 2022. Font: Source Sans Pro. Uppercase is often used for filter elements in data visualizations, like these buttons.
Chart by Reuters
Reuters, 2021. Font: Source Sans Pro. The uppercase category labels “Votes” and “Pct.” look tidy and lose importance by being smaller and grayer than the other text in the tooltip.
Chart by The New York Times
The New York Times, 2021. Font: NYT Franklin (an adjusted Franklin). These uppercase category labels are set in the same color but way smaller than the other text elements.
Chart by The New York Times
The New York Times, 2022. Font: NYT Franklin. Because uppercase text looks so different from other kinds of text, it’s easy to find — and hence ideal for group labels.
Chart by The Washington Post
The Washington Post, 2022. Font: Franklin. Similar to group labels, header tables can work well in uppercase (if the text is not too long).
Chart by Politico
Politico, 2021. Font: DIN 2014. The axis labels are set in uppercase to set them apart from annotations.
Chart by FiveThirtyEight
FiveThirtyEight, 2022. Fonts: Atlas Grotesk and Decima Mono Pro. Uppercase can even be considered for short color key items. (FiveThirtyEight uses lowercase text for longer color keys, like here.)

The most common place you’ll find uppercase text in data visualizations is region labels (e.g. for countries or states) in maps. Here, uppercase text is often more letter-spaced than when used in charts:

Map by The Wall Street Journal
Wall Street Journal, 2022. Font: Retina Narrow, letter-spacing: 0.08em.
Map by Reuters
Reuters, 2022. Font: Source Sans Pro, letter-spacing: 0.1em.
Map by Reuters
Reuters, 2022. Font: Source Sans Pro, letter-spacing: 0.3em.
Map by Reuters
Reuters, 2022. Font: Source Sans Pro, letter-spacing: 0.2em (“Moldova”) and 0.75 (“Ukraine”)
Map by Bloomberg
Bloomberg, 2022. Font: Haas Grotesk, letter-spacing: 0.2em.

There’s no need to retype with capslock on to create uppercase text — most graphics software has a button for that. In Datawrapper locator maps, too, you can make text uppercase and letter-space your markers with the click of a button.

👉 Read more: UPPERCASE in UI Design by Bradley Nice


I hope this article was helpful! If there’s any essential advice I missed, leave it in the comments or write to me at lisa@datawrapper.de. I’m looking forward to hearing from you.

Comments