Choosing Accessible Typography

vey much more than just a pretty layout, according to the global economics of disability report. There are nearly 1.85 billion People With Disabilities (PWD) which represents more than one-in-four on the planet—a market larger than China. Unlocking the potential of this large subset of the global marketplace will have a transformative effect on economic growth, public, and private institutional cash flows, and how economies manage an aging population.

"Our estimate – Friends and Family represents 3.43 billion consumers and employees worldwide, controlling more than 10.71 trillion dollars in annual disposable income."

Source: Report Summary: The Global Economics of Disability

There are too many people to be disregarded when designing our interfaces. So, in this article, we will review a few steps to help you choose the right typography for your project.

Choosing good typography for the texts of each graphic artifact is one of the greatest challenges for Designers.

The options are numerous, but the choice must be made judiciously, NEVER for taste.
In addition, other elements need to be analyzed, including:

Font family

A font family is a set of fonts that have a common design. Fonts within a family, however, differ from each other in style such as weight.

The choice of font family will define the aesthetics of your product, whether it will be more formal, minimalist, soft, or robust. That’s why it’s important to research several options and see which one suits your design best.

Some platforms help to visualize these various options, such as adobe fonts and google fonts.

Font weight

Font weight refers to font-weight/intensity variations within the same family.

Font size

Font size is the size of the font itself and can be specified in different measures, such as pixel, point, and rem.

To have size variations and maintain a good hierarchy, we can use the modular scale, which allows for size variations while maintaining a hierarchy and harmony in the sizes used. (A good tool to visualize options is the Type Scale, which exists in the web version and as a plugin in Figma itself).

Line height

On the web, it is the space added above and below characters.

Per the Web Content Accessibility (WCAG) 2 guidelines, Success Criterion 1.4.12 level (AA), states that the Line Height (line spacing) must be at least 1.5 times the size of the source, or in percentages, at least 150%.

Example in components:

Letter spacing

Per the Web Content Accessibility (WCAG) 2 guidelines, Success Criterion 1.4.12 level (AA), the letter spacing (tracking) of at least 0.12 times the font size and the Word spacing at least 0.16 times the font size.

Example in components:

After analyzing the characteristics of the font, it is necessary to think about other aspects specifically aimed at the issue of accessibility of the typography system.

Legibility

To have a legible text, designers must ask themselves a few questions to guide their approach, such as:

• Who will read this? Someone who wants to read or who needs to read?
• How should this be read? In passing or consciously.
• What typographic media to use? Loose and propagandistic or technical look?
• Short text or long text?
• Which application: digital or printed?

The fonts with the greatest legibility are not necessarily the simplest, but those whose characters are not mistaken with each other.

There are three characteristics that, when analyzed, can help in choosing typography with good readability, they are:

• The danger of getting mistaken.
• The danger of adhesion.
• The similarity between the fonts.

Here, we have an example with some types of famous fonts, where the danger of similarity with some letters and numbers occurs, making it difficult for the user to recognize.

Contrast

The contrast serves to propagate information clearly, always thinking about covering as much as possible for those who will consume the content and prioritizing that it is accessible to those who have some type of visual impairment.

When analyzing colors, it may be accessible for you, but for others not so much. To make this choice easier, there are some contrast testing tools, such as Who Can Use and the Figma Color Blind and Able.

Test the prototype

As the last step, after going over and defining all the above elements regarding typography, it is important to test the components on the canvas and understand what works and what can be improved. Following the guides stated in this document makes it easier to create and define the typography, but the last step to ensure that the previous steps were applied correctly is to test their application in a prototype. You may need to make some changes and adaptations, but by doing so, you will certainly build an inclusive, readable, and accessible typography for your product and/or website.

Conclusion

When we create digital products, we need to consider all users and make accessibility a key requirement to deliver a design that provides a pleasant experience to users. Typography is one such aspect that should not be missed.

References

• Report summary - Design Delight from Disability : This report explores the size and scope of the Disability Market and how Disability impacts the experiences of customers and employees around the globe.
• Material Design: Build beautiful, usable products faster. Material Design is an adaptable system backed by open-source code that helps.
• WhoCanUse: It’s a tool that brings attention and understanding to how color contrast can affect different people with visual…whocanuse.com
• Article (portuguese): O Que é Tipografia no Design Gráfico? Tipografia é o estudo, criação e aplicação dos caracteres, estilos, formatos e arranjos visuais e harmônicos das…
• Guia WCAG | Guia de consulta rápida: WCAG são diretrizes e recomendações organizadas e
• mantidas pelo W3C que fundamentam a construção de conteúdos digitais…guia-wcag.com
• O que é tipografia e como como usar um dos pilares do Design Gráfico a seu favor: Tipografia é o estudo, criação e aplicação dos caracteres, estilos, formatos e arranjos visuais das palavras. Os tipos, conhecidos como fontes ou tipos de letra, indicam a composição visual de um texto.

Further Reading

For a broader view on Accessible Design, please check Principles Of Accessible Digital Design.

Do you want to know more about the accessibility and typography system?

Typography by Carbon Design — Carbon is IBM’s open-source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

Google Fonts Knowledge — Library of original guides to the world of typography, which the Google Fonts team is producing in collaboration with typographic experts from around the world.

Typography by Material Design — Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web.

Web Content Accessibility Guidelines (WCAG) 2.1 — Check-in full all WCAG recommendations on accessibility.

Acknowledgments

This article was written by Maria Fernanda Ferreira Soares, UX Designer at Encora. Thanks to Flavia Negrão, João Caleffi and Kathleen McCabe for reviews and insights.

About Encora

Fast-growing tech companies partner with Encora to outsource product development and drive growth. Contact us to learn more about our software engineering capabilities.