Explore Yellowfin now with our sample datasetGet Started
Language, such as the labelling of tabs, axis, charts and sections within a dashboard as well as any instructional notes can play a very important role in guiding the user through the dashboard journey. Language provides context and as such always try to provide maximum information.
Make sections and labelling clear and descriptive. Remove any ambiguity by using language that closely describes the section or chart. For example, rather than have a period compare chart that simply says ‘sales’, expand on the description to make it very clear what is being shown – ‘Monthly sales compared with previous period’. This ensures any new users are given a clear understanding on charts within the dashboard.
Finally, don’t assume that your end-users actually know what they are looking at and what it all means. What is often obvious to a data analyst can be confusing to a business user.
Normally there is quite specific instruction within an organization’s brand guidelines as to what fonts should be used. Often however fonts required for charts, dashboards and data visualizations are not specifically called out. If possible always refer to your brand guidelines for specific instructions on which fonts to use. If there are multiple fonts available, it is best to choose the most readable font that is specified for long-form content rather than the ‘hero’ brand font if it contains too much flourish or is not suitable for data visualizations.
If you do not have a brand guide available, choose a highly readable font that is clear to read at both large and very small sizes and has a number set that has suits being used in data sets. Text that accompanies a dashboard needs to be very easy to read and there are a number of fonts that suit this purpose better than others.
Serif typefaces have small accents or feet on the characters and are generally better for reading. Most newspapers, books and long-form text tend to be serif font.
Sans Serif (Sans literally Latin for without) refers to more modern fonts that are without the accents or feet. Sans serif fonts are generally better for numbers.
Typefaces or fonts can have two different types of spacing; tabular and proportional. Proportional figures tend to work well when read in a paragraph of text such as a data story.
Proportional typefaces have variable spacing whereas tabular typefaces have an even amount of spacing between the characters or in other words, the same width and as such they align vertically. This makes them better suited for tables, reports and data visualizations.
Roboto, Open Sans and Lato are all tabular Google fonts best suited for use on dashboards, reports and charts. These fonts are also highly readable at small sizes, clean and contain a wide selection of weights (eg light, regular, bold, extra bold etc).
Before designing your dashboard, determine the fonts, font sizes and weights, or ‘design system’, that you plan to use across the entire dashboard including all your tabs. There are of course an infinite number of combinations that can work for your dashboard with no correct or right way to do it. There are however a few ‘don’ts’ that for various reasons either increase the end-users cognitive load or just simply don’t look good!
There are a number of regular components across most dashboards. It is important to establish a consistent, defined style for these components.
|KPI Big Number||Lato||Bold||36|
Generally, it is advised to use a single font type across no more than 3 different weights (e.g. regular and bold) using a maximum of 4 font sizes on a dashboard. This allows enough variety to ensure you can guide a user’s eyes to prioritized content, such as table or chart headers whilst being able to also have axis and labels that are not too dominant. This is across a whole dashboard (including all reports, charts, headers, labels, legends notes and axis).
If using one font, adjusting the weight (thickness) of components such as headers and subheaders, helps prioritise different information and lead the eye through a more guided journey.
The example above contrasts Libre Franklin Bold with Libre Franklin Light to ensure the small description does not overwhelm the reader.
Don’t – Avoid using a single weight and size for all text and numbers. Use varying weights to control the user through the dashboard. Bigger KPIs will be consumed first and then lead the user to more detailed analysis in subsequent charts and tables.
As mentioned numbers in your dashboard should generally be a tabular (evenly spaced) font. This can be contrasted with an alternate font that can be used for reading and headers as shown below. Combinations can include two different san-serif fonts or a serif and san-serif font.
As a general rule:
Serif fonts for reading, san-serif fonts for labelling and numbers
The example above has replaced the san serif header and labels with a serif (Merriweather).
In this KPI component of a dashboard, Roboto has been used for numbers, labels and headers and Merriweather, a serif font, has been used for supporting text.
Don’t – use more than two different fonts. This can give the dashboard an unnecessary degree of visual complexity and will often come out as messy. Avoid using serif fonts for numbers.
1 font type 1-2 size 1-2 weights including header