There are many possible new visualizations using typography, some of which I’ve previously discussed in posts on this blog. One way to consider this design space is to decompose it into the different elements that can be used to assemble visualizations. These elements include:
- Typographic attributes. This is all the variation within type that can be used to create differentiation and encode information. This includes the literal alphanumeric glyphs as well as font weight, italic, case, typeface (e.g. Helvetica, Times), underline, width, baseline shifts (e.g. superscript), delimiters, x-height, as so on. Of course, other visual attributes such as color, size and outline can also be used.
- Data Encoding. Type can encode different kinds of data. Labels on maps use type to indicate different types of data as shown in the example below. The names of areas in this map use type to indicate: a) literal data, such as the name of the town or region; b) categoric data, such as whether the area is a country, province or city; and c) quantities, such as the population.
- Scope. Type attributes may extend across a sequence of letters. They scope of the type attributes may apply to whole words (as on the map); could apply to a subset of letters within word (for example, to indicate silent letters in words such as though and answer); extend across multiple words (e.g. “There goes the HMS Titanic.”); or even extend across lines, paragraphs or portions of a document.
This creates a multi-dimensional space for design exploration: attribute x data-type x scope, which we can then use to consider some interesting new kinds of visualizations. For example, we could apply literal text to a line in a line chart (alphanumeric text x literal data x sentence). Why bother using a tooltip or creating a visually separate legend, when the content can be directly embedded in the line?
Or, we can vary a type attribute, such as weight to indicate word frequency. For example, the chart below indicates how frequently adjectives are associated with characters from Grimms’ Fairy Tales (i.e. font weight x quantitative data x word).
How I got to this framework and lots of other examples – both historic and new types of visualizations – are discussed in more detail in this journal article Using Typography to Expand the Design Space of Data Visualization (html version, PDF version), which was just published in the open-access journal She Ji: The Journal of Design, Economics and Innovation (here).