Guide: Typography

In this blog post I want to try and define the various elements of typography and how I feel they can be implemented in data visualisation.  

The ‘implemented in data visualisation’, is something that I have had to put a lot of thought into over the past year – through creating my company’s Tableau Design Framework to feeding back to our own Creative Team’s creation of companywide, tool agnostic, guides on presenting data through different mediums.

Let’s start from the top and work our way through.

What is Typography?

“Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed”

Wikipedia.org

“Type and typography – what you are and how you do it – are both science and art”
James Felici, The Complete Manual of Typography

To really understand Typography we first need to have an appreciation of the makeup of a typeface (or a font to you and me!).  The below image was taken from Typedia.com and I think is a very useful representation of all the elements that create a typeface.

Every letter we use day-to-day is made up different elements that are deliberately considered as part of the creation of each typeface.  This is not something that you particularly need to understand in detail for your visualisations, but I believe having an appreciation of these elements that structure the typefaces we use, will help us appreciate the fonts that we consider when creating a new viz.

The best way to really understand a typeface in all its glory is through a pangram – a sentence that contains all the letters in the English language.

‘The quick brown fox jumps over the lazy dog’ 

This is the shortest pangram and it can be easier to judge a typeface by reading words rather than individual letters. 

For Data Visualisation, we would probably want to include the numbers as well, to understand how they work in conjunction with the letters.  So, something like this

‘The quick brown fox jumps over the lazy dog. 123,456,789.00 times!’

Selection of a font for your visualisation text can be tricky and if done badly can really hinder the readability of your narrative and also detract from the theme or mood of the work.  For an example of this, I included a short section on font selection in a previous blog post on creating ‘Soft-style’ visualisations, which you can read here.

Fast-forwarding and assuming you have chosen a typeface that works well with your visualisation theme.  You would be forgiven that all you need to consider ends there – you would be wrong!

We have yet to consider how we are setting this typeface into our visualisation – in other words, Typography!

Let me begin with a little disclaimer, do not take the rest of this blog post as “These are the absolute rules, you must do all of this otherwise you are doing it wrong!” – That is not the message here, what I write next is an account of the different elements of Typography that should be considered and also detailing my own approach and what I believe works well. 

When using my visualisation tool of choice – Tableau, a lot of what is covered in this blog post next is not possible to adjust.  There are solutions available to bridge these gaps - try adjusting text using other programs such as MS Office, or Adobe Creative Cloud Apps.  This provides the opportunity to adjust custom text outside of Tableau and bring forward into your visualisation as images.

Typography in detail

Spacing

The way we approach the spacing of our letters, words and lines, all in combination within each paragraph, can completely alter the balance of the narrative. 

Consider these two examples (click to enlarge):

Text taken from Amazon for sale of a Hornby model railway book.

Both examples are using the same typeface (Times New Roman) and the same size and weight (size 12, regular). 

Looking at each we can see a remarkable difference in the aesthetic of each and more importantly the ease we can read each one.  Purely through controlling the spacing between the letters, lines and breaking up the paragraph we can influence the way our visualisation readers engage with our narrative.

Line length

In most instances, from a business dashboard perspective, you do not have a huge amount of narrative to worry about; so this next point doesn’t really apply.  

From a hobby viz viewpoint though, I have seen a lot of examples where lots of narrative has been included to back up the analysis and aid storytelling.  These sections of narrative can be off-putting to the casual reader, as it requires a great deal of concentration and engagement to read through.  If the reader is anything like me, they’ll try and 'skim read' these sections, or worst of all give up halfway through.

Line length has a lot to play here.  Too many words or characters in each line can decrease the readability of the narrative.  Why?  Because the words do not flow easily from one line to the next.  Too long a line can make finding the beginning of the next line awkward. 

For this reason, try to keep your lines between 8 and 15 words.

 

Capital Letters

We have all heard this before, WRITING IN ALL CAPITAL LETTERS IS HARDER TO READ AND IN MODERN WRITING APPEARS 'SHOUTY'. 

This quote sums the reason why writing in capital letters is harder to read nicely.

“If only capital letters are used in a piece of writing, nuance is lost. Numerous studies conducted over the decades (since as early as 1914) also suggest that text written in all capitals takes more time and effort to read than text in standard sentence case. That’s because people recognize words more easily by their contours. Lowercase words show the highs and lows of letter-extenders (like d and p). Words in all caps have a uniform rectangular shape.“

 Irritating History of Caps, Dictionary.com

For this reason, try to keep to only capitalising the start of sentences and proper nouns (such as people’s names, days of the week).  

Also consider your typeface you have chosen.  If your visualisation is text heavy and you want your readers to read as much as possible, then consider a typeface that has clear extenders.  

