Accessibility

Accessibility and inclusive design are important to consider when designing for screens. Let’s look at some easy places to start making design more accessible and inclusive when it comes to typography.

Font legibility

Thin fonts are extremely difficult to read — not only in Headings, but especially in paragraphs. Make sure your font is no smaller than 16 pixels (1rem) for body text.

Alignment of text

Uneven vertical alignment on chunks of text (when text is centered, for example) can create a difficult reading experience. A jagged alignment makes it tough for the reader to follow from line to line.

All caps

Languages that distinguish between capitalised and lowercase letters are often far more legible when written in sentence case (e.g., “Sentence case”) or title case (e.g., “Title Case”). Essentially, you write out your text only using capitalisation where it’s needed or expected. All caps can introduce a heavier cognitive load for the reader, especially in longer paragraphs. Screen readers announce all caps as individual letters, interrupting the flow and making it difficult to understand. Consider limiting the use of all caps on longer strings of text.

Underlined text

There’s an expectation on the web that underlined text indicates a hyperlink. If you’re trying to draw emphasis, consider using different UX tactics.

Color contrast

Contrast is the measurement of the difference between background and foreground. Low contrast would be something like somewhat lighter grey on somewhat darker grey. Or maroon on red. Or purple on pink. High contrast doesn’t mean we stop considering other things like font weight (a super thin font that happens to have high-contrast against the background is still super illegible.) But higher contrast usually leads to increased legibility, which is a great thing. And you can check the colour contrast of your designs and learn more about best practices with these excellent colour contrast tools:

• TPG’s Color Contrast Analyser

• Tanaguru contrast finder

• WebAIM’s Contrast Checker

• Colorable

Characters per line

Set limits on the maximum width of a text element to however many characters you want in a line using CH. (66 CH is equal to 66 zeroes in whatever font you’ve selected). We recommend 66 characters per line, like this example.

Line height

Text with adequate line height makes it much less overwhelming and easier to track across and down a page. Your line height should be at least +8px the font size for paragraphs and blocks of text.

Use clear, descriptive, sequential headings

Unstructured web content is overwhelming and unusable for everyone, but especially for people with cognitive disabilities and those who use screen readers. Headings organise content and guide readers through your site. Your headings should make it easy to skim a page and get a clear purpose and overview of content without having to read body copy.

Use responsive text sizes

Browsers provide a built-in way for site visitors to adjust the base text size for websites, zoom in to content, and enlarge sites to a more comfortable viewing size. However, text styled in pixel (px) units ignore the browser’s text size setting, preventing site visitors from enlarging text for more comfortable reading and creating a poor user experience. Adding a “viewport” meta tag with the values “user-scalable=no” or “maximum-scale=1.0” can also prevent users from zooming in to view content.

To create an accessible reading experience, use root ems (rem) units for text size. Rems are relative to the base text size defined by the site visitor and respect the site visitor’s browser preferences.

Resise

People with low vision sometimes resize text larger than the 16px default. When we set font sizes in absolute units, like px, the page doesn’t always respect the user’s preference and instead shows the text at the font-size authored.

Let’s look at some best practices to make sure users can resize text on your site. WCAG reference:1.4.4 Resize text

Allow zoom without forcing horizontal scrolling

People with low vision use zoom to scale content, sometimes up to 400%. As they zoom, content should reflow vertically (as a column) and remain fully legible and logical without a need for horizontal scrolling.

The div that contains this paragraph has a width of 800px. This causes text to overflow horizontally at a 400% zoom.

The div that contains this paragraph has a width of 80%, so content reflows on zoom and does not overflow horizontally.
‍
Here are some considerations to keep in mind to make sure reflow doesn’t force horizontal scroll.
‍
Use relative units (like percentages and viewport width) to set width on text and images
Check all breakpoints to make sure content doesn’t reflow horizontall.
‍
"Supporting the reflow of content is also known as 'Responsive Web Design'. It is enabled by CSS media queries which reformat the web content for different viewport widths (at particular break points) in order to provide optimised layouts for mobile devices such as tablets or smartphones. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page."

Clearly-defined links

Your links should be meaningful and actionable. Screen readers can give visitors an overview of links on a page. When link text is read out of context, it should tell readers: What the link is, where the link is taking them.