Data visualization – the fundamentals – typography

We continue our blog article series about data visualization, sharing our knowledge on everything you need to know to distinguish between good and bad charts. In the previous article, we covered how numbers communicate information visually and how to tell the whole truth through numbers. This article reviews how to use typography in charts.

Legibility

Choosing the right typeface out of thousands available can be overwhelming as there are various styles and weights such as serif, sans-serif, italic, all caps, light, medium, bold, and black. However, it is important to remember that the purpose of typography in charts is to convey information and not just decoration. Therefore, the primary consideration when selecting a typeface should be its legibility.

Terminology

The Serif type refers to letters with strokes added to their main strokes' beginning or end. Where's Sans Serif type means "letter without serifs."

In the world of typography, the type size is determined by the height of the metal block on which the letter was cast. Nowadays, in the digital age, the size of the type is determined by the height of the equivalent block rather than the actual dimension of the letter.

Points are the standard unit of measurement for type size. A pica is equal to twelve points, which is roughly one-sixth of an inch.

Leading refers to the vertical distance between the baselines of two consecutive lines of text.

Basic rules of type legibility in charts

  • For comfortable reading, the leading should be about two points larger than the type size. An example of this would be using a 10-point type with 12-point leading.

  • Don't set the type too small or too condensed.

  • When choosing a type style, it's best to keep it simple, whether it's serif or sans-serif. Reserve bold or italic for emphasis, but avoid using both at the same time.

  • Try to avoid writing in all capital letters, as it can be difficult to read. Similar to handwriting, it is recommended to use a combination of upper and lowercase letters.

  • It is best to avoid placing white text on a black or colored background.

  • Avoid hyphenation.

  • It is advised not to use overly decorative fonts.

  • Avoid setting the type at an angle.

  • Avoid tracking the type (t h i s i s t r a c k i n g).

Typography in charts

When creating charts, it's important to keep the focus on the data. Typography should be used to describe the chart clearly and not to create an emotional response like in fashion magazines or political posters. Bad typography can distract from the main message of the data and should be avoided. Using typography effectively can present information in the most efficient and direct way.

Make sure that typography doesn't obscure the underlying data. For easier readability, it's best to use simple typography. You can make the headline bold or a few sizes larger to make it stand out.

Consider displaying the data as horizontal bars to make room for longer labels.

Avoid using extravagant fonts or rotating the text to save space. Combining serif and sans-serif fonts can enhance visual appeal and readability without compromising legibility.

Avoid using white text on a black or colored background, as it can reduce readability. To increase legibility on a shaded background or emphasize a segment, use bold formatting instead.

Avoid using excessive bold text. Highlighting everything results in nothing standing out. Instead, be selective and use bold type to highlight the main point of the message.

In our next blog post, we'll go over how to use color in charts. Stay tuned and sign up for our newsletter to keep up with our blog posts!

Read More

Previous
06.28.2023

Why a SaaS dashboard is vital for your business: key metrics to track, benefits, and types

Read More
Next
08.03.2023

The significance of accessibility and inclusiveness in UI/UX design

Read More