Accessibility, Adobe, Apple, Microsoft, Typography and fonts

Accessible Typography: Over 20 Hints to Make Your Site More Readable

I covered this topic more cursorily in an article for NOS Magazine, but I wanted to cover the topic in more depth to help provide web and app designers and developers create interfaces that are accessible to wider groups of readers. While there is no absolute consensus on what makes typefaces accessible, there are some principles worth noting. All the typefaces I’ve listed support Western European languages at the very least, and quite a few also include Greek, Vietnamese and Cyrillic.

Principles of typeface accessibility

  • Low stroke contrast can promote readability. Some typefaces that have low stroke contrast include Myriad Pro, Gotham, Helvetica, Arial, and Verdana. Some fonts have comparatively high stroke contrast, like Bodoni and Didot. Times New Roman has a moderate stroke contrast. Proxima Nova, commonly used on the web, a has relatively low stroke contrast except for specific letters, like “a,” in which it’s relatively high.
  • Disambiguating between easily confused letters can be helpful for some people. For example, in some fonts, capital I and lowercase l can be easily confused, along with the numeral 1.
  • Fonts with open counters (the whitespace between the strokes in letters) can sometimes be easier to read.
  • Sans-serif typefaces, like Helvetica, Arial, and Trebuchet MS, are thought to be more readable on screen than seriffed typefaces like Times (New) Roman or Palatino. Seriffed typefaces have little “feet” on the edges of the letters.

Examples of serif and sans-serif typefaces.

System fonts and free downloads

  • Trebuchet MS, Verdana, and Tahoma are all system fonts that make distinctions between lowercase l and uppercase I, which can be helpful for some readers. Trebuchet and Verdana come with Windows and MacOS; Tahoma comes with Windows only. Seriffed fonts, like Georgia and Times New Roman, do this by default.
  • Corbel is a clear, readable typeface that comes with Windows and Microsoft Office.
  • System user-interface fonts like San Francisco, Segoe, and Roboto may be more comfortable for some users because they’re used to seeing them all the time on MacOS, Windows, iOS, and Android.
  • Helvetica and Helvetica Neue are bundled on Macs, iPhones, and iPads. Its ubiquity makes some people consider it very readable. The same goes for Arial, but Arial is actually a cheap knockoff of Helvetica that Microsoft licensed for Windows back in the 80s because they were too cheap to pay Linotype for the Helvetica licence.
  • Cadman is a freely available typeface designed specifically for users with dyslexia and other disabilities. It’s a modified version of the open-source Andika typeface that incorporates common principles of accessibility. It’s probably my favourite of all the dyslexia-specific typefaces I’ve seen; it’s both aesthetically pleasing and incorporates characteristics that make reading easier. Like its ancestor Andika, Cadman is open-source.
  • Avenir and Avenir Next are clear, readable sans-serif typefaces that come bundled with MacOS and iOS.
  • The Lucida typefaces were designed specifically for readability. Windows comes with Lucida Sans Unicode; the Mac comes with Lucida Grande. Microsoft products come with other Lucida typefaces installed, like Lucida Sans, Lucida Bright, Lucida Fax, and Lucida Console. I would, however, recommend against using Lucida Handwriting for accessibility.
  • Source Sans Pro is an excellent free and open-source typeface developed by Paul Hunt of Adobe. It has a wide character set, too, meaning that it can accommodate several languages. Because it was created by a professional type designer and funded by a commercial design company, its quality is similar to that of paid-for fonts. It’s available from multiple websites, including FontSquirrel, Google Fonts, and Adobe Fonts.
  • Christian De Boer designed Dyslexie, which is freely available for personal use upon request. Abelardo Gonzalez’s OpenDyslexic is an open-source modification of Bitstream Vera Sans/DejaVu Sans that is based on some of the same principles De Boer used in Dyslexie. Gonzalez also updates the files frequently to ensure that the fonts work well for different people on various platforms. Both Dyslexie and OpenDyslexic disambiguate between commonly confused letterforms, apparently helping dyslexic people decode words correctly.
  • Oxygen Sans, by the late Vernon Adams, is reasonably accessible and is available via Google Fonts.
  • The Ubuntu typeface, originally created for the Linux distribution of the same name by the Dalton Maag type foundry, follows many of the accessibility principles I described above.
  • Some people find Comic Sans accessible, but others think it’s childish. (I am part of the latter group.) Use your best judgement. If it helps you read, I won’t judge. Comic Sans comes bundled on Windows and MacOS and can be easily downloaded for Linux if you install the Microsoft Core Web Fonts package.
  • Droid Sans, developed for the first generation of Android phones, distinguishes between capital I and lowercase l. It’s a commonly used typeface online. You can find it at Google Fonts.

Commercial typefaces

While some of these typefaces are expensive to buy outright, some of them are available through Adobe Fonts, which comes with Creative Cloud subscriptions. You can also try Fontstand to rent them, too.

  • Process Type Foundry’s Seravek distinguishes between the capital I and lowercase l in the roman font. It’s also open and friendly without looking childish. iOS and Mac users may recognise Seravek as one of the font options in iBooks and Safari’s Reader Mode.
  • Many of Erik Spiekermann’s typefaces like Meta, Unit Pro, and Officina tend to distinguish between easily confused letters by default.
  • FontSmith developed FS Me, a typeface originally commissioned for Mencap in the UK. Mencap is an organisation for people with intellectual disabilities (commonly called “learning disabilities” or “learning difficulties” in the UK). There are some other good choices available from FontSmith, including FS Irwin, which is similar to Seravek but is a little more linear-looking.
  • Myriad Pro is a clear, legible sans-serif that comes bundled with Adobe products like Photoshop, Illustrator, and InDesign. It doesn’t disambiguate between capital I and lowercase l, unfortunately.
  • While it was not designed for accessibility, Underware’s Auto Pro incorporates many of the principles I outlined in the introduction if you’re using the simplest italic style. The letters I and l are very distinct from each other, for example.
  • Matthew Butterick’s Concourse comes with a number of alternate letterforms that can aid in accessibility.
  • Hannes von Döhren’s Pluto family features open letterforms and clear distinctions between letters like I and L.
  • All of Miles Newlyn’s typefaces include the option to turn on accessibility features in OpenType-aware applications like InDesign and Illustrator, though it’s more difficult to access the characters in applications like MS Word. On the Mac, you can access Style Sets 1 and 2 in Pages and TextEdit by using the Typography panel, accessible from the Fonts panel that you can call up under the Format menu.
  • Hoefler & Co’s Gotham has open counters and apertures (the openings and white spaces in a typeface), which can help some readers. It’s also a wonderful typeface. There’s an alternative single-storey a you can use, too. Inkwell Sans is another typeface from the same foundry that has an open, friendly look — think of it as a better-executed relative of Comic Sans.
  • If you’re a Windows or Linux user and don’t have a copy of Helvetica from elsewhere, there are several versions of it available for sale online, including Linotype’s standard Helvetica, Helvetica Neue, and the excellent Neue Haas Grotesk. (Neue Haas Grotesk also comes bundled with some subscription services, like those of Adobe and Monotype.) If you want a similar-looking free clone of Helvetica without using Arial, you can try TeX Gyre Heros or Nimbus Sans. When I was doing an internship and had to share editable files with other people using PCs, I used TeX Gyre Heros to avoid licensing issues.
  • Proxima Nova’s alternate character set has a single-storey a and a tailed l, helping disambiguate easily confused letters.

Fonts to avoid for web text

  • Times New Roman. Times New Roman has developed a reputation of being associated with things you neither want to read nor write: essays for school or university, bureaucratic documents, notices from your landlord. Its contrast is fairly high, too. Sans-serif typefaces are also a bit easier to read on screen than seriffed ones. Also, websites set entirely in Times New Roman may evoke the 1990s for web veterans.
  • High-contrast seriffed typefaces like Bodoni and Didot. These are OK for headers, but not for paragraphs.
  • Overly decorative fonts. Examples include Curlz MT, Papyrus, Gigi, and Brush Script. Google Fonts has several of these decorative fonts that you should probably avoid for body text, too, including Alex Brush, Ruthie, and Petit Formal Script. While these typefaces can be excellent for headlines and specific projects like wedding invitations or concert posters, they’re hard to read at long measures.
  • I personally find Proxima Nova’s standard character style difficult to read, but that may just be me. I think the stroke contrast is highly inconsistent; some letters, like S and F, have minimal contrast, but other letters like the lowercase “a” have a higher level of it. The alternates are better. I think Gotham is a more balanced type design that follows similar principles.

Leave a Reply

Your email address will not be published. Required fields are marked *