Accessibility and inclusive design are important to consider when designing for the web. Let’s look at some easy places to start making the web 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.

This is also the case with uneven weight distribution in a font — there are these kinds of characters that aren't very legible.

Make sure your font is no smaller than 16 pixels 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 capitalized 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 capitalization 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 italics or bold text (or make stylistic changes by wrapping things with a span).

Color contrast

Contrast is the measurement of the difference between background and foreground. Low contrast would be something like somewhat lighter gray on somewhat darker gray. 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 on the web.

You can use Webflow’s built-in Color contrast checker to assess the contrast ratio of your text against its background. And you can check the color contrast of your designs and learn more about best practices with these excellent color contrast tools, too:

• TPG’s Color Contrast Analyser
• tanaguru contrast finder
• ‍WebAIM’s Contrast Checker
• Colorable