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.
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.
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.
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.
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.
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
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.
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 1.5 times the font size for paragraphs and blocks of text.
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 one H1 per page that describes its purpose (or only use multiple H1s when a page truly has more than one purpose).
Nest headings in order (e.g., H3 under H2)
Use heading levels to show visual differences.
Use heading text just to be compliant — make sure it’s useful
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.
Style text size with rem units. People with low vision sometimes resize text larger than the 16px default.
Style text size with pixel (px) units.
Add the “user-scalable” or “maximum-scale” values to the “viewport” meta tag
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
Style text size with rem units. People with low vision sometimes resize text larger than the 16px default.
Use relative units like em, %, and viewport width/height (VH, VW) for all spacing and length properties.
Set body font size to 100% or 1rem, in order to respect the browser preference.
Use rem and em units appropriately for spacing units depending on if an element needs to scale based on the body or the inherited type scale.
Make sure viewport zoom isn’t disabled
Never use absolute units (px, pt) for lengths.
Don’t disable zoom. People with partial vision and low vision enlarge text to make it more readable.
Using user-scalable=”no” in the <meta name=”viewport” element blocks people from resizing text, and ultimately from using your site.
A meta viewport element tells the browser how to scale and control the page's dimensions, but zoom can be disabled as a result of its use.
Don’t set custom attribute to user-scalable=”no”. Remove the user-scalable="no"parameter from the content attribute of the <meta name="viewport"> element if it’s been added element
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."
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.
Embed links in clear, specific language that tells people where the link will take them and why they might want to go there. Indicate if a link will open high-bandwidth media like a PDF or video within the linked text
Embed links in generic terms like “more,” “this page,” or “click here”Link to raw URLs.