Below is an extreme example of how typefaces can vary in extender length.  Ideally we would chose the typeface with the longer extenders to make large volumes of text as easily read as possible.

If the size of the typeface is very small, then writing in all capitals can help the legibility of the narrative.  Try to keep these text points to a minimum number of words.  Such as small annotations or supplementary text – like: 
*DATA INCLUDES CURRENT YEAR ONLY

Leading

This is the spacing between lines of text.  Why this is important is described in the ‘Spacing’ section above.

As a rule of thumb, if you do want to adjust the leading on your typeface away from the computer default, utilising The Golden Ratio, is probably a good place to start: 1.161804 x font size.

Kerning

This is the spacing between the characters.  When developing typefaces this element has already been considered in its set up.  Yet, as visualisation developers, we may want to alter this within our titles, to create more interesting graphic designs, or even we may find cases where characters appear detached from each other, so we may want to close the gap.  Gapping of this nature is more pronounced as the font size increases.

Example:
Swapping a two similar characters an ‘I’ and a ‘1’ and you can see how the difference in character creates an increased Kerning (gapping), which becomes more pronounced when the font size increases:

Widows & Orphans

Never heard of a Widow or Orphan in a typography context before?  Well me either until recently!

A Widow is either a line of text that has become detached from the paragraph it belongs to, or a single word that has become detached from the rest of the sentence and sits alone on its own line.  Widows are typically seen across pages in books or magazines, where the widowed line begins a new page.

An Orphan is the start of a new sentence that has been detached from the rest of the paragraph that is belongs to and forms its own line, typically at the bottom of the page.

All three examples are shown below.

These are in fact basic principles to look out for in a data visualisation, when you try to create easily readable sections by breaking up your narrative.

There will be cases where single word Widows will emerge, when style over substance prevails and we try to be clever and wrap our paragraphs around shapes or images on our visualisation. 

My advice on this would be consider it on a case-by-case basis. 

Consider why are you doing this?   Is it because space on the viz for the narrative is very tight?  - In which case, should you look to increase the dimensions of the viz to create more white space, or reduce other elements to allow room? 

Rather strangely, the larger the section of text narrative you are trying to bend round an image, the more applicable it is.  Why? because you are less likely to create Widows, if you maintain a good length to the lines. 

Weighting & Size

This is one of the easiest elements for us to control within our visualisations and has everything to do with how the narrative we write synergises with the main visuals.  In business dashboards consistency is everything, creating a set of standards is an important visualisation task for any reporting function, but applying those standards consistently is the key making that successful.  You can also take that rule and apply it in isolation on individual hobby vizzes.  If you chose one font size and weighting for a section title, be consistent and reuse the same set up for any other section titles of the same nature on the same viz.

As a rule, if the typeface you chose already comes with various weighting options (such as: Light, Book, Medium, and Heavy) then focus on using those options and do not further increase the weight by applying Bold.  If the typeface has been created with weighting options, then we can trust the typeface creators have already considered weighting and further increasing of the weight of the typeface through use of 'Bold' is unnecessary.

Colour is also included in the weighting discussion, choosing a black or dark grey can increase the visual weight of a typeface, as opposed to choosing a light grey can decrease the visual weight.

You will need to consider all three elements when creating an identity of your dashboard.

How I approach business dashboard size and weights / colour is like this:

Note, Light is only used when the font is very small, the light font allows for easier reading of the text.  Lighter shades of grey are used on more subtle elements of a dashboard such as axis numbers or labels.

When formatting the typeface in this way, you create a natural hierarchy to the fonts, where size, weight and colour are used to draw attention to the main elements and subtle text is kept as just that – subtle. 

There can be an urge to increase the weight on smaller elements to help those stand out equally to the larger titles.  It would seem that this approach would be beneficial if you think all elements of a viz are potentially vying for the reader’s attention at the same time.  Yet, doing this actually removes the contrast in the text hierarchy, which in turn adversely impacts how the formatting of our typeface helps lead our readers through each text element.  If all text was weighted in a similar way, where would our eye be drawn?

You can see this impact below of the two formats below.

Headings

I’ll keep this short and sweet…

Headings should be just that ‘short and sweet’, avoid lengthy titles.  

Formatting of headings can depend on the size of the area it sits within.  A small area on your visualisation will suggest you look to using heavy weighted text, so the heading has impact, despite not owning a large amount of retail space.  Conversely a heading that is given a lot of retail space on a viz would suggest you use a lighter weight (medium or book), so that it doesn’t over power the rest of the viz.

Alignment

Alignment of text is a very important component of the readability of our writing.  For those of us that write using English or even some European languages, our written words are read from left to right.  This is the basis for my own viewpoint on text alignment.

There are four options for alignment of text, left-aligned, centred, right-aligned or justified.  Application of these will vary depending on the use case in the visualisation; one size doesn’t fit all in this case.  When considering standard elements of a business dashboard or hobby visualisation, you will commonly encounter... 

• Titles
• Narrative in 1 or 2 lines
• Narrative in paragraphs
• Dimension axis
• Measure axis
• Labels
• Annotations / callouts

... to name a few!

So here are my views on alignment and what works well for me.

Firstly, let’s reduce the options from four to three – Never justify text!  

At first glance, justified paragraphs appear visually appealing because they provide your paragraphs with neat and tidy edges on both the left and right sides.  On closer inspection to generate those nice neat edges, the words in each line will be spaced out from each other and in some cases the spacing can be extreme.  This just makes it hard work for the reader to actually follow through your narrative and rhythm of reading the words is broken due to the spacing irregularity.  So, just avoid justifying text.
*Did you notice I justified that paragraph? and did you have to read it more than once to help it sink in?

Which leaves us with three options – left, centre and right alignment.  As we read English from left to right, the start of each new line of a paragraph is on the left-hand side.  If we were to centre or right align paragraphs of text, we end up creating a left hand edge that is ragged.  Therefore the as a reader it takes a little more effort when reading to find where the start of each line begins, it isn’t a natural flow.  This is why in terms of paragraph text I try to stick to aligning to the left.

This left alignment rule holds true on viz annotations that are 5 of more lines in depth.  Any narrative of 5 or less lines can still work well when centre aligned.  Elements such as titles, BANs (Big numbers), supporting text and smaller annotations can all lend themselves well to being centre aligned.  Creative processes might drive the need to use such alignment - for example, if you have a number of charts with the main axis running vertically down the middle with Mark's either side, you may want to align the titles for each chart centrally above, so everything stays in synergy.

Alignment of smaller pieces of text on a visualisation is largely going to be influenced by the composition of the viz - something that I will explain next.

Aesthetics & Balance

The balance and composition of your dashboards or hobby vizzes are an important part of aesthetic design that needs to be considered, and typography has a large part to play here.  There are two lens we can view how we balance typography and narratives with the over all design; we can look at it in macro (the whole dashboard) or micro (each chart in isolation).

What is the difference and why does it matter?

To start I'll go through the micro view point of balancing your narrative in isolation of individual charts.  To repeat myself, with 'narrative' I talk about those pieces of text listed above in the 'alignment' section.

Micro

In the alignment section I spoke about how left-aligned text makes reading from one line to another easier.  Yet, in my visualisation tool of choice, Tableau, the default alignment for dimension axis on charts is to right-align, and there is good reason for this.

When viewing a chart in isolation, this makes complete sense, right alignment of the dimension axis places the text closer to the data and therefore it is easier to track data points back to their associated label and visa-versa.

This is where we need to be careful that we do not blindly follow the typography best practices.  Data viz adds a little more complication to the rules. 

For example, if we left-aligned the same dimension axis, we would actually run the risk of making the chart harder to read.  This is exactly what we do not want to do as data visualisers.  Our job first and foremost is to help our customers read and understand the data.

Left alignment here does not work as well as right alignment because of the length of the dimension labels.  There are some long labels and some short.  With left alignment the short labels are left too far from the data marks (the bars), which makes following the bar to the correct label more difficult than if right aligned.

So, in this case where typography good practice for reading paragraphs suggests left alignment, because each line will then start at the same point.  The opposite actual works better here, with right alignment bringing each dimension label equal distance from the bars in the chart.

All is not lost though for the left alignment, a simple case of adding some subtle formatting can help the reader of the chart connect the bars to the axis labels.

The advantage of this, would be if your chart title is left aligned, now your dimension axis will line up vertically with your chart title.  This creates a much more pleasing composition.

There are charts where both left and right alignment just doesn't seem to fit.  For example, a diverging bar chart.  Where the zero axis appears in the centre of the x axis, which leaves the dimension labels even further adrift from the data.

Left-aligned - it's near impossible to trace the data mark's to their label and requires a lot of effort to follow

Right-aligned - it's not much better

We could apply labels to the bars and remove the dimension axis completely, but that doesn't work well when you have short bars - the label then goes beyond the length of the bar, making the length of the bar hard to read.  Not to mention the formatting headaches that come into it, through finding a font colour that works with the bar colour and the background colour.

We could of course shorten the axis to move the zero axis closer to the y axis on the left, but this doesn't really work well either.

So this could actually be a good use case for trying to centre align you text.  I am not suggesting centre aligning the dimension labels on the normal Y axis position.  I'm suggesting moving the Y axis to the centre of the chart and then centre aligning the text, as demonstrated below.

With that, you could also centre align the chart title, which would provide symmetry and the reading of the text would be kept mainly to reading down the middle of the chart.

Measure axis in Tableau are less controllable for their alignment.  Like with most data viz best practices, less is more.  If you have a good grip on the interaction of a chart and how granular the numbers can become, you have the opportunity to control the number format and ideally reduce the amount of 'ink' on the page.  Ideally avoid using full numbers to the unit on your measure axis.  Instead aggregate the values using 'B' (billions), 'M' (millions) and 'K' (thousands), which will visually clean up the axis.

A couple of big caveats to the above advice are:

• Only aggregate the number format if your reader doesn't need to see the full values

• Make sure that interactions on the chart doesn't make the numbers unreadable.  For example, number format is set to 'K' (thousands), but after applying filters the top value is less than 100, which would result in the axis value showing 0.0K - which is completely useless to everyone.

The last point for looking at a chart in isolation and considering typography is vertical text.  

Try your best to avoid it.  No one likes to crane their neck to try and read text that is turned 90 degrees from the horiztonal.   It makes reading those labels very difficult. 

If you have a dimension axis on your chart try to keep that on the y axis, so the labels are read left-to-right and not vertically.   It is fine to put dimensions to the x axis, but only if the text fits horizontally and the labels do not need to be turned 90 degrees to be read. 

Another narrative label that is commonly orientated vertically is the y axis title.   This is the default in applications such as Tableau, but in my opinion we should avoid keeping it as such.

Our options are:

• Remove the axis title completely, and make sure that the chart title includes reference to what the axis is showing

• Move the y axis title to above the chart but orientate horizontally, as per the below image.

I personally think this works very nicely.  There is a little formatting involved in this.  You need to ensure you include line space between the chart title / sub-text and the axis title - which helps make it clear the two narratives are separate entities and it is easier to pick out the y axis title.  The other formatting point is to left align the y axis title - this places the title as near to the y axis as possible and so through association by proximity the reader will recognise what the axis title relates to.

Macro

Moving on to looking at the dashboard or viz as a whole from a balance and composition view point.  There are probably two sub-lenses to look at this through: 1. Business dashboards and 2. Hobby vizzes.

Why the split?

Business dashboards tend to stick to a templatised build and are layed out in a grid format.  Hobby vizzes are more fluid, charts are less format, there are more visual expression in imagery used and as a whole, are less formulaic.

Business Dashboards

In the last section we have looked at balancing the composition of individual charts, through lining up the text to make it as easy as possible for the reader to understand the charts and data.  When we start to look at those same charts but at a macro level when placing them on a dashboard, we start to see different issues arise.

Below is an example dashboard with the charts from the above section (plus one other), placed on a standard dashboard grid.

We can see immediately that the overall composition and balance is a little messy.  The bar charts do not connect with the left hand edge, where the title of the dashboard is placed,  There is some vertical text on the line and scatter plots.  The charts placed above each other do not line up well either.

If we were to try to deal with the same charts but from a macro view point you could produce something like this.

This time I left aligned the bar chart dimension axis, so that the axis labels provide a frame for the left side of the dashboard.  Those same labels are in vertical alignment with the dashboard title, chart tiles and the labels from the other bar chart.  This is much more aesthetically pleasing,

The vertical labels have moved above the chart and now sit horizontally, but separately from the chart title.  Which makes those elements easier to read.

So with some relatively easy changes to the narrative composition from macro view and we create a better balance to the dashboard.

Hobby vizzes

When creating your own personal vizzes, the format and layout can be much more fluid than in a business dashboard.  You tend to place your main charts or images to take centre stage and the narrative works around those centre pieces.  

In the below example of a visualisation I created for the project #VizForSocialGood.  You can see that keeping to the principles described in this post your text can be read in manageable chunks and can provide balance to the viz from a macro perspective, even when lots of narrative is present.

That said, I can see some unnecessary centrally aligned text and one or two widows in that viz - no one is perfect! ha

In the next example, you can see that the text is providing a lot of the framing on this viz, keeping to the left-alignment, but there is also a lot of allowance for creative influence.  Where the narrative near the bottom of the viz was wrapped close to the time line of the Voyager probe's flight path.  I saw this as an acceptable compromise.

Lastly, the annotations around the radial in the next example could so easily have been centrally aligned, but keeping them all left aligned maintained a consistency of approach with the main text and I think this works really well.

… and that's it for this post!

Well done for making it this far!

I hope you enjoyed reading through this.

As I said at the start these are my views on what works well when considering typography and data viz together.

If you have any feedback or difference of opinion I would be interested to hear from you.

Have a good day!

Sam