Overview

When most Tableau developers start creating a dashboard, typography is not the first thing that comes to mind. Fortunately for all us analysts and ‘cool dashboard’ lovers out there, Tableau has invested significant time and effort developing its own font built exclusively for data visualization. Typography is a vast subject that contains unique words and aesthetic requirements – yet it is also important to the majority of visual analytics efforts. Typography, in its most basic form, is the arrangement of letters and numbers to achieve a design that is readable and appealing. Typographic hierarchy is a useful concept. Not many visualizations get away with not organizing letters and numbers in some way — so let’s get started!

Read more: Tableau Powerful Dashboard Tips »

In this article, we will start by unfolding the mystery about typography by learning how to utilize three simple typographic components to create a typographic hierarchy that may be used as a guide through visualization or a complicated dashboard. The emphasis will be on size, weight, and color usage. We also recommend you to get a Tableau Certification in order to highlight your skills to future employers.

Typeface vs. Font – Are those the same?

Nowadays, the terms “font” and “typeface” are used interchangeably. For the sake of simplicity, we will also use the words interchangeably here. Because type is an old trade that has seen a few revolutions, most notably the digital revolution, it is easy to become confused by the different names and classifications associated with typography.

What Type of Fonts Do We Have?

Monospace

A monospaced font, also known as a fixed-pitch, fixed-width, or non-proportional font, indicates a font where each letter and character takes up the same fixed amount of horizontal space. Monospace is in contrast to other variable-width fonts, where the widths of the letters and spacings may vary.

Popular Monospace fonts:

Courier, Courier New, Monaco, Inconsolata,  Lucida Console, Consolas

Serif

A serif in typography means that there is a little line, stroke, or a dot that is consistently connected to the end of a larger stroke of a letter or symbol within a certain font or family of fonts. The serif is what makes this font unique and different from the sans serif one since this font does not include a serif.

Popular Serif fonts:

Times New Roman, Georgia, Playfair Display, Baskerville, Garamond

Sans Serif

A sans-serif, sans serif, or simply sans letterform is a font that lacks the extending characteristics known as “serifs” at the ends of strokes in printing and lettering. Sans-serif fonts feature less variance in stroke width than serif fonts. They’re frequently employed to portray simplicity, modernism, or minimalism.

Popular Sans Serif fonts:

Helvetica, Avenir, Arial, Futura, Myriad Pro, Verdana

Script

Script fonts are inspired by the various and often flowing strokes of handwriting. They are more commonly employed for display or commerce printing than for long body text in the Latin alphabet.

Popular Script fonts:

Comic Sans, Papyrus, Brush Script, Lucida Calligraphy, Lucida Handwriting

Display 

A display font is one that is designed to be used at big sizes such as headlines rather than for long sections of body text. They may be inspired by various genres of letters, such as hand-painted signs, calligraphy, or an aesthetic relevant to their usage.

Popular Display Fonts:

Bauhaus,  Windsor, Broadway, Stencil

Bonus from Tableau: Tableau Font

The Tableau Typeface was initially published together with the introduction of Tableau 10 in 2016, and it is still the default font for Tableau today. If you want all the specifics, Tableau has an excellent post about it that you should read!

In a nutshell, the Tableau typeface was created with the ultimate objective of simplicity and readability in the visually intensive data visualization environment in mind. For questions on related topics in a Tableau Certification Exam, you can check more below.

Choose a Font

It is a lifesaver that Tableau got its great font as a default – you always have an immediate option and a good one. But there may be times when you would want to switch to another font, or you need to stick to a specific font for branding reasons. 

Keep on Reading: Tableau Data Analyst Certification Questions »

Most of the companies have an already designed guide that defines the font, color, and size that need to be used in reports or any kind of promotional material in order to maintain a pattern that will be used as a brand signature. If you are working for such a company that invested time and effort into designing such a guide, you should respect it. 

On the other hand, if your company doesn’t own such a guide, you may find yourself overwhelmed with so many font choices. And in the end, you go with the default font from Tableau, which is not a bad thing. If you are willing to choose a font family with which you will work, keep things simple and clear. 

Here are some tips that may help you out with that:

1. For business dashboards, try to use only monotype, serif, and sans serif options. Since dashboards tend to become visually busy, your font should be simple and not too decorative to balance the sheet, not add more to it.

2. If you are not sure what font to use, try analyzing your competitors. See some of their digital or physical designs and study the characteristics of the font used. You can see the font of a web page as well by right-clicking on the page and selecting Inspect. Also, there are many tools online that may help you identify the font you need for your designs or reports.

3. Try to find a font with a number of font weights and widths – such as thin, medium, semi-bold, bold, and heavy. This way, you will have more possibilities for constructing hierarchy in your system.

Pro Tip: Be Aware Of Web Safe Fonts

One thing you should bear in mind is that using fonts in Tableau maybe sometimes problematic since only Tableau web safe fonts will appear consistently for everyone. A web-safe font is one that is seen to be a “safe bet” for being installed on the vast majority of PCs. Every computer with an installed browser will have fonts that are built-in by default so they can display the text on the web.

Keep reading: Tableau Desktop Specialist Certification Questions »

Tableau Public and Tableau Online both support typefaces that have been legitimately licensed for use on their Linux servers. Other fonts cannot be guaranteed to appear correctly since font rendering in browsers is dependent on which fonts are installed on both the server and client devices.

If you choose a font that your end-user does not have installed on his computer, his view will revert to his default browser font.

The following list contains some of the supported fonts by Tableau:

• Arial 
• Calibri
• Courier New
• Georgia 
• Meiryo UI
• Noto CJK Sans
• Noto Thai Sans
• Noto Thai Serif
• Poppins
• Roboto
• Tableau 
• Times New Roman 
• Trebuchet MS 
• Verdana 

Choose a Size

When creating a dashboard, avoid using a variety of font sizes since this can have a negative effect on the overall design and consistency of your dashboard. In most cases, no more than four sizes are required. Points might vary depending on the sort of typeface you’re using, but here’s a general rule to follow:

1. Dashboard title – 22-36pt
2. Subtitles and chart titles – 16-22pt
3. Texts, labels, annotations – 10-14pt
4. Axis, notes, date / period, data source, author – 8-10pt

Be aware that Tableau uses points as a measure for font size. 

Pro Tip: How should emphasis and capitalization be used?

Regular fonts should be used 90% of the time. If you want to highlight distinct sorts of information on your dashboard, stick to italic and bold and leave everything else out. For a business dashboard, try not to use extra bold, bold italic, condensed, or condensed extra bold.

Here is a simple guide on how to use bold or italic on your dashboard:

1. Bold – Bold should be used to give extra focus to some parts of the dashboard, such as dashboard title, chart titles, or just highlighting the significance of information in a text. 

2. Italic – Try to use italic for things that you don’t want to see on your dashboard, but they’re required. They don’t provide a useful message for interpreting the data, but they must be present for credit and future references, such as notes, date, data source, or author.

Choose a Color

When choosing your color, the number one rule is to always make sure your text is readable and clear at all times. This is determined not just by the font size but also by the mix of background and font colors. Always strive for the highest contrast possible. 

My advice is to avoid using font colors other than black, gray, or white, especially on corporate dashboards. If you use something else, it may be distracting to the eye and may raise your bounce rate.

What Is a Typography Hierarchy?

Typography and data visualization share a lot in common. Especially when it comes to preattentive characteristics. A preattentive characteristic refers to the feature that guides the attention of a user in visual search. In simpler words, the user, just by visually scanning the dashboard and the typography in it, can get a picture of the simple concept of the dashboard and how the data is distributed within it. Questions on such concepts will help you in the Tableau Certification exam.

Creating a typographic hierarchy can aid in guiding people through the information provided, which has proven to improve the efficiency of a dashboard. Once this hierarchy is defined, it is critical to apply it consistently across all projects. If the hierarchy is based on a brand guideline, you should apply it consistently through all brand reports or visuals.

The following example illustrates how a typographic hierarchy might improve information consumption. In order to support the example, I will use a random text that won’t make sense that I’ve generated using a random text generator.

Yes, both sides of this example contain identical text. But looking at the below example, we can immediately get a picture that there is a title that is important, a subtitle as a piece of additional information, and a passage. The only difference between the examples is that on the below one, I have used different sizes, weights, and colors to help the reader visually arrange the information. 

Let’s examine the same principle but used on a chart. 

For the sake of this example, I’ve used the Sample Superstore dataset to build a bar chart. SUM(Profit) is located on the Rows shelf, whereas Category is located on the Columns shelf. I clicked the “Show Labels” check box on the Marks card. In the example on the left, I’ve used the same size, weight, and color for all the text. Similar to the previous case, I believe it is difficult to determine whether the information is more significant than another. 

Whereas in the example on the right, I’ve used different sizes, colors, and weights for the text to emphasize the important title (what the chart is about), to emphasize the regions since we want to spot the one with the highest profit while giving less focus to the tick marks on the left since we have the values above each chart. 

Increasing the size and applying color to aid in discerning numbers on the chart helps a lot. Also, note that when you use colors such as red, couple them with a “low” weight to reduce the influence that color may have. My objective is that you will first notice the title and subtitle, then move on to the values identifying the bars, and finally to the individual regions.

Let’s Design a Typographic Hierarchy in Tableau

Font

To keep things simple, we will use the default Tableau Font. 

Font Size 

In order to be consistent and maintain a straightforward approach, we need to design a simple pattern for our size hierarchy that we will follow. As we mentioned above, no more than four sizes on a dashboard are needed for you to obtain a hierarchy. Even though this is a rule that should be respected in most cases, in some cases, we may encounter a situation where we need more than three sizes, for example, some major project. 

For this example, I will use three font sizes – 24pt, 18pt, and 12pt. 

Font Weight

The weight of a typeface specifies the thickness of each letter, number, or symbol’s stroke. I’ll be using the Tableau font for this example, but it’s important to consider if you’re using other fonts. Some font families will offer a wide range of weight options, but others will be more limited. There are six weights in the Tableau Font Family: light, book, medium, regular, semi bold, and bold. 

I’ve chosen three that provide some contrast: light, normal, and bold.

Font Color

Be careful when you choose the color for your typographic hierarchy. The same causality must be observed with the use of color in typography as with the use of color in visuals. It can assist in balancing other components of our hierarchy if employed correctly. 

I’m going with three colors this time: light red #e15759, dark gray #555555, and medium gray #898989.

Conclusion

I hope that this article has given you a deeper understanding of the fonts and their attributes in Tableau and how to utilize each one of them to create a typographic hierarchy in Tableau. Even though typography is not the first thing that comes to your mind when developing a dashboard, it can present a great addition that will aid your end-user in navigating through the dashboard. 

---

Get our Most Popular Downloads

Download the most popular scenario-based Tableau Workbooks in .twbx format. Used by thousands of Tableau developers and job aspirants every day to improve and fine-tune their CV and Tableau Public profile. Join the largest Tableau Experts Social Group.