Just like colours, the typography used in a visualisation design determines its look, feel and legibility. So it is worth spending some time studying this part of graphic design to improve your data visualisation designs.

In order to be able to talk and discuss about the design of text elements, you need to have an understanding of the concepts and jargon of the world of typography. These are introduced in this chapter.

Serif vs sans serif

Fonts come in two kinds: serif fonts and sans serif fonts. Serif fonts have a small stroke attached to the end of larger strokes of letters. Check the characters in the following popular serif fonts taken from Google Fonts.

Popular serif fonts on Google Fonts

Popular serif fonts on Google Fonts

Sans serif fonts on the other hand lack these strokes at the end of larger strokes. Compare the serif fonts above to the sans serif ones below.

Popular sans serif fonts on Google Fonts

Popular sans serif fonts on Google Fonts

Traditionally, serif fonts were used for body text, as serif fonts were considered to be more legible. But research has struggled to confirm this, and if serif fonts would have a legibility advantage over sans serif fonts, it will be small one. There is probably more variation in legibility among serif and sans serifs than there is between them.

Fonts can be mixed, and as a rule combining a serif font for headings and a sans serif font for body text, or vice versa, usually works quite well.

<aside> 🔎 Inspect the website screenshots below. Try to distinguish between the serif and sans serif fonts used and see how they are combined.

</aside>

en.wikipedia.org/wiki/Sans-serif

en.wikipedia.org/wiki/Sans-serif

 nightingaledvs.com/choosing-fonts-for-your-data-visualization

nightingaledvs.com/choosing-fonts-for-your-data-visualization

www.lefigaro.fr/actualite-france/les-convois-de-la-liberte-interdits-a-paris-20220210

www.lefigaro.fr/actualite-france/les-convois-de-la-liberte-interdits-a-paris-20220210

www.spiegel.de/ausland/kanada-ottawa-ruft-nach-trucker-protesten-notstand-aus-a-4e1cdee9-371d-49c5-86fa-1c184b9a8739

www.spiegel.de/ausland/kanada-ottawa-ruft-nach-trucker-protesten-notstand-aus-a-4e1cdee9-371d-49c5-86fa-1c184b9a8739

Fonts have feelings

Just like colours do, fonts can evoke feelings: some will feel serious, others playful, some will feel old and others modern and some will feel technical and others might even evoke feelings of horror and fear.

IM Fell DW Pica has an authentic and old look, because it resembles text printed on old printing presses.

IM Fell DW Pica has an authentic and old look, because it resembles text printed on old printing presses.

Exo is a “sans serif typeface that tries to convey a technological/futuristic feeling”

Exo is a “sans serif typeface that tries to convey a technological/futuristic feeling”

Creepster is a “fright-filled font, perfect for all of your grisly graphic needs”

Creepster is a “fright-filled font, perfect for all of your grisly graphic needs”