Accessibility, Fonts, and Dyslexia

Yesterday I was scrolling Twitter and came across an active discussion between a few of my fellow Tableau-developer-friends around font choices and dyslexia. To summarize, one developer was looking to deliver a landing page with a wall of almost 2 dozen filters on it, and a client with dyslexia was expressing difficulty with useability. I decided it was a good chance to chime in and offer help… and write a quick blog to document some best practices for others to reference too.

Before continuing, a few quick caveats:

1. I am not diagnosed with dyslexia. I have long suspected I have it, I have an ADHD diagnosis, and they have a high comorbidity (meaning they occur together frequently). It is quite expensive to get tested and given my ability to adjust to the world around me, a formal diagnosis doesn’t present much value when considering the cost.
2. Dyslexia and other neurodivergence conditions are spectrum disorders, meaning, unlike pathologized disorders, people can experience very different challenges while having the same disorder. In short, there is no single, unifying dyslexic, ADHD, or ASD experience, but rather, countless variations that share common threads.
3. I am not an accessibility expert. I will speak to my personal experience and some resources from other professionals, but I also recognize that changes made to accommodate one group can cause conflicts for another group. As such, a great rule of thumb is to build in accessibility as a feature rather than an afterthought or bandaid — more on that in a moment.

Basics of Dyslexia

Dyslexia presents itself less in problems with reversing words (dog vs god) and more so a general conflict processing written language. The causes aren’t exactly well known, but there are common experiences for many with dyslexia:

• Swapping similarly shaped letters (d vs b)
• Words running into each other when they start and end with the same letter (“simple epic” becomes “simpepic”)
• Words appear to move around the page (check this out for an example of extreme dyslexia)
• Lists, numbers, sequences, and other arrays of information can become easily confused and jumbled
• Confusing directions (right and left, up and down, before and after)
• Reading words out of order, skipping paragraphs, re-reading the same sentence over again, general reading retention

Dyslexic Friendly Fonts

Right off the bat, san serif fonts are a great way to help someone out who is dyslexic! Serifs are the slight brush strokes or curves off of fonts that give them style. You are most likely reading this in Medium’s body font, which is a serif. The header of this section, however, is in Medium’s san serif font (meaning without serif). San serifs create more visual separation between letters as long as the font isn’t terribly crowded. Cursive is a notoriously challenging style for dyslexics and the addition of serfis in print evokes the history of cursive font styles. Here’s an example from Adobe:

San Serif font on the left, serif font on the right

Luckily, there are great san serif fonts available on nearly every application. This link has some great options, but here are some of the most common:

• Helvetica
• Verdana
• Arial
• Century Gothic
• Tahoma
• Trebuchet

Nearly all of these are extremely common across every major OS, browser, and application. You can take things even further and use an open source dyslexic font like this from Open Dyslexic:

The movement within the letters that creates a heavy base and light top dramatically improves readability. I’ll show an example of such fonts in a real application in a moment.

Dyslexic Friendly Design

Informatics, or the study of information design is focused on the best possible ways to show and communicate data using visuals. Informatics principles often serve the best interests of everyday users and also address accessibility issues. Let’s start with this wall of filters I created:

The first step I recommend in information design is to group “like” things into the same spaces. In this case, I’ve grouped filters that control similar elements. I also created some visual separation between the columns by making one longer than the other:

Next, I’ve created some headers and sections for the information:

Lastly, I’ve further organized everything and create some “cards” for increased visual separation, bolded the headers, and played with color to increase visibility:

There’s plenty more I could do to make this even better for a user to improve the visual monotony of the various dropdowns displaying “All” as well:

• Several dropdowns are single select of specific elements (good use case for radio buttons)
• States could become a hex map
• High cardinality fields could become wildcard text searches
• Sliders probably should be changed to different styles
• Font sizes could be increased across the whole dashboard

Accessible Support as a Feature

The prior section covers how to design well for dyslexia, but there may be cases where accessible design forces you to make design choices that break or stress your product. Again, I’m not an expert in accessible design, but last year I got my first experience of a product providing a support feature for dyslexia! Early in 2021, I picked up Loop Hero, a Russian made retro-style pixel art game.

When I first started the game I noticed I had a HORRIBLE time reading the in game fonts:

Fortunately, Loop Hero had a toggle for dyslexic friendly in-game font.

This was the first time I experienced an in-app service to toggle to a readable font that improved my experience. The feature does not interfere with the game experience for other users, and while it breaks some of the immersion of classic retro-style gaming, it dramatically improves my ability to enjoy the game. This seemingly small feature not only made me feel seen and appreciated, but also dramatically improved my ability to enjoy the game.

Design for All

When we build solutions for others, regardless of the platform or tool(s) leveraged, it behooves us, as creators and developers, to ensure we support as many people as possible. Going the extra mile to ensure accessibility is baked into our design process ensures more people are included, seen, appreciated, and supported.

I hope this helps you the next time you start a new design and sheds some light on some dyslexia-friendly design choices.