and what it means for data visualization

Type can be legible, but still unreadable. Consider this image:

The letters are perfectly legible, but the text, upside down and mirrored is unreadable.

Beautiful Helvetica, mirrored and rotated 180 degrees. Two highly common words from the English language. Letters are perfectly legible and even turn into other letters: p becomes b, m turns into a strange w. But it’s unreadable (thanks truetypestories).

Legibility is concerned with the clear delineation of the individual letterforms and their separability from one another.

  • Are the individual letters clearly designed?
    For example, is the opening of a c sufficient.
  • Are the letters clearly distinguishable from one another?
    For example, Helvetica uppercase I, lowercase l and numeral 1 are extremely similar.
  • Is there potential for letters to run together to be mistaken for a different letter?
    E.g. rn in Helvetica could be mistaken for an m, particularly if a drop shadow fills the gap between the r and n.
  • Do the proportions between letters make a potential letter ambiguous.?
    A letter with high x-height may not have much variation to distinguish between an h and an n (again see Helvetica).

Legibility is very much in the domain of the font designer and is very concerned with the shapes of letters, spacing, consistency across the design.

Readability, however, goes beyond type design. Readability is a comprehension issue concerned with ease of reading lines and paragraphs. Readability can be affected by many factors:

  • Line length: paragraphs that are very wide or very narrow are harder to read.
  • Spacing, kerning and leading: spacing between letters and lines, and tuning these spaces. For example too far   a p a r t  and words break apart.
  • Font weight: text that is too heavy or too light can be more difficult to read. Note that most fonts with variable weight have a “book” weight.
  • X-height: a font with a high x-height may increase legibility of words at a distance on signage, but may be more difficult to read for long paragraphs.
  • Uppercase: all uppercase is more difficult to read than type set in mixed case.  This is NOT an endorsement of readability based on word shape, rather simply that all uppercase has no ascenders or descenders, meaning that there is less shape differentiation between letterforms.

Readability is also related to cultural conventions. For example, in languages with longer/shorter words, optimal paragraph widths may be longer/shorter. Font choice is related to readability. Fonts that are more familiar are easy to read:

  • font-blackletter font  is  difficult to read these days because it is uncommon, but was used regularly in Germanic countries until the early 20th century.
  • font-baskerville was considered difficult to read when introduced (claim it hurt eyes), but would likely be unnoticed today.
  • font-neueswift is a modern font, designed by Gerard Unger in 1985. Gerard says: “When I first released Swift, people criticized it has hard to read with many angry angles: now it is a standard used in many newspapers, dictionaries and other major works.” (presentation by Gerard at University of Reading, 2016).
  • Note that there is an ongoing discussion as to whether sans serif or serif fonts are easier to read. In practice, for long printed texts, the convention tends towards serif-based fonts; while on mobile screens, the convention currently tends towards sans-serif fonts (perhaps this may change with more more devices at higher resolutions). Or perhaps a notion that sans serif is better for short bursts (headlines, narrow mobile devices) versus serifs for wide lines (Williams).

So what does readability mean to  visualization? The visualization programmer has control over choice of font, spacing, weight, shadows, and so on – so readability should be considered. Furthermore, techniques that may change font weights or other attributes in running text,  m a y  negatively impact  r e a d a b i l i t y,  particularly if  t h e r e  are multiple different attributes adjusted co-occurring within a text (Carl Dair).

There are also cases where readability is not an issue. Short snippets of text, such as headlines or text specifically designed for skimming are an example. For example, dictionaries often use a wide mix of typographic techniques to differentiate elements within each entry to facilitate ability to quickly skip across parts of a definition of interest.

Furthermore, a visualization may be interested in deliberately interrupting readability, given the appropriate application. The ideal exemplar here is Tallman lettering, used to differentiate among similar sounding medications.

(For more info and examples, see, e.g. Victoria Squire et al’s: Doing it Right with Type; Beier’s Reading Letters, Designing for Legibility; Walter Tracy: Letters of Credit; Isabel Gauthier et al, Font Tuning associated with expertise in letter perception)


About richardbrath

Richard is a long time visualization designer and researcher. Professionally, I am one of the partners of Uncharted Software Inc. I have recently completed a PhD in data visualization at LSBU. The opinions on this blog are related to my personal interests in data visualization, particularly around research interests related to my PhD work- this blog is about exploratory aspects of data visualization not proven principles.
This entry was posted in Font Visualization, Legibility, Text Skimming, Text Visualization. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s