Accessible & inclusive typography

This is the accessible typography excerpt from our full-length lesson: advanced typography on the web. So if you haven’t checked that out, feel free to watch the full version for free on Webflow University — in the 101 Crash Course.

Let’s move on to accessibility. And we’ll cover a lot of characteristics of more inclusive design here — these are all important things to consider when designing for the web:

And we’ll do nine of these here.

First is font legibility. Thin fonts were a huge trend back in 2013 or so. But let’s push this to an extreme to prove a point: fonts that are ultra thin are extremely difficult to read (not just in headings, but especially in paragraphs). This is also the case with uneven weight distribution — there are these kinds of characters that aren't very legible. So. Consider how legible your fonts are. 

Second is alignment of text (especially as it relates to paragraphs). Something to consider here, this is pretty big is that a jagged or uneven “rag”, in typography this is a rag. The whole thing can create a sort of disjunct reading experience. And this is really evident on centered text, because that jagged alignment, this kind of “rag” makes it really tough for the reader to follow the text from line to line. So it helps to consider alignment and how that alignment contributes to legibility.

Next is all caps. Languages that distinguish between capitalized and lowercase letters are often far more legible when written in sentence case or Title Case — that is where you write out the text by using capitalization only where it’s needed or expected. That’s because ALL CAPS can can introduce a heavier cognitive load for the reader, especially in longer paragraphs. Consider limiting the use of all caps on longer strings of text as you’re designing and iterating on your typography.

Number 4? Underlines. There’s an expectation on the web that underlined text means that thing is a hyperlink. If you want to or you need to draw emphasis, consider italicizing or bolding it (or even making stylistic changes by wrapping things with a span, as we covered earlier in this lesson). 

Number 5 is contrast. This one’s huge, and we can ALL do better here. Contrast (in this context) is the measurement of the difference between background and the foreground. Low contrast would be somewhat lighter gray on somewhat darker gray. Or maroon on red. Or purple on pink. Or, in this extreme example (retina warning), pure red on pure blue. You can use a contrast checker (there are tons of these available for free) to input or measure your foreground color (the text) against the background color (usually a solid color, or gradient, or maybe an image). Now...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.

Next up is characters per line. We like to look at Stripe’s documentation as a great example here. It’s legible, and it uses a container to constrict how far the text goes horizontally. If that container width didn’t exist, someone’s eyes would have to travel really far from left to right — much easier to track with a container. And like we covered earlier, one way to do this is to set these limits on the maximum width of a text element...to however many characters we want in a line. (60 CH) is equal to 60 zeroes on whatever font you’ve selected. 

Then we have line height. Here’s a line height of 1 (we’re choosing the unitless option — the hyphen from the dropdown). That means that (whatever the font size is), we’re basically saying the height of each line of typography is equal to 1 times that font size. Way too close. At minimum, 1.25 is a tiny bit of breathing room, but more space between each line of text makes it much less heavy looking, and much easier to track the end of one line and the start of the next. So consider line heights as you’re optimizing text for legibility.

Next is the penultimate note on the topic: clearly-defined links. Here’s a pattern we see a lot: To learn more and download this proposal, click here. Emphasis on here. Because that's the link. But it’s not actionable. (Technically it IS; you can click it; but the link doesn’t describe the action.) Instead, using a much more direct description of the action makes the link far more relevant: To learn more, download the proposal. In this case, the link directly describes the action that’ll happen when you go to the link. But there’s another reason this is important.

And that leads us to our last, and one of the most important points here: navigation through a document (through a webpage or even a full site) should be tested not just for what it’ll look like; but how you can interact with it using a screen reader. This is a great way to develop an understanding of how people can navigate your content. And if it’s just a link that says link, here’s what someone hears if, for instance, they’re tabbing through the document. 

[VoiceOver] VoiceOver on system preferences

[VoiceOver] Entering screen reader example web content

[VoiceOver] Link here. Link. Link. Link. Link

And that’s a critical thing to consider when designing. Now — there’s tons to consider here, and we’re adding more and more teaching to Webflow University on the topic of accessibility and inclusive design, so keep checking back for more and more on the topic.

But that’s our last point on the topic. Always consider the legibility of your typefaces, consider how text alignment affects readability, same thing with all caps — consider limiting your use of underlines so they’re only associated with links, think about contrast as it relates to legibility and the searing of a user’s retinas, keep an eye on the length of each line and the space between each line (line heights), think about active, descriptive text when creating links, and always consider how your design is interpreted from all different kinds of browser experiences (including utilities like voiceover).

That’s an overview of some of the considerations to create more inclusive, accessible typography for the web. Again, check out our full 101 Crash Course on Webflow University — free for anyone to learn all about web design, web development, and time travel.