Illegible type doesn’t communicate. It is a first order failure: when type can’t be deciphered the message cannot be delivered.
Legibility, Type and Glyphs
Traditionally, data visualization encodes with size or color or brightness. Legibility isn’t really a concern with these encodings. However, when complex small shapes are utilized, legibility is an issue. For example, you probably want clear legibility on the icons that differentiate between men’s and women’s restrooms.
Legibility is always discussed in any book on typography, but, unfortunately it isn’t discussed in the world of visualization. Borgo’s excellent state of the art report on glyphs doesn’t mention legibility and my previous papers and chapter on shapes doesn’t address legibility either (except in passing in a discussion regarding the potential for ambiguous icons which can be a problem of legibility or a problem of design or both).
Legibility is the degree to which different letters can be distinguished from each other. Legibility is important in data visualization because there are many cases where text is used, ranging from brief labels to highlighting keywords in long texts. Strobelt’s text highlight techniques, an otherwise great research paper, doesn’t consider legibility when testing techniques for highlighting words in text. Strobelt’s experiment simply required that subjects click on highlighted text in a field of surrounding text. The testers were not required to actually decipher the text. For example, Strobelt ranks drop shadows fairly highly as a technique for highlighting text:
The legibility of the letters should be required – the viewer may need to actually read the text. For example, a common use of highlighting is to indicate search terms and if multiple search terms are used then the viewer needs to differentiate between terms. Searching for “blue” and “blew” are two very different terms with similar letter and similar word shapes; therefore more easier to confuse with reduced legibility. Any highlighting technique that significantly impacts legibility will therefore fail this requirement.
Strobelt’s recommendation runs exactly opposite typographer recommendations. Most typography books don’t even discuss drop shadows. In those cases where they are considered, the recommendation is against. For example:
Type that has been (outlined and) shadowed automatically by the computer still shows up and in the most surprising places. Don’t do it. […] Most often it just looks cluttered and junky.
– Robin Williams, The Non-Designer’s Type Book
Squire’s book Getting it Right with Type: The Do’s and Don’ts of Typography provides some indication of the kinds of error that could result – such as run together risk. Run together risk is the risk that adjacent letters may be perceived as being joined creating a misinterpretation. For example an r followed by an n, if run together may be misinterpreted as an m. This risk of glyphs running together increases when a drop shadow is added. Suppose you quickly search through emails for Amie and Arnie: you’d want to not confuse the two. Here’s both with drop shadows in three popular fonts:
In short, when designing a visualization with fonts, legibility needs to be taken into account to avoid decoding problems.
There are many factors impacting legibilty including the intrinsic design elements of the particular font, how it is used and the environment it is used in:
Intrinsic Font Properties Impacting Legibility
The design of a font can impact its legibility. Certainly some advertising fonts may be more difficult to read.
Within the more common fonts, large loops, particularly on tight letters such as a, e and s can be more legible at smaller sizes, meaning that these fonts tend to have larger x-heights. However, large x-heights can have problems of ambiguity between the similar letters such as h and n, or i and l. This implies that there is a trade-off decision between large x-heights and some letter confusion.
As Squire and the Arnie/Amie example show, there is the potential for run-together of letters, and this can occur in some commonly used fonts such as Times Roman. Another issue is that some fonts may have design ambiguity between some letters, such as 1 I and l, for example, Helvetica; or a and o in Futura.
As implied here, there is not one font that is perfectly legible for all scenarios – font choice needs to be done in the context of use.
Font Use and Impact on Legibility
How a font is used in it’s application will impact legibility:
Font size is significant factor: once a font becomes too small, it becomes illegible. Rules for font size vary depending on the application and the medium. For example, print maps recommend 5-6 point with minimums at 3-4 point; old design guidelines for computers recommend 9 point minimum. While there are still many sites that recommend larger fonts for screens and mobile displays, my personal Android phone has a legible 3.5 font on the home screen.
Font contrast is the difference in brightness between the font and the background it is placed on. Black text on yellow is good, yellow on white is not good. For a time, Google search results varied both the color of the font, based on different kinds of metadata about the document; and varied the background based on keywords, resulting is some difficult to decipher combinations such as blue on purple:
Shadows are also a contrast problem. Drop shadows might make words standout from other words, but remove the contrast between individual letters.
There is a relationship between weight and contrast. For example, while a thin lightweight low contrast font may be difficult to read, it will be somewhat easier to read if the same contrast is used for a heavier weight font: e.g. cyan vs cyan.
Spacing, or more specifically negative tracking and/or tight leading, is a way to pack text more tightly by removing a bit of space between letters and/or between lines of text. Once text glyphs begin to touch each other, legibility is reduced.
Environment Factors Impacting Legibility
The environment in which a font is used greatly impacts the font choice. There are many fonts that are specially designed for specific uses.
Historically, the font Bell Centennial was designed to be legible at tiny sizes in telephone books printed on poor quality paper. To avoid ink rounding out corners, the font was uniquely designed with negative pockets on internal corners to capture ink from spreading out.
Highway signage needs to be legible under a wide variety of circumstances, such as snow, rain, night and glare. The font ClearviewHwy was specifically created for highway signs with many font design parameters evaluated including stroke width, counter size (the size of the enclosed portions in an alphanumeric glyph, such as the interior of an o or c), very large x-heights, tapers at joints and so forth.
For computer screens, the low resolution 72-96 PPI rectangular pixel array prevalent from the 1980’s through to late 2000’s coupled with early desktop printers required fonts designed for legibility as well. For example, Georgia and Verdana, designed by Matthew Carter for Microsoft, is a wide font with large x-height, large counters and wide letter spacing.
So What Does this Mean to the Visualization Designer?
Use a well designed font for the screen: personally, I currently like Source Sans Pro for various visualization uses (I like the clean simple glyph shapes that look good on screen and it is available in many weights, but I wish there was a condensed and expanded version too). Microsoft’s Segoe UI is a good alternative. Roboto comes in a variety of weights as well as a condensed version.
Consider the use case and medium: Is it largely used in paragraphs or short labels? Is it meant for desktop or mobile? Or is it meant for a glossy magazine or a newspaper. Validate that the design choices are legible. Don’t assume that Arial and Helvetica will work best.
To highlight text, to be on the safe side, stick with encodings that typographers have specifically designed to be legible and/or advocate: e.g. weight, italic, CASE, high contrast colors (such as black, navy and dark red on white). Avoid shadows or low-contrast color combinations (e.g. adjusting both foreground and background colors).
Finally, don’t confuse legibility with readability. Readability is a different topic and a subject for a future post.