Children and digital accessibility: readable fonts

(Image by press 👍 and ⭐ from Pixabay)

Arial, Times New Roman, Helvetica… You might not think that there are a lot of options when it comes to font choices for a website.

It used to be that you were limited to the fonts that users had pre-installed on their computers. If you wanted something more fun, you had to bake the type into a graphic.

Then came Google Fonts, and a whole new world of font options opened up. But not all of those new fonts are as easy for children to read as they are for adults. I hope you find these tips helpful when choosing the most readable font for your next children’s digital design project.

Readability + accessibility = literacy

Image by Chhumvichhouk Rounh from Pixabay

Statistically, most children learn to read by the age of seven. But, according to an article in Today’s Parent, there could be a six-year difference in reading levels in one class.

Learning to read is a slow process. Most children go letter by letter until they learn a word. Your choice of a font and its usage can help children as they go through this learning process.

Following design and accessibility best practices can help with readability and literacy. They not only benefit new readers, but also those with cognitive disabilities and learning disabilities as well as those with low vision.

5 characteristics of kid-friendly fonts

When choosing a font for the basic text and navigation on your site, keep these seven characteristics in mind:

1. Imposter letter shapes

Learning to read can be even more difficult when certain letters look the same. In many sans serif fonts, characters such as the number ‘1’ (one), upper case ‘i’ and the lower case ‘L’ can look the same. These can be hard to avoid, but if you can, finding a font without them can help with readability.

The word ‘Illustate’ can be hard to read in Arial, but easier to read in Radio Canada font.

2. Distinguishable reading shapes

This refers to letters that can have a very similar design such as the letters e, o, c and a. In some fonts, the design of their closures is very similar. Words such as ‘cocoa’ can be hard to read for children with dyslexia, low vision or reading difficulties.

The ‘a’ and ‘o’ letters in Dancer Pro Light can be hard to distinguish but in Andika New Basic, they are easy to tell apart.

3. Good letter spacing

Many fonts with tight spacing can create inadvertent ligatures. In some cases, the letters such as ‘vv’ can look like the letter ‘w’. More open letter spacing makes it easier for early readers and those learning to read with dyslexia.

Bookmania is very tight and the word ‘savvy’ looks like ‘sawy’ while Radio Canada has more open letter spacing.

4. Large x-height

Fonts that have a larger x-height — the height of the lower case character — are much easier to read than those with a short x-height. This is especially true when you are using the font in a chunk of text such as a paragraph. This is especially true for younger readers and those with learning difficulties or low vision.

Times New Roman has a short x-height, and Verdana has a large x-height.

5. One-story infant characters

Depending on their age, children are taught to write using one-story infant characters. These letters in the typeface are designed to be read more easily by children, such as the ‘a’ and the ‘g’. Choosing a font with one-story infant characters will help with readability.

Rooney has two-storey ‘a’ and ‘g’ characters and Mulish has one-storey ‘a’ and ‘g’ characters.

So what are the best Google fonts for children?

Using the six characteristics above, I applied them to eight fonts to see how kid-friendly they were. Five of the fonts are commonly used on websites: Arial, Verdana, Montserrat and Times New Roman. And three are fonts that have been designed for accessibility, for children or recommended by other children’s website designers.

Table outlining eight fonts that were tested against the five criteria: Andika New Basic, Mulish, Radio Canada, Verdana, Trebuchet MS, Arial, Montserrat and Times New Roman.

The four fonts that scored the lowest had imposter letter shapes, poor letter spacing and two-story infant characters, making them harder to read. These were internet standard fonts Arial, Montserrat, Trebuchet MS and Times New Roman.

The three that scored the highest, based on one-story infant characters being the deciding characteristic for the top spot were Andika New Basic, Mulish, with Verdana and Radio Canada tying for third.

Andika New Basic is a font designed especially for literacy use and beginning readers.

Mulish is a good sans serif font and has four out of five characteristics.

Verdana and Radio Canada tied for third place. However, I wanted to highlight the Radio Canada font. It was designed for Canada’s public broadcaster, CBC/Radio-Canada, with accessibility for dyslexia in mind and is available in Google Fonts with an open-source license. Like Verdana, it meets almost all the characteristics except for the one-story infant characters.

Radio Canada was designed with accessibility for dyslexia in mind.

Other things you can do to make text readable

You’ve applied the characteristics when choosing your font for your audience’s age level. What else can you do to make your content readable?

• Use sans serif fonts. Children can read the simple shapes of sans serif fonts much easier than complex shapes of serif fonts.
• Use a large font size — 14–24pt depending on the font and your audience’s age and x-height. And make sure the leading isn’t too tight.
• Use upper/lower case for headlines. It’s harder to read all caps.
• Stay away from condensed or expanded typefaces. The characters can be more difficult for children to recognize.
• Stay away from the hairline or extra bold font weights. Hairline weights can be hard to see with low vision and extra bold weights can lose their distinguishable shapes.
• Have a look at the italics for your font to see how easy they are to read. Try to use them sparingly as italics can be hard for readers with dyslexia.