Last night I was scrolling on my phone when I saw this guitar image on Pinterest. I brain popped right into creativity mode at 1 AM, and I just couldn’t wait for the morning to start working on this viz. Sziget is one of the biggest music festivals in Europe, but this year they will have the lowest number of visitors: none. Due to the coronavirus, all major events have been canceled in Hungary, so no concerts in 2020. The strings of the guitar represent the number of visitors from 2015, you can have a look at the tooltip if you hover over them on the Tableau Public version. I couldn’t decide on colors, so I have a brown variant as well, check it out!
I had my hardships using fonts in Tableau and I’m far from being a typography expert, but here are some suggestions on how to use fonts to avoid the common pitfalls. I started digging deeper into this matter when I published a Superhero dashboard using Comica BD and only weeks later had it turn out, that the others are seeing it differently. I was pretty upset when this came to surface because the whole visualization was centered around that Typekit.
What types of fonts do we have?
- A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space. This contrasts with variable-width fonts, where the letters and spacings have different widths.
- Examples of popular monospace fonts: Courier, Courier New, Lucida Console, Monaco, Consolas, Inconsolata
- In typography, a serif is a small line or stroke regularly attached to the end of a larger stroke in a letter or symbol within a particular font or family of fonts. A typeface or “font family” making use of serifs is called a serif typeface (or serifed typeface), and a typeface that does not include them is a sans-serif one.
- Examples of popular serif fonts: Times New Roman, Garamond, Baskerville, Georgia, Playfair Display
- Sans serif
- In typography and lettering, a sans-serif, sans serif, gothic, or simply sans letterform is one that does not have extending features called “serifs” at the end of strokes. Sans-serif fonts tend to have less stroke width variation than serif fonts. They are often used to convey simplicity and modernity or minimalism.
- Examples of popular sans-serif fonts: Helvetica, Arial, Verdana, Futura, Avenir, Myriad Pro
- Script typefaces are based upon the varied and often fluid stroke created by handwriting. They are generally used for display or trade printing, rather than for extended body text in the Latin alphabet.
- Examples of popular script fonts: Brush Script, Lucida Calligraphy, Lucida Handwriting, Papyrus, Comic Sans
- A display typeface is a typeface that is intended for use at large sizes for headings, rather than for extended passages of body text. They may take inspiration from other genres of lettering, such as hand painted signs, calligraphy or an aesthetic appropriate to their use, perhaps ornamented, exotic, abstracted or drawn in the style of a different writing system.
- Examples of popular display fonts: Bauhaus, Broadway, Stencil, Windsor
For business dashboards it’s best to use only monotype, serif, and sans serif options.
What are web safe fonts?
Using fonts in Tableau can be a tricky thing because only Tableau web safe fonts will show up the same for everyone. A web safe font is a font that is considered to be a ‘safe bet’ to be installed on the vast majority of computers. Every computer that has a browser installed has default fonts built in so that it can display the text on the web.
Tableau Public and Tableau Online support fonts officially licensed for their Linux servers. Other fonts cannot be guaranteed to display as expected since browser rendering of fonts depends on fonts being installed on both the server and client devices.
If you use a font installed on your computer, that a viewer doesn’t have installed, his view will fall back to his default browser font. Let’s have a look at a Safari example! If I use a custom monospace font (like Lucida Console), for the others viewing my dashboard in Safari, it will fall back to Courier, a custom serif (like Playfair Display) to Times, and a custom sans-serif (like Futura) to Helvetica.
This is the official list of Tableau Public web safe fonts according to Tableau:
- Courier New
- Meiryo UI
- Noto CJK Sans
- Noto Thai Sans
- Noto Thai Serif
- Times New Roman
However, I just made a test and it doesn’t seem to be accurate. I put together a list of popular web safe fonts, then deleted everything custom both on my Mac & PC and this is what I see:
Which font size to use when?
When building a dashboard make sure not to use a lot of different font sizes, because it can mess up the looks and consistency. In an average case, you don’t have to use more than four sizes. Points can vary based on the type of font you’re using, but here’s a guideline you can follow:
- 22-36pt: for the dashboard title
- 16-22pt: for subtitles and chart titles
- 10-14pt: for texts, labels, annotations
- 8-10pt: axis, notes, date / period, data source, author
If you ever used Figma or Illustrator combined with Tableau, you might have seen that the same font size results in a different outcome, and it’s because it’s not the same. While Tableau is using points by default, Figma and Illustrator use pixels (10 pixels = 8 points). Here’s a converter for you.
There are different CSS units, you won’t use them much, but it’s good to have the overall picture. We have 3 main groups: absolute, relative and viewport units (only makes sense in CSS). In the absolute group we have mm, cm, in, pt, px, and pc – these are all fixed sizes. It gets trickier with relative units, as they are based on the default font size of the browser, which is 16px in most cases (you can overwrite this setting though). These are the relative font size measurement types:
- % – percentage
- em – font size of the element relative to its parent
- 2em means that it’s 2 times bigger than the normal size
- in case of a 16px default font size 2em means 32px
- rem – font size of the element relative to the root html element
Don’t bother if you don’t understand relative units, for dataviz purposes it’s enough to know the difference between the ones in the absolute group:
What font colors to use?
Always make sure that your text is readable. This doesn’t only depend on the font size you choose, but the combination of background color and font color as well. You should always aim for the highest contrast possible. My suggestion would be to avoid using anything other font colors than black, gray, or white, especially on business dashboards. If you use something other than that, it might be disturbing for the eye and could increase your bounce rate.
Let me show you a couple of good and bad practices! (Meh can mean yes for artistic dashboards, but no for business ones.)
How to use emphasis and capitals?
90% of the time you should use regular fonts. If you want to emphasize the different types of information on your dashboard, restrain yourself to italic and bold, and leave everything else behind. No extra bold, bold italic, condensed, condensed extra bold for a business dashboard.
Here’s how to decide what to use when (if not regular):
- bold: for dashboard / chart titles, emphasizing the importance of information in a text / note / callout
- italic: notes, date / period, data source, author
- Mainly things that you don’t want to have on your dashboard, but it’s necessary to have. They don’t convey a valuable message for understanding the data but need to be there for credit and further reference.
Here’s how to use capital letters:
- Use them all across the dashboard
- Don’t use them at all
- Use them for titles only
Font pairings – Do or don’t?
I’d only advise using more fonts if you’re working on an artistic dashboard, but for business purposes, it’s best sticking to one. If you decide to use more, here are the golden rules to follow from combining serif and sans serif fonts to visual hierarchy.
For artistic playdate with fonts I have a Pinterest board for you.
During this lockdown, I realized a lot of things. One of them is that I can cook. However, the recipes I try are located on different websites and 2 weeks later I don’t even remember where I saved them. I can’t help mentioning Alison Roman’s Chickpea stew that broke the internet last year, because it’s among the top dishes I’ve ever made. That’s when the idea came to make my cookbook, and if I do it, why not make it in Tableau? Why? Just because it can be done. Have a look at it on Tableau Public.
At first, I started with three recipes to make a prototype, but the idea is to publish the best cake recipes from the yearly baking contest at the company. The data behind the visualization is as simple as it can be, only contains three rows. The fields I had in the Excel sheet were recipe name, ingredients, meal-type, serving size, cooking time, complexity, lactose-free, gluten-free, vegan, story, steps, and quotes. Of course, you can get creative with it, one of my commenters on Twitter wrote, that she’ll build a dietary plan for her mother in Tableau.
The inspiration for the layout I found on Pinterest and recreated something similar using Illustrator. The predesign is really simple, you can even do it in PowerPoint or Figma. Make sure to use the same websafe font on the background image, that you’ll use in Tableau. If you want to create your own cookbook, here are some cool layout ideas for you on a recipe design board.
The images I downloaded from Pexels, cut them to the same size, and laid a grey rectangle over them with high opacity to make them more look similar to each other. It’s a slight difference, but it adds a lot to the final design.
The next step was to have a dynamic switching effect based on the recipes we’re selecting. I couldn’t do it with shapes because it downgrades the quality and they get pixelated. So I went with another common practice and added them as a background image on a sheet. The technique is originally explained by The Data School in this blog post.
You create two new calculated fields called the X-axis and Y-axis, and give them the value of one. Add them to rows and columns and switch the default aggregation to average. Then turn on opacity by making it 0% and add the desired field to the details and filters panel for the changing effect (in this case it was recipes). Hop on to the map / background images menu, add the picture you’d like to have for a given recipe and set it up the following way:
In the options menu, lock the aspect ratio, and add the filter setting to only show this picture when the desired recipe is selected. Then repeat the same process for all the items you have in your dataset.
The only thing left is adding the hidden filter pane. For that, I use a floating vertical container and add a show & hide button. You can customize the buttons if you’d like to, any png images can be used for this purpose, or you can even draw one yourself as I did. I set the color of the filter pane white and lowered the opacity to 34% so that it has this overlay style and the picture is still showing up under it. There you have it, your very own cookbook in Tableau!
I watched the season finale of Westworld yesterday evening and was quite nervous the whole day, as this came out as one of the lowest-rated episodes of the series (correction from this morning: it is the lowest-rated episode of all time). However, if I need to be honest, I didn’t hate it as much as the internet, but this could be mainly because I already lowered my expectation. I have a love and hate relationship with Westworld, I know it’s not what it used to be, but I still can’t stop watching it.
I had several ideas on how to visualize the data, but I was sure from the start, that it’s gonna be a layout and typography playground for me. I created a Westworld board – this is where I found a cool timeline viz on Business Insider – on Pinterest for inspiration, but I ended up using my typography collection. This is the final result, not much, but I just did it as practice. You can find the interactive version on my Tableau Public profile.
This is the third (and final?) quarantine life viz after Couchella and My Fallen Kindom, using the same style as these two before. This time I downloaded my bank account info and had a look at how my spending structure has changed in the past months. If things continue to be this way, I guess this summer I’m gonna be swimming in money, not the sea. You can have a look at the interactive version on my Tableau Public profile.
The minute I saw on Twitter, that Sarah Bartlett announced the next Iron Quest topic to be quantified self data, I knew I would make a series of my Couchella viz and enter the challenge. I was riding my bike yesterday to the pharmacy to save my head from being exploded when the idea popped into my mind. I’m gonna draw the layout of my flat and make a heatmap of what I’m doing where for how long in the apartment!
The goal was to have the same styling as the Couchella one (about my streaming activity during the first 3 weeks of quarantine), so I decided to stick to my favorite Futura font and used the same colors (background – #231f20, purple – #8000ff, pink – #ff2079, blue – #440bd4) and opacity (60%). There’s gonna be a third one to follow these two at the end of next week, so stay tuned! Until then, you can have a look at My Fallen Kingdom viz on Tableau Public.
Like many other things, it all started at Starschema a couple of months ago, when I tried to explain to my colleagues why I moved from one room to the other. It was a very hot summer and I was waiting for my AC, so, for the time being I had to secure the way of air, so that I could sleep at night. To achieve that tiny air motion that could be achieved, I moved to the living room. As I’m a visual type and the others couldn’t get the gist of it, I started to draw my flat on the whiteboard to illustrate the way of air.
That started a movement within our team and in a couple of days, the whole room was full of flat layouts. I’m not saying this was my proudest moment at Starschema, but it’s definitely in the top 3.
At first, I thought, that I’ll be able to sketch it up from memory, but after an hour I had to take out a measuring tape to get the exact proportion of the rooms. All the details and comments I figured out on the bike the day before, so I just needed to put it on a canvas. We were having a Tableau Featured authors call in the afternoon and the incredible Zach Bowders asked me if everything in my apartment was from IKEA.. and it is! So that’s when I decided to add that Ikea twinge to it! This was the layout I put into Tableau as a background image:
After that, I created an Excel file of all the activities I do at home on an average day (size means the time spent) and added the X & Y coordinates to have the scatterplot. This was the hardest part, as I gave an estimated value to all of them, but had to adjust the bubbles one by one. After 40 minutes of finetuning it, this is the outcome:
A couple of weeks ago I was scrolling through Twitter and there was a big hype everywhere about this new Tiger King documentary series on Netflix. I was like, okay, let’s have a look. The first episode was standard white trash American content with dumb people having big cats in their backyard. But from the second episode, it was all about heterosexual men marrying other men, building a sex cult, torn off arms, and feeding husbands to tigers. It’s the kind of experience you feel ashamed watching, but you just can’t stop doing it.
The original Tiger King font is MPI No 507, but as it’s not a free choice, I substituted it with a similar one, called Pink Slab. The colors were taken from an official wallpaper, that you can see below.
I might be as obsessed with this show as Joe Exotic and Carole Baskin with tigers, so I downloaded some search statistics of the main keywords from Google Trends and made a visualization of it. You can have a look at the interactive version on Tableau Public.