How to choose a web accessible typeface

At Cogapp we recently launched a new website and visual identity for The Peck Collection; an Ackland Art Museum collection of mostly 17th-Century Dutch drawings. Instead of using the Ackland’s existing branding to frame this project, we want to give this special collection its own Dutch flavour.

Like any new website or visual identity, a good rule is to start with typography. Whether a brand guideline is already established, or the canvas is blank, typography is the foundation that supports the project — a typeface is the visual tone of voice of the brand.

So how do I choose a good typeface?

Often a typeface is chosen based on what appeals to the designer and is a good fit for the project. Web accessibility is often an afterthought, once the fun task of typeface selection has already been done. On this occasion, I was prompted to extend my understanding of typeface accessibility by our client, who expressed type accessibility as a key requirement.

On presenting an initial design route for The Peck Collection visual identity and website, I was asked, is this font accessible? I could have responded with something like, we can ensure that the text on your website adheres to WCAG 2.1 for contrast ratio requirements… but I know that wouldn’t have been a good enough answer. I wanted to feel confident that my choice of type was well informed.

I watched a really interesting video by The Readability Group talking about the development of the BBC Reith type family. Their mission is to optimise typographic accessibility.

They define the 3 pillars of accessibility as:

1. Emotional
   Is it appealing?
2. Technical
   Was it built correctly?
3. Functional
   Does it work?

The sweet spot

The example David uses in ‘Don’t Believe The Type!’ is a blackletter font. Stylistically exciting, however it would fail functionally because we are not used to reading the shapes of the letterforms anymore. That’s not to say blackletter shouldn’t be used for a logo and headings if it is what really suits the brand. But if used for paragraph text, you will give your audience a really hard time! This is where font pairing might be useful, combining and contrasting an expressive display typeface with a more legible typeface for smaller body text.

Note: This article is based on guidance from The Readability Group about choosing the right typeface for my project and adhering to good typographic practice. It does not touch on rigorous data-driven user testing as demonstrated in their development of the BBC Reith typeface. My focus is on making an informed typeface selection, not creation, user testing or font pairing.

Emotional accessibility

My starting point for The Peck Collection was to find a typeface that was appealing and contextually appropriate for the project. I narrowed my choices down and looked for typefaces that were classified as ‘Dutch Old Style’ and ideally created by a Dutch type foundry. After whittling it down, I selected two typefaces for comparison, Haarlemmer published by Monotype, and Custodia released by TYPE BY.

Janson was another close contender, however I wanted to explore less ubiquitous options. Custodia was a clear winner in terms of character because the letterforms are more expressive. The letters retain a human touch, the craft of a master hand. A complement to the artist drawings in the collection.

Another consideration for typeface selection is appropriateness to your audience reading level. As Gareth Ford Williams of The Readability Group explains,

Technical accessibility

Any reputable type foundry should build the font files correctly, therefore taking care of the technical pillar. My typeface choice Custodia is from a reputable foundry and available in the desired formats, OTF CFF, TTF, WOFF and WOFF2.

Custodia also offers stylistic sets that allow the typesetter to choose quirks that give more character, e.g. angled hyphens, twirly uppercase ‘Q’.

Note: these features can actually diminish readability, however used sparingly will give a communication more flourish and appeal. This is an optional setting. Stylistic sets are a tricky one to place, I think there is a crossover here between both the technical and emotional pillar. They are definitely something I look out for when choosing a typeface as they can add distinction.

Custodia supports the Latin Extended 1 character set, which is a valuable tool for composing multilingual Latin-script text.

Functional accessibility

I found it helpful to start with a distinction between legibility and readability, when assessing if my typeface choice was functionally accessible.

Note: I’ve summarised information from several sources to provide the following guide for my project. It is not a comprehensive list and I am not an accessibility expert, however I hope that it is in some way useful to see how I applied this research to make an informed decision.

Legibility: the correct recognition of one glyph from another when reading (distinguishing between characters). This is determined by the typeface designer. This is out of my control, however I can choose what typeface to use in my project.

Readability: how type is arranged (typeset). This is controlled by the typesetter: e.g. the website designer when laying out a webpage in Figma/XD/Sketch, or the book designer using InDesign.

The above definitions of legibility and readability are sourced from Ilene Strizver.

Factors contributing to legibility

• Asymmetry: no mirroring between similar letters improves legibility, ‘d’ and ‘b’, or ‘q’ and ‘p’, should be obviously unique in shape and have no ambiguous characteristics.
• Imposter letter shapes: some typefaces have glyphs that are virtually identical for multiple letters. Uppercase ‘I’, lowercase ‘l’ and number ‘1’ need differentiation with distinct features.
• Distinguishable letters/open forms: characters ‘c’, ‘o’, ‘e’ or ‘a’ can be hard to distinguish from one another, especially people with vision impairments. When the shapes and holes are too closed (smaller aperture), then they can appear filled in. More open counters on characters increase legibility.
• Sequential/adjoining letters: The letters ‘r’ and ‘n’ together can look like ‘m’. A visible difference in form between the ‘r’ and ‘n’ can aid legibility.
• Variable character width: letters that are not similar in width are easier to distinguish from each other.
• Difference between cap height and ascenders: raised ascenders above cap heights and other type features can improve individual character recognition.
• Weight: light and heavy weights are more difficult to read. Book or regular weights are best for body text.
• Stroke contrast: extreme stroke contrast (thick to thin strokes on letterforms) reduce legibility at smaller sizes.
• x-height: height of the lowercase in proportion to the caps. The taller the x-height, the more legible the typeface tends to be.

Factors contributing to readability

• Type size: when setting text, the smaller the size, the more challenging it can be to read. No smaller than 16px is recommended for body text on the web, if the font has a small x-height then 16px might not be enough. Larger body text, 18px+ is becoming more commonplace.
• Type case: all caps for lengthy text is not recommended due to the lack of ascenders and descenders which enable character recognition.
• Text alignment: justifying text is not recommended because it creates uneven word spacing and hinders readability. Left-aligned text is best practice if you are using a left-to-right reading pattern.
• Line height: tight line height impacts readability negatively for body text. Somewhere between 1.15 and 1.5 (115–150%) is a good target, however anything up to 200% can work depending on the typeface. Varying x-heights and ascender/descenders between typefaces will influence how the white space appears between lines of text.
• Paragraph spacing: adequate spacing after paragraphs (bottom margin) aids readability. Too little and the user won’t be able to distinguish one paragraph from the next. Too much will interrupt the flow of reading.
• Letter spacing: known as tracking in print. For smaller text sizes, it’s usually a good idea to add a little spacing as the default is often too tight. Increased letter spacing aids readability. Letters ‘ol’, ‘lo’ or ‘vv’ can become adjoined otherwise and start to look like ‘d’ ‘b’ or ‘w’. Where text is set in all caps e.g. overline or sometimes buttons, extra spacing maybe needed.
• Optical adjustments: as text size increases to large headings, the space between glyphs and words often appear more open and may need to be tightened.
• Word spacing: the space inbetween words shouldn’t be too little that the words run into each other or too much that they cause you to hesitate. Most often this doesn’t need much adjustment, however not all fonts are the same. A useful guide for print that can also be applied online is the width of a lowercase n of the font.
• Line length: for best readability aim for a line length between 45 and 75 characters. Tip: No more than 80 characters if you want to reach the golden WCAG AAA.
• Contrast: enough colour contrast between the type and its background. Text (below 24px) has to follow a contrast ratio of at least 4.5:1, with the exception of a large-scale text (19px bold or 24px reg) that should have a contrast ratio of at least 3:1.
• Pure black on white: and vice versa, can cause eye strain over long periods of time. Instead, choose a dark grey.

Note on text spacing: WCAG requires that no loss of content or functionality occurs when the end user overrides page styles for text line spacing to 150% of the font size, paragraph spacing to 200% of the font size, letter spacing to 12% of the font size and word spacing to 16% of the font size. Ensure that the website page text can be modified without it disappearing or overlapping other page content.

Type comparison

Both typefaces Custodia and Haarlemmer have features in their design that would be deemed accessible from a legibility point of view; asymmetry being one of the main features that will enable users to distinguish characters from one another. The legibility list I put together is useful to determine if a typeface is legible and functionally accessible, both typefaces are.

Haarlemmer and Custodia are a similar classification of ‘Dutch Old Style’ (or based on Dutch Old Style) so are suitable for The Peck Collection from a stylistic point of view.

In terms of readability, this is mostly in the hands of the web designer/typesetter. A web designer can control type size, line spacing, paragraph spacing, letter spacing, word spacing, line length, colour and colour contrast… the list goes on. A web developer can further ensure that website page text can be overridden without it disappearing or overlapping other page content.

A comparison was done internally using a real passage of text from the project (not Lorem ipsum), viewed on screen via live preview. The typefaces were displayed at comparative x-heights to accommodate for overall size differences, rather than at the same pixel size; not all typefaces display the same size! The same weight in both fonts (book weight) was used and then I created two page layouts to review if both passages of text provide a good reading experience.

Custodia definitely has an edge when it comes to flair. As a front for a visual identity system, Custodia wins because it also looks great in Bold at display/heading sizes. This is due to the way the letters have been crafted, it is more playful, quirky, not-quite-so rigid. It also works at smaller sizes in Book weight and therefore a good fit for The Peck Collection; the organic curves of the glyphs combine to create a flowing, organic reading experience, even before any typesetting (testament to the typeface designer Fred Smeijers). The letterforms are more expressive and match the fluidity and humanity of the artist’s hand more closely than the other candidate.

However a next step would be to conduct a more rigorous user testing session with a wide range of people in order to strengthen the case for or possibly against using Custodia.

Final thought

As designers we have to strike a balance between the emotional and functional to ensure the success of a project. If the focus is too much on functional accessibility, then the project can be compromised because the overall experience might be dull. If the focus is all about emotional impact, then we risk neglecting our audience. Other factors, such as client/project requirements, budget, time and access to resources, all play a part in how extensively your team can invest in the process. At the very least, having an understanding of typeface accessibility empowers us to make informed choices when it comes to typeface selection.

Read more about Cogapp’s accessibility practices, our work on The Peck Collection and our other project case studies on our website.

Get in touch to speak with us about your next digital project.