Read Here, and Here, and Here, but Not There: Using Text Emphasis

Posted

Text emphasis helps the reader navigate the document. There are several methods to emphasize text, including bold, italics, underline, size, case, colour, etc.* Which approach is best? Well, there is no one best approach. Using a combination of methods strategically will improve readability, but using too many approaches in the same document will confuse the readers.

One thing to remember is that not everything in the document needs to be emphasized. If everything is marked important, then nothing is significant. Limit text emphasis to 10–15% of the document (Trayers, 2019). Text emphasis is not the same as heading styles. Heading styles structure a document, while text emphasis highlights elements in the document.

The Big Three: Bold, Italics, and Underline

Bold helps readers skim and locate keywords and phrases; however, the text becomes overwhelming when bold is used for more than three lines. Bold is not the same as the “Strong” style in Microsoft Word. More on this below.

Italics seem to have received a bad reputation because the technique is harder to see and read on screen; however, instead of avoiding italics, think about its purpose. Italics are useful for indicating foreign words or publication titles. When using italics for emphasis, consider using italics in combination with another technique such as colour or size. Italics is not the same as the “Emphasis” style in Microsoft Word. Bold <b> and italics <i> are visual techniques, while “Strong” <strong> and “Emphasis” <em> are semantic techniques. Screen readers can read such “Strong” and “Emphasis” texts in a different voice.

Underlines are often associated with hyperlinks. Try using underlines in combination with another technique to differentiate from hyperlinks. Interestingly, linked text can detract attention from bold text. Pay attention to the placement of bold text and underline/linked text. Limit the number of words hyperlinked to minimize the amount of text emphasized.

Supporting Partners: Size, Case, and Colour

Size can differentiate passages within the document; however, font size is not the same as heading styles. Too many alternating sizes are confusing. Consistent differentiation in size coupled with either the bold, italics, or underline technique can help readers visually scan the document.

When it comes to letter case, many of us know to avoid ALL CAPS. Caps or uppercase are aggressive and are difficult to read due to the crowding effect. Title case, when the first letter of each word is capitalized, does not shout and offers space. The American Printing House for the Blind (2019) recommends the following numbered list (in order of usability) for text emphasis:

  • Title Case
  • Title Case bold
  • Title Case different colour
  • Title Case different colour and bold
  • Title Case bold and underscored
  • Title Case underscored
  • Lower case bold
  • Lower case different colour
  • Lower case different colour and bold
  • Lower case bold and underscored
  • Lower case underscored

There are several ways to incorporate colour in text emphasis. Try the text highlight, font colour, or shading (changes the colour behind the selected text or paragraph) functions. When using colours, check the colour contrast ratio (aim for WCAG 2.0 Level AA) using the WebAIM Contrast Checker.

Non-Visual Approach: Content Cues

Screen readers ignore many visual text emphasis techniques. One way around this problem is to use a non-visual approach, such as content cues. Content cues are keywords that signal importance. For example, introducing words such as “Important” or “Pro tip” highlights the upcoming passage’s significance. These keywords can also be inserted in the image’s alt text.

Read Here: Final Thoughts

A combination of visual and non-visual text emphasis improves readability and usability. Some final strategies to consider:

  • Be consistent. Use the same combination of text emphasis techniques if they serve the same purpose.
  • Look at the big picture. Zoom out and view the page as a whole—notice which elements pop out and which are buried in the overall picture.
  • Check for multiple modes. Use both visual and non-visual techniques when possible. Experiment with a screen reader, such as NVDA for Windows, to inspect text emphasis.

Good luck and have fun!

* This post does not delve into semantic markups. Refer to the Techniques for WCAG 2.1 document for guidance, especially H49: Using semantic markup to mark emphasized or special text (HTML).

Works Cited

American Printing House for the Blind. (2019). APH Guidelines for Print Document Design. https://www.aph.org/aph-guidelines-for-print-document-design/

Trayers, L. (2019). Accessible Emphasis. My Online Accessibility Notebook. https://edspace.american.edu/ltrayers/2019/11/15/accessible-emphasis/

Comments are closed.