Skip to content

Instantly share code, notes, and snippets.

@charlesroper

charlesroper/inclusive-fonts.md

Created July 14, 2022 20:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save charlesroper/c2d7aa8d6ef423d57a3bb8d6566b1082 to your computer and use it in GitHub Desktop.
Save charlesroper/c2d7aa8d6ef423d57a3bb8d6566b1082 to your computer and use it in GitHub Desktop.
Download ZIP
Inclusive fonts
Raw
inclusive-fonts.md

Inclusive fonts

Accessible, inclusive fonts have been playing on my mind lately. So I've spent some time researching options for a workhorse body font.

I've considered a few things:

  1. Font must be highly legible and practical in a wide variety of formats. This includes print, digital, signs, TV, smartboard, soggy paper, laminated sheets, etc. Digital alone has a whole array of sub-categories to consider, including good quality screen, poor quality, low resolution, small screen, large screen, e-ink, etc.
  2. Should come in many weights and styles and be feature rich (at least of regular + bold + italic)
  3. Should be free or inexpensive.

Before looking for options, I watched recent presentations discussing the design and other factors influencing inclusive typography. I also consulted various articles and resources.

Inclusive type resources

Don't Believe the Type! (video)

Are “accessible” fonts actually as accessible as they claim? If not, what are the things we need to know when choosing a font that responds to different reader needs? This session will explore what dyslexia is, what cognitively happens when we read, and what elements of a typeface make a difference to how accessible it is, and to whom. Bruno, David, and Gareth have decades of experience between them. Bruno as a Typeface Designer, David as a Typographer, and Gareth as a UX Design/Accessibility expert. Together they spent over 3 years researching and steering the creation of BBC Reith family, the BBC’s corporate accessible typeface.

Hyperlegible: Challenging Assumptions about Legibility and Accessibility (video)

Applied Design provides a behind-the-scenes look at what drove the design of Atkinson Hyperlegible, a typeface for people with low vision, which Fast Company named a winner in the Graphic Design category of its 2019 Innovation by Design Awards.

Designing Accessible Content (article)

Best practices for accessible typography, font styling, and structure by Carrie Fisher, Senior Accessibility Consultant and Trainer at Deque Systems and human-computer interaction Ph.D. student (font on her site is Mulish).

I also consulted the "A11y" Slack community -- a global network of nearly 8,000 accessibility experts and practitioners.

Based on this guidance, I have produced a shortlist of "free" fonts that could be deemed inclusive. The research presented in Don't Believe the Type! tells us that clear, sans-serifs in the grotesque and humanist styles are favoured by users. And, in addition to being purely functional, typography must also serve to engage on an emotional level - emotion and function must be in balance for a design to be successful.

The work done by New York agency Applied Design on the Atkinson Hyperlegible font gives us a benchmark against which to judge other fonts -- the website for it and Carrie Fisher's article detail things to consider when selecting a font for legibility.

Applied Design also echo the need to balance style and function, and suggest this fundamentally important and rather profound cascade of insights:

  • Letterform differentiation leads to
  • increased letter recognition leads to
  • improved legibility leads to
  • faster reading leads to
  • better comprehension leads to
  • an ability to understand more leads to
  • higher quality of life.

I'm presenting two lists of fonts here. I've compiled my top-six which do a good job of meeting the "hyperlegible" benchmark, and a list of others which do not meet the benchmark quite so well but are still well worthy of consideration. The lists are not exhaustive by any means nor are they in order of preference.

Work Sans in particular is impressive. It is reminiscent of BBC's Reith Sans, has character and emotion, is variable weight, optimised for digital and print, and has a wide range of features, such as ligatures, stylistic alternatives, small caps, tabular figures and characters, old-style figures, slashed zero, caps spacing, swashes, and more (see the "sample" link). It is perhaps a little loose, but it can be easily tightened up using a little negative letter-spacing in CSS. It certainly fits the bill for a workhorse you could turn to and work with again and again.

Top-six inclusive fonts

Others

These are all freely available fonts. They all have open licenses that allow for commercial use, free of charge.

When I was training in graphic design in the 90s and early 00s, free fonts were avoided because they were almost always terrible. The landscape has radically changed in recent years and there are now many high-quality free fonts (and still lots of terrible ones, too). Although the fonts I've listed here are made available free-of-charge, most are produced by professional typographers or type studios, often under commission by Google. They are, therefore, not amateur or unprofessional or even strictly speaking "free", because Google (or the Braille Institute or RNIB) has paid for them and then chosen to make them freely available.

Footnotes

  1. Fun fact, IKEA uses Noto Sans. Prior to that they used Verdana. ↩

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment