How to Design a Typographic Hierarchy in Tableau

Choosing a font

Knowing that Tableau has your back with its default font is great but there are times when you will want some options or need to adhere to a specific font or fonts for branding reasons.  If you have brand guidelines or a style guide to follow – that’s great; someone has spent a decent amount of time putting these guides in place and they are definitely worth following. If you do not, then the task can be somewhat overwhelming with so many choices. I find that most Tableau authors at this point just go with the defaults, which thanks to Tableau is not a bad thing. If you are interested in choosing a font family to work with, make sure you keep things simple.

Here are a few tips:

* Look for a font that is simple and not too decorative or thematic.  Dashboards tend to get visually busy; your font should help balance this fact and not add to it.

* Look for websites or other dashboards in your industry or field and study the characteristics being used.  There are several web-based tools for figuring out what fonts are being used in both digital and physical designs. Check out Search fonts | Adobe Fonts and Identify Fonts – The Font Squirrel Matcherator for more.

* Look for a typeface that has a variety of font weights and widths as they will give more options in building hierarchy in your system, i.e., thin, medium, semi-bold, bold, and heavy.

Using fonts in Tableau

Understanding how Tableau handles custom fonts within Tableau products is beyond the scope of this article.  Refer to a previous post at Playfair Data about using custom fonts in your dashboards.

Tips for Formatting Text Tables in Tableau

Typographic hierarchy

Typography has a lot in common with data visualization. Especially when we talk about preattentive attributes. In the post and video, Playfair Data Presents: Preattentive Attributes, we shared an animation that illustrates preattentive attributes.  All the preattentive attributes can also be applied to type! Designing a typographic hierarchy can help guide users through the information being displayed. Once this hierarchy is established, it is important to use it consistently within a project. If the hierarchy is from a brand guideline, then constancy should extend to all branded projects.

The example below visualizes the difference using a typographic hierarchy can make in consuming information. I have used the classic Lorem Ipsum text to demonstrate.

Both sides of this example use the same exact text, but in the right example I have applied specific sizes, weights and colors to enhance the viewers ability to visually organize the information.

Look at the same principal applied to the chart below.

In this example, I have created a bar chart using the Sample Superstore dataset.  SUM(Sales) in on the Rows shelf and Region is on the Columns shelf. On the Label property of the Marks card, I checked the “Show Labels” check box. In the example on the left, I formatted all text elements using the same size, weight, and color. Much like the first example, I feel it is difficult to know which information is more important from another.

For another example, I let Tableau use its defaults, seen below.

Not a bad start but pushing on size a bit and using color to help distinguish values in the chart really helps.  Also note that when I use the Playfair Data Red I have paired it with a “light” weight to take away some of the power that color can have.  My hope is that you see the title and subtitle first, then move to the values labeling the bars and finally land on the specific regions.  I gave the Sales axis the least emphasis because it is technically not needed due to the bars being directly labeled but have left it to keep the two views equal outside of the text.

A simple typographic hierarchy in Tableau

Typeface

I have chosen to stick with the default Tableau Font to keep things simple.

Font Size

So how should we set up our size hierarchy?  Keep it simple.  Traditional guidance suggests keeping size options to three. I like to follow this when I can but there are times when working on a large project that more sizes are needed.  Sticking to three for this post I chose 21pt, 14pt and 12pt.

Font Weight

The weight of a font describes the thickness of the stroke for each letter, digit, or symbol.  I will be using the Tableau font for this example, but it is something to think about when choosing to use other fonts.  Some font families will have many choices in weight, while some are more limited. The Tableau Font Family provides 6 weights: light, book, medium, regular, semi bold, and bold.  I am choosing 3 that give some contrast: light, regular, and bold.

Font Color

Using color in your typographic hierarchy needs to be handled with care.  Just like using color in visualizations the same causation needs to be observed with the use of color in type.  If used carefully it can help balance other aspects of our hierarchy.  Once again, I am choosing 3 colors: Playfair Data Red #FA4135, a dark gray #555555, and a medium gray #898989.

The final hierarchy

I hope this gives you confidence and inspiration to start using some more typography in your Tableau projects!

Thank You,
— Jason