Skip Navigation
SAI Sites

Your Visual Brand and Accessibility – Part 2, Typography

Typography text book on a desk with a website design screen on a laptop

In part one of this two-part series, we took an in-depth look at how to evaluate, refine and implement your organization’s brand colors online to ensure your website is fully accessible to all of your audiences. But, no conversation about web accessibility is complete without addressing typography. Likely, most of your website content is written text, meaning your website typography plays a critical role in how audiences perceive and interact with your organization and your brand.

Making a Mark

Historically, developing a brand identity involved designing a logo and building a complimentary color palette, iconography, photography style and typographic family that evoked the essence of an organization in a visual format. In a digital age with entirely new rules, brands must consider far more than how something looks, but also how it functions. The typography you select for your brand needs to be multi-dimensional, offering an instantly recognizable mark wherever it appears, while performing well in a digital environment for all users.

With thousands of fonts available for free or through licensing, how do you narrow down the selection? Take these factors into account:

Readability & Legibility

Your message is what matters most and your typography shouldn’t get in the way of making sure your audience can interact with your content on the web. People often confuse the term ‘readability’ and ‘legibility.’ While they may sound alike, they mean very different things, and both are important. Phil Garnham of Fontsmith explains the distinction:

 

“Legibility is concerned with the question ‘Can you recognize this letter or word?’ ‘Can you interpret and comprehend this word?’ Readability is concerned with ‘How comfortable are you in the reading experience?’ Accessible design is both legible and readable.” – Phil Garnham, Fontsmith

To relate, think of a common experience we all have with legibility - an eye doctor’s exam chart. The doctor is trying to determine which letters on the chart you can see most clearly. Depending on your vision, you may likely see the smallest letters on the bottom of the chart but may not be able to distinguish their shapes enough to identify them, thus making it illegible.

graphic of an optometrist's eye test chart

Alternatively, we could provide two very legible paragraphs of text, but each styled with different fonts. In this example, it is likely that it takes a little more effort to read the paragraph on the left, whereas the paragraph on the right should be easier and more comfortable to read. The paragraph on the right would work well for accessibility because it is both legible and readable.

Wikipedia's definition of typography display in a less legible script font vs a san serif font

There are key characteristics of the both the letterforms themselves and the way typography is formatted that impact how legible or readable your content will be.  Legibility is affected by the overall shape of the letters, the proportions of white space in each letter and the height of the letters on a line. Readability is affected by the font size, the spacing between each letter and between lines of text, the weight and style of the fonts used, the use of upper- or lower-case letters and the contrast of the text over the background behind it.

For those who take their typography seriously, there is a great deal that can be learned by dissecting the anatomy of a font. We’re not going to dive too deep into specifics, but if you are interested in exploring more on the topic, Typedia offers a thorough breakdown.

At a glance, what you will quickly see when looking at different fonts next to each other is that there are many details that distinguish them.

Typography graphic Graphic showing different font styles in the same word -- details

The shape of the letters helps characterize which font family they fall into. For example, we have serif fonts and sans-serif fonts which are distinguished by the presence of serifs, or strokes at the top and bottom of some letter forms. It is a long-held belief that, in print, a serif font makes it easier to read while sans-serif fonts have held the standard for readability in digital environments. There are studies that contradict these ideas and countless numbers of new fonts that are being designed specifically for accessibility on screens. In other words, each font should be analyzed on an individual basis.

typography graphic demonstrating what a san serif font is and what a serif font is

Negative Can Sometimes Be Positive

Another important element of the letter shape is the negative space we see in letters like a, p, g and o. As you can see, different fonts have different amounts of white space in these areas. As well, when we change the weight of the font from normal to bold, for example, the bold effect can reduce the amount of whitespace. Typically, we don’t use bolder fonts at small sizes because it reduces the legibility of the font due to this decrease in white space.

typography graphic demonstrating the concept of negative space

Details Matter

One last note about letterforms, but certainly not least, it is important to work with fonts that have unique shapes for commonly confused letters i, I (lowercase and uppercase i) and l (lowercase L), and the number 1 as this can impact reading comprehension. It has also been noted that letters that have mirrored shapes, b, d, q and p can cause challenges for dyslexic readers. Many have suggested that certain font families and specialized fonts for dyslexia can improve readability, but recent findings have shown that this idea didn’t stand up in research. Ultimately, dyslexic readers benefit most from the same guidelines that apply to all users – proper letter- and line-spacing and legible typefaces.

Say More with Less

It is ideal to limit the number of fonts on your site to one or two families. Many larger font families also include variations for light, normal, medium, bold, heavy and black font weights. While it can be tempting to use a variety of these weights on your site, be aware that each of these weights is actually considered a separated file. Savvy developers will look for ways to load fonts strategically to reduce any performance impact that they have on a site, but ultimately, the more fonts the longer the download times that are needed.

Outside of performance issues, adding multiple font styles or families to a site often creates a more cluttered appearance which diminishes a user’s understanding of the content being presented. WebAIM points out particular challenges that come when too many font styles are used:

“Using too many font faces can create a confusing visual layout, which is bad for all users, but may be especially difficult for users with reading disorders, learning disabilities, or attention deficit disorders.” – WebAIM

Put it All Together – Mindfully

Once you have selected font families for use on your site, be mindful of how you structure the layout of your pages. All content authors should be working with a style guide that provides recommendations for how to best use header tags, font styles, colors and formatting for optimal accessibility. Header tags should be used appropriately, beginning with H1s at the top of the page and descending accordingly throughout the remaining page content. Beyond enhancing the visual readability of the page, correct semantic markup (code) for header tags is critical in supporting assistive technologies that read back the content of the page. If the page isn’t structured properly, the content will be read out of order or with different levels of emphasis which may confuse the user or present the wrong message.

As we discussed in part one of this series, styling fonts with sufficient color contrast over their background colors is also important for users with visual impairments. In most cases, it is also recommended not to place text over a photograph or busy background pattern which would impact how easy it is to see and read.

Build Smart

As noted, working with an accessible-aware development team can make all the different in ensuring the success of your efforts to put the best (font) face forward. There are a host of details that developers take into account when building a site that go beyond page formatting and dive deep into performance and rendering issues. Every detail matters.

Key Takeaways

Selecting typography for your brand and website should be one of the most creative, and fun, parts of the design process. Just be sure to keep these things in mind:

  • Carefully select fonts for your website whose letterforms are clearly legible at all sizes with unique character forms to help all users, but particularly those with visual impairments or reading disorders, easily identify their forms.
  • Ensure that your typography enhances the readability of your content rather than detracting from it with comfortable line heights and widths and appropriate letter spacing.
  • Limit the number of font styles and weights to create a clean, uncluttered environment.
  • Use font weights and colors that provide strong contrast over the backgrounds on which they appear.
  • Structure your content with appropriate headers and styles to allow for improved visual readability as well as audio read back for assistive technologies.
  • Check in with your development team to make sure your site is loading and rendering fonts for optimal performance.

Information on refining and implementing your brand's colors online are outlined in part one of our accessibility blogpost series. For more in-depth guidelines and best practices on website accessibility, download our Web Accessibility Toolkit.

Are you interested in learning more about creating websites that are both beautiful and accessible? Contact SAI Digital today!

Get the latest insights.

It's better than your average e-newsletter...we promise. Sign up to start receiving the latest trends in web strategy.

 

By signing up for our updates, you are agreeing to our terms of use & privacy policy.