Text Formatting for Emphasis

Examples of formatting text to emphasize content.

Although screen readers don’t generally acknowledge these forms of emphasis, it is still acceptable to use these because these visual information cues help sighted readers.

Text Formatting

Bold

For emphasizing key words and key concepts.

  • Don’t format an entire paragraph as bold.
  • Don’t bold more than two to three lines of continuous text.

Website Example Tenon.oi: Single keywords are formatted with bold. This helps your reader skim the page and find these important words quickly.

Example of formatting keywords in bold for emphasis from the Tenon.oi website. Image description precedes this image.

 

Website Example WAI.org: Short phrases emphasizing key concepts are formatted with bold. This helps your reader skim the page and find important ideas quickly.

Example of formatting short phrases of key concepts in bold for emphasis from the WAI website. Image description precedes this image.

Website Example WAI.org: An important sentence is formatted with bold. This is only effective if you have one or two instances of this on a page. Remember, don’t format more than two to three lines of text in bold.

Example of formatting a sentence in bold for emphasis from the WAI website. Image description precedes this image.

 

In the following paragraph, there is too much bold, so nothing stands out as important because it all looks the same. Also, you can’t emphasize text that is already emphasized.

Nevertheless, some writers —let’s call them overemphasizers—just can’t get enough bold and italic. If they feel strongly about a point, they won’t hesitate to run the whole paragraph in bold type. Don’t be one of these people. This habit wears down your readers’ retinas and their patience. It also gives you nowhere to go when you need to emphasize a word. That’s no problem for overemphasizers, who resort to underlining bold text or using a lot of bold italic. These are both terrible ideas. – Matthew Butterick

 

Italic

  • Use sparingly because it is hard to see and read on screen.
  • Best used for formatting for writing style guide purpose,e.g. book titles, foreign words,citations, quotes, etc.

Website Example Tenon.oi: Which do you notice first, the bold text or the italic text?

Example of formatting a sentence in italic, from the WAI website. Image description precedes this image.

Font Size

You can make text large to emphasize it, just don’t use a heading tag! Most CMSs, LMSs, and blogging platforms have a big or large text option.

Website Example Knowbility.com: Large fonts are often used for leading paragraphs in articles or to summarize a topic. This is the one scenario where you might be able to use a font that is different from the main body text.

Example of formatting a short paragraph in a large font for emphasis, from the knowability.org website. Image description precedes this image.

Links

Because links are usually a different color, may have an underline, or may be bold, they naturally stand out in text. Make sure they don’t compete with other content you are trying to emphasize.

Website Example Tenon.oi: Linked text can actually be more overpowering than regular bold text, so be careful where you place them.Example of a link text next to regular text formatted in bold for emphasis from the Tennon.io website. Image description precedes this image.

Container Formatting

Border

You can add a border to the container, just make sure it is not to bold and distracting, you don’t want it to compete with your text. Combine with Content Cues to make them more accessible.

Website Example a11y Project: A border changes a simple paragraph into an emphasized announcement. Adding the phrase “We’re redesigning” helps screen reader users understand why the content is important.

Example of adding a border to a an alert box to bring emphasis to its content, from the A11y Project website. Image description precedes this image.

Background Color

You can give the container a background color to emphasize content; just make sure your font size, font color, and background color meet the WCAG Level AA requirements for accessible color contrast.

  • Text color must have accessible contrast with its background color.
  • Don’t rely on color alone. Combine the color with bold, a larger font size, and or an icon to help it stand out if a reader can’t see the color.
  • Combine with Content Cues to make them more accessible.

Website Example US Web Design Standards for Designers website: adding a background color changes a simple paragraph into an emphasized announcement. Adding the word “notes” helps screen reader users understand why the content is important.

Example of using a background color to bring emphasis for a paragraph. From the US Web Design Standards for Designers website. Image description precedes this image.

Leave a Reply

Your email address will not be published. Required fields are marked *