Typography

Fonts

Avoid using more than 2 or 3 font faces in any given piece of content. This is best for keeping content more organized, more streamlined, and more coherent.

Using a limited number of fonts is not specific to disability issues, and is not an accessibility concern per se. It is, however, a good guideline to follow in typographic terms. Using too many fonts can clutter the document and make it more confusing.

Font Types

Poppins is our main font. Up to 1-2 additional font faces from the provided list may be used.

Web and Digital Fonts:
  • Verdana
  • Tahoma
  • Trebuchet MS
  • Georgia
Print Fonts:
  • Times
  • Times New Roman

Note: When designing visual content, you may use a more artistic font, however best judgement should be used to make sure it's easy to read and decipher.

Why Font Matters:

The words

Font size

Main body text should be at least 16px. Visitors must be able to resize all text on the page up to 200% of its original size.

There is no official minimum font size for web accessibility, it is generally agreed upon that 16px for body text is a good starting point.

Best Practice

Most browsers allow users to enlarge or shrink the font size according to their preferences.

Relative Units v. Absolute Units

For development purposes, it is best to use relative units (such as percents or ems) to specify font sizes rather than absolute units (such as pixels or points). This provides much flexibility in modifying the visual presentation using CSS.

Accessibility

Users with low vision often alter the settings of their browsers to accommodate their needs. Some users use screen enlargement software to accomplish this task. It is important that your design accommodate increased text sizes without loss of readability or functionality.

Note: For accessibility, because modern browsers adequately resize text regardless of how the size has been defined, it is not vital that text sizes be defined in relative sizes.

Bold and italic

Two elements in HTML create a bold text appearance, the <b>element and the <strong> element. The <b> element has no semantic meaning. The <strong> element means "strong emphasis." If the purpose in using bold text is to emphasize content or give its meaning importance, the <strong> element is appropriate. If the purpose is to simply present fatter text, the <b> is appropriate as this is purely cosmetic or stylistic. In general, purely stylistic changes should be defined using CSS. The styles for creating bold text using CSS is font-weight: bold.

Similarly, <i> (for italics) and <em> (for emphasis) are also used. The <i> element (like <b>) is purely stylistic and can also be presented using CSS font-style: italic, whereas <em> presents semantic emphasis and should be used to give additional importance or emphasis to text content.

Capitalization

Refrain from typing sentences or phrases IN ALL CAPITALS. It may make sense under some circumstances, but only rarely.

Accessibility

Screen readers generally do not read text differently if it is in all capital letters, so listeners will not know that the author is giving emphasis to the text. Screen readers may, however, change the voice inflection with exclamation points, <em>, or <strong>.

In some cases, a screen reader may interpret ALL CAPITAL text as being an acronym and may read it as letters rather than words.

For example, a screen reader may read the uppercase text CONTACT US as "Contact U. S." because it interprets the uppercase "US" as being an acronym for "United States".

Best Practices
  • In cases where the default is all capital text make sure that you are still capitalizing the correct letters even if they all appear the same.
  • Lengthy segments of capitalized content are more difficult to read. They also may give the impression that the author is shouting.
  • If the author really does want to convey a shout, an exclamation point and/or use of <em> or <strong> may be better.
Rules of Thumbs

In terms of font accessibility, there are a number of principles to keep in mind:

  1. Use real text rather than text within graphics.
  2. Select basic, simple, easily-readable fonts.
  3. Use a limited number of fonts.
  4. Ensure sufficient contrast between the text and the background.
  5. Avoid small font sizes.
  6. Use relative units for font size.
  7. Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS.
  8. Don't rely only on the appearance of the font (color, shape, font variation, placement, etc.) to convey meaning.
  9. Avoid blinking or moving text.