loading...
Cover image for Fonts to improve the accessibility of our websites or publications

Fonts to improve the accessibility of our websites or publications

rafalozan0 profile image Rafael Lozano ・2 min read

Today while surfing the web, I found an article talking about the font Atkinson Hyperlegible that the Braille Institute developed to help people who suffer from vision problems, which according to the WHO (World Health Organization) are about 285 million people who suffer from some kind of visual disability, enter to read the article where they talk about this source, and because I had recently attended a small workshop about accessibility, I became curious and wanted to expand my knowledge about this topic, I started looking for types of fonts that are easy to read for people with visual disabilities and found that the easiest to read are the fonts of the following families:

  • Sans serif font families: Arial, Calibri, Gothic century, Helvetica, Tahoma and Verdana.

  • Serif font families: Times New Roman and Georgia

  • Slab serif font families: Arvo, Slab Museum and Rockwell

The types of fonts above not were designed specifically for people with visual impairment, but they are the ones that are easiest to read for most people, including those with visual impairment, which is why I found the font developed by the Braille Institute very interesting, Since I saw it I thought it was very readable and modern at the same time, it is very pretty, where you put it will look very good and also you are helping people with a visual disability to read your content without any problem, as you can see in the image below, this is how the Atkinson Hyperlegible font looks:
This is what the Hyperligible Atkinson font looks like

The font is totally free and you can download it from the official website https://www.brailleinstitute.org/freefont , available for Windows and macOS, finally, I would like to leave some useful tips to improve accessibility when creating your applications, web pages or advertising images:

  • Avoid handwritten fonts and fonts where letters can be confused with numbers.
  • Your fonts should be a minimum size of 14px (ideally more) and the code should use relative values.
  • Pay attention to color and contrast.
  • Don't rely on color alone to mean information (for example, "Click the green button").
  • Clearly define the paragraph and letter spacing.
  • Do not allow the total width of the content to exceed 80 characters.
  • Avoid paragraph alignment (justified as) that creates white space within the content.
  • Avoid combinations of red/green and blue/yellow when possible.
  • Be careful with light color tones, especially gray - they are difficult for people with low vision to see.
  • Don't rely on color to convey information to users. For example, make sure your links have underlining, or some other visual indicator in addition to color.

I hope you found this article useful and that it helps you improve the accessibility of your creations, I invite you to leave me a comment with your feedback, it would be very helpful for me since it is my first publication on dev.to ! thank you very much for reading me.

Discussion

pic
Editor guide