Typography
Get guidance, examples, and code to enhance readability through consistent text styles and hierarchy.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Best practices
- Avoid using pure visual styles to convey structural knowledge or indicate relative importance.
- Ensure a color contrast ratio of at least 4.5:1 for text, informational images, and images of text to their backgrounds. For text that is 18 point or 14 point bold or larger, maintain a ratio of 3:1.
Text spacing
In content implemented using markup languages that support the following text style properties (user agent default styles, author styles, user styles), ensure no loss of content or functionality by setting all of the following without changing any other style property:
- Set line height (line spacing) to at least 1.5 times the font size.
- Set spacing following paragraphs to at least 2 times the font size.
- Set letter spacing (tracking) to at least 0.12 times the font size.
- Set word spacing to at least 0.16 times the font size.
Note: For human languages and scripts that do not use one or more of these text style properties, conform using only the properties available for that language and script combination.
All capitals
There are no specific WCAG guidelines on the use of ALL CAPS. Opinions vary on their use among users with cognitive disabilities, non-sighted, and low vision. The style guide in the content foundation recommends using sentence case (capitalizing the first letter of each title, label, phrase, or sentence, while still capitalizing proper nouns).
Cognitive disabilities
Users with cognitive disabilities might find it difficult to read due to indistinct word shapes instead of distinctive word shapes. For instance, compare the word shape of “CONTACT US” to “Contact Us.”
Non-sighted
Screen readers announce text letter-by-letter only when a word cannot be formed from the combinations of letters. For example, a screen reader may read the uppercase text “CONTACT US” as “Contact U. S.” because it interprets the uppercase “US” as an acronym for “United States.”
Low-vision
Users with visual impairments might find words in all capitals more legible when zoomed in or viewed from a distance, as ALL CAPS appears relatively larger in font size than normal text.