Attention-grabbing style: typography to grab (and hold) your reader’s attention

In March, the most-read page on our website was a voter guide on how to use color effectively. That, as well as ongoing work in several states to redesign voter-facing materials, got us thinking about the many options out there to grab your reader’s attention, and guide them towards the most important details in a text.

We conducted a review of available research into design elements that can help, or hurt, convey important details to a reader. When looking, we focused on research that tested short texts, small digital screens, and forms (an instance where the user focus is on doing, not reading). Here’s what we found about 4 different typography choices:


Bold

When to use bold: to emphasize information and draw the reader’s attention

  • Readers are often sensitive to the weight of a type, which makes bold an effective stylistic choice to call attention to important information [1]
  • Plainlanguage.gov recommends using bold for emphasis (not underlining) [2]
  • But be careful, too much emphasis can be worse than none, so save bold for important words, phrases, and dates


Underlining

When to use underlining: in digital documents to make links more visible

  • Underlining can make text harder to read by running over descenders (like j, p, and y) and adding extra “noise” to the page, making it a poor choice for calling attention in most cases [3]
  • In digital spaces, only use underlining for links because this is a strong and familiar convention [4]
  • Readers may think that a link is broken or missing if they see text online that is underlined but not hyperlinked

When underlining hyperlinks, keep the following in mind:

  • Colors other than blue can be used for links as long as they stand out from the body text; be sure to test that your color choice has enough contrast for accessibility using one of these contrast tools
  • If you don’t have a particular reason to prefer another color, we recommend blue as the safest choice [5]
  • Navigation menus and lists, especially on the top or sides of the page, don’t require underlining because their locations identify them as links [5]


Italics

When to use italics: for parenthetical information, like citations of laws [2]

  • Low vision readers often prefer non-italic type, which makes italics a poor choice for calling attention to information [1]
  • Italics are often used within the body of a text to emphasize a word or phrase [3]
  • Italics do not work well for long paragraphs of text
  • Choose an italic with minimal decoration and difference from the roman font in the same family (or use an oblique font that is slanted to the right, but without embellishments)


All caps

When to use ALL CAPS: never

  • Mixed case is the most familiar form of text in modern English reading, and deviating from the familiar slows down reading speed and comprehension [6]
  • Reading speed and comprehension are affected by the shape of the words as a whole, and eliminating ascenders and descenders also eliminates variations that help with recognition [6]


Conclusion

Typography is more than the 4 stylistic choices outline above: you can make any font illegible by making text too small, choosing colors without enough contrast, reducing or expanding the line spacing, or using extremely long or short line lengths.  This means that there are few hard-and-fast rules for typography, and the suggestions above are just suggestions. Parting thoughts before we wrap up:

  • Choose just one form of emphasis, not (for example) bold + italics + all caps + color
  • Consider the entire presentation: relative size of text, placement on the screen, white space, etc
  • Too much emphasis can be worse than none, with every element trying to compete for attention
  • Choose fonts that display well on digital screens, especially in small sizes

Now that you’ve gotten their attention, the way to keep it is with clear, useful, accurate information.


Resources

[1] Shriver, K. A. (1996). Dynamics in Document Design: Creating Text for Readers. John Wiley and Sons.

[2] Plainlanguage.gov. (n.d.) Guidelines: Design for Reading. Retrieved April 15, 2021.

[3] Lupton, E. (2010). Thinking with Type (2nd Edition) Princeton Architectural Press.

[4] Redish, J. C. (2012). Letting Go of the Words: Writing Web Content that Works (2nd Edition) Morgan Kaufmann.

[5] Loranger, H. (2015, March 8) Beyond Blue Links: Making Clickable Elements Recognizable. Nielsen Norman Group

[6] Larson, K. (2018, February 5). The Science of Word Recognition. Microsoft.

This was originally published in our Civic Designing newsletter. Subscribe on Mailchimp to get election design tips delivered to your mailbox.