In collaboration with the second #GamesNightViz challenge, I will dive into the world of fonts and how to use them to improve your visualizations and narrative.

Font is extremely important to developing a successful visualization.

It may not be the star of the show, but if you have a beautiful visualization that relies on narration through text and your font selections are misaligned, it may turn your masterpiece into a missed opportunity that loses the engagement of your audience.

For the second #GamesNightViz challenge one of the areas of focus will be on font selection. As you create your visualizations, what can you do intentionally to enhance the visualization with font? I will start by outlining my process for font selection in visualizations.

How i select fonts.

I’ve been asked many times how I select my fonts and what I can say with certainty after writing this piece is that it is incredibly subjective.

There are standards, practices, and principles available to follow and employ for a successful font-visual experience, but how you interpret those things is entirely up to you. The best way to test your preferences is to ask your audience for feedback. Ask them how the font resonates, or how it makes them feel. I follow a few key steps when selecting my fonts:

Identify your audience and what you want them to feel when looking at your visualization.

A large piece of selecting font for me is the subject matter and the emotion I want the audience to feel when reading. For me, font is as important of a choice as the narrative is written in retaining a reader’s engagement. If I’m building a viz on zombies, I may want my headers to look creepy and “bloody.” If I’m developing a piece for Pitcher List, I want it to look modern and clean because the content is statistically heavy, so I want the font to create the mental break the stats may not. There is a name for this style of font selection based on emotion called “font psychology”. Below are some of my go-to fonts and the emotions I associate with them. Take a look at these, do the emotions that they make me feel resonate with how they make you feel? Do you find the fonts you use evoke emotions? Maybe you’ve never thought of it that way before, but I bet you will now!

Keep it simple, using 1-2 fonts per visualization until you feel comfortable with more.

It can be easy to introduce several fonts into a visualization without realizing it. Think about a typical visualization, excluding the font choices for a moment. How many different things do the audience already have to interpret?

• narrative flow
• visualizations
• color
• size
• education of visualizations, etc.

Now let’s say your visualization has two charts in it. The above five items become ten or more very quickly. If you add multiple fonts to the equation, the audience has to additionally interpret your font choices and what they mean to all of the other variables. Take the example below (which is also indirectly two film reviews…):

The emphasis I placed on certain words is overly done for dramatic effect but look at the difference between one and two fonts. Interjecting a second font into the paragraph drowns out the deemphasized words. Your eyes have to adjust to the varied letter spacing as you switch between words creating a heavier cognitive load. Separate multiple fonts in one visualization by role (i.e., header, paragraph, callout) and carry these roles throughout the visualization to reduce cognitive load and increase consistency for your audience.

Test different sizes, styles, and proximity for emphasis.

If you are working on font skills, play with the style of one font to create emphasis without the introduction of a new font. The example below shows how the adjustment of style can change the emphasis of a narrative.

Looking at the subtle changes sequentially may not seem materially different, but when you view the first and last results it is noticeably better. Which tells a more compelling story?

Add color to further emphasis.

Let’s consider the two film reviews from earlier. The Shang-Chi review was easier to read than the No Time to Die review because of the use of one font and layers of emphasis, but what could make it even easier to read? Color. Let’s look at both examples again, but with the inclusion of color.

This color emphasizes key phrases for ease of reading, creating “color sentences” layered within the full sentence. Use color to your advantage. It doesn’t have to be only for emphasis; you can use color to call out color legends within narratives, instead of having an actual legend box. Get creative with color combined with words to create powerful narratives. There is a lot more to say on color alone, but I may save that for a future blog. The one pro-tip I will leave you with:

Limit your color per viz to 7-8 colors tops.

There are only so many colors the mind can process at one time and remember, so try to keep it simple (this goes for gradients too!)

Save font combinations you like for future use.

As you begin to create different visualizations thinking intentionally about the font, you will want to reuse them for similar visualization types. For example, when I develop something for Pitcher List I use specific fonts compared to the fonts I’d use for a video game dashboard. Start to take stock of your combinations as you continue to progress. You will thank yourself for it later!

In addition to your combinations, it can sometimes be challenging to know what looks good together. Font psychology that I mentioned earlier can play a role here, but some tools can also assist. A personal favorite of mine is Adobe Fonts. Adobe Fonts allows you to search for any font style and learn more about the particular font and suggested pairings. Not every font has the combination suggestions, but it is helpful when it does (and you don’t even need to have an account to use the resource, but you will to download the fonts!).

To summarize.

Fonts in Tableau.

Applying the above in Tableau for your #GamesNightViz can be tricky, so I will cover key considerations, tips, and tricks to help. There have been so many before me that have posted about this so, I will reference them accordingly.

Tableau does not support custom fonts, but there are ways to use them.

You may wonder why your new favorite font isn’t showing up when you publish your dashboard to Tableau Public. Unfortunately, there are only a few supported non-Tableau fonts (the list can be found in this detailed post by Ken Flerlage).

By using a third-party tool to create images, you can keep custom fonts functional on Tableau Public.

The big three available for this are PowerPoint, Figma, and Adobe products like Illustrator and Photoshop. I will provide a brief tutorial on Figma below. My preference is to create as much as possible in Figma/Adobe and import it as a background with the Tableau visuals overlayed, but you can also import individual images for each piece of font. I will show you both ways.

Step 1: Create your font & background in Figma

Step 2: export the items as .png and import them to Tableau.

My preference is to remove the padding from the background image after importing because I work in exact pixels. Additionally, I find using any “center image” or “fit image” features on the .png images create blurriness, so this is another area where I stick to exact pixels for sizing.

While you are getting acclimated to using tools like these, single-use font imports may be easier to get used to at first. The more comfortable you become with your layouts and developing everything as a background, the less you will find any additional imports needed and will likely have everything in one background image.

Autumn Battani put together a really helpful piece on designing dashboards, as well as linked three YouTube tutorials in each tool (Figma, PowerPoint, Illustrator) at the bottom of the post. The tutorials were created with Autumn and Lindsay Betzendahl (Figma), Kevin Flerlage (PowerPoint), and Sam Parsons (Illustrator).

Considerations & Resources.

This post covers a lot of content specifically about how best to pick fonts, but the conversation is so much larger than just picking the right font. Below are some important considerations that I may have mentioned lightly above, or I will plan to cover in more detail in a future post, but wanted to at least share for awareness now:

Key Considerations

• Designing for Inclusion – are your fonts (and beyond) inclusive and accessible?
• Font psychology – I touched on this briefly above
• Designing for narrative flow – what is the natural path the eyes take when viewing your deso.
• The Functional Art by Alberto Cairo (for design principles & narrative flow)
• Mistmatch by Kat Holmes (for inclusive design)
• Tableau Conference 2021 – Inclusive Design: Making Dashboards Engaging, Informative, and Accessible by Emily Kund (for inclusive design)
• The definition of font psychology and how to use it by Canva (for font psychology)

Links in Post

• Demystifying Fonts in Tableau by Ken Flerlage
• Data Design – Building a Basic Background by Autumn Battani
• Building a Basic Dashboard Background in Figma by Autumn Battani & Lindsay Betzendahl
• Building a Basic Dashboard Background in PowerPoint by Autumn Battani & Kevin Flerlage
• Building a Basic Dashboard Background in Illustrator by Autumn Battani & Sam Parsons