Typography in digital products for kids
Best practices, heuristics, tips & tricks
This article is a quote from my book “Designing digital products for kids”, Apress, 2020.
🎧 Listen to a full conversation about my book and designing for kids on the UX of EdTech Podcast.
Avery common misconception is that the typography on children’s products has to involve the use of quirky, funny, practically unreadable typefaces. This is wrong for several reasons. First, ugly fonts are still ugly also on children’s products, and that might be just a matter of personal taste and sensitivity about typography. There are other reasons though and taste has little to do with them.
If we’re designing for preschool and elementary school children, we have to be careful because these are their first encounters with reading and writing. While it’s very easy (well, depending on the typeface) for adults to recognize an “a” in different styles (Figure 1), seeing it in cursive and print, serif and sans serif, very simple or very ornamented might confuse kids.
A font that is difficult to read or differs too much from what they are learning at school can be confusing and frustrating. It could ultimately even discourage kids from reading. That’s not what we want.
This has to be considered even on products intended for nonreaders. Your app could be targeted to very young children who cannot read yet (and we talked about solutions on this topic earlier in this book), but it’s still a good idea, even for the little text you might have, to be written in a font that trains their brain in recognizing letters, without struggling and creating visual noise.
There are different opinions on what makes a good typeface for children. We base many of the most common assumptions on intuition, practical use, and tradition by educators, but there is no scientific approach to really validate them. Consequently, many choices rely on hypotheses and it’s hard to really provide a set of rules that are backed up by data.
The choice of style for a typeface for children is often based on the idea that this should be consistent with graphical approach for handwriting taught in schools. But some educators challenge this approach, with the argument that the typeface should help kids familiarize with typography found in regular books and magazines. Both seem valid reasons.
Many type designers and type foundries came up with typefaces made for beginner readers. Most of them took the traditional rules as a starting point for their design, for example, it’s widely assumed that sans serif fonts are easier to recognize by children. Sans serif fonts are designed “bare bones,” the form of the letters is made only by their skeleton, it’s the way we normally write when writing in print, we don’t add serifs to our letters. The design of children-friendly typography went even further with the introduction of the so-called infant characters. These characters were introduced in the 1920s and became more popular during the 1930s. What does infant character mean? These characters are variations on specific letters made to make them easier to read for children. The most common examples of such letters are single-story “a” and “g” (Figure 2). Here’s the difference.
Other common examples of infant characters are the uppercase “I” and the lowercase “i” (Figure 3) that in many sans serif fonts look almost identical. In their infant version, the “I” has serif and the “i” has a curved terminal.
Type foundries introduced these variations on popular fonts such as Gill Sans and Bembo. Type designers, like Rosemary Sassoon and Adrian Williams, designed typefaces specifically for children’s book. Their typeface Sassoon Primary includes all the infant variations of the characters, including the curved terminals of “l” and “t” and the serifs on the capital “I”. It’s a very good typeface that I like a lot.
Serif vs. Sans Serif
The choice between serif and sans serif is also a matter of medium. The 2016 study by Berrin Dogusoy, Filiz Cicek, and Kursat Cagiltay, How Serif and Sans Serif Typefaces Influence Reading on Screen: An Eye Tracking Study, is just one of the studies that highlighted, through testing with eye-tracking technology, how sans serif typefaces are more readable on screens compared to serif ones.
The 2008 study by Sheree Josephson Keeping Your Readers’ Eyes on the Screen: An Eye-Tracking Study Comparing Sans Serif and Serif Typefaces, published in Visual Communication Quarterly, got to the same results. This study is particularly interesting because the author didn’t just compared serif vs. sans serif typefaces, but also compared fonts that were made for print with others made for screen. Overall, the best results were obtained with the use of a sans serif font specifically made for screen (in that case Verdana, designed by Matthew Carter for Microsoft in 1996).
In a 2012 article on NNG, Jakob Nielsen challenged this guideline about the preference of sans serif fonts for online reading. His (valid) argument is that the “rule” was formulated when screens were low in resolution, hence the rendering of fonts with serifs was far from ideal, making texts less readable and blurry. In relatively recent times, screens got a lot better. Long gone are the days of Verdana and displays with 72 dpi resolution. So, if serif fonts are considered more readable on print, shouldn’t they be considered the same on screens with a resolution comparable to printed pages? The 2016 study by Dogusoy, Cicek, and Cagiltay mentioned earlier seems to disagree, but that might not be enough. The debate on whether serif or sans serif typefaces should be the choice for online reading is still on today, but, bringing the conversation back to the topic of this book, there is one important thing to notice: digital products for children don’t usually require long paragraphs or text. Quite the contrary, actually.
It’s undeniable how serif fonts generally look more serious though and also how on digital interfaces sans serif fonts look more modern and “techy” (there is currently no operating system out there, desktop, mobile, or else, using a serif font as their default choice). Digital products are still very much tied to the “old” rule using sans serif font families.
In the end, sans serif font seems the best choice when it comes to digital products for kids, being them web sites or mobile apps.
What Are the Characteristics of a Good Font Family for Children?
Round Counters
Simple, friendly shapes, generously drawn with rounded counters (Figure 4). Avoid counters that are rectangular or too narrow. Wider typefaces provide better readability and they also resemble more the style of handwriting children learn at school.
Taller X-Height
The x-height of a typeface is the height of its lowercase “x”, which is the height that should guide the design of all lowercase letters without their ascenders or descenders (Figure 5).17 Typefaces with a taller x-height look more readable.
Avoid Decorative Typefaces
Decorative typefaces should be avoided at all times on any digital product, regardless of the age of the users. But it’s very common to think overly decorated fonts are childish and therefore good for kids’ books, websites, and apps. This is simply wrong for all the reasons mentioned previously. Such typefaces are not fun to read (or watch), just confusing and overwhelming (Figure 6).
Pay Attention to the Font’s Weight and Balance
The weight and width of a font have a direct impact on its readability. Fonts that are too bold or too thin, too condensed or too extended, tend to be less readable than a well-balanced font (Figure 7).
What Are Some Good Typefaces Then?
The choice of the right typeface can be time-consuming. There is an uncountable number of options out there, and new ones become available on a daily basis. If you don’t have much time to spend on this research, I can name a few options that tick all the boxes mentioned previously, but the choice should also reflect your brand and the look and feel you want your product to have.
Gill Sans Infant is a classic design, an old typeface, and one of the first to introduce and popularize the use of infant characters. Sassoon Primary, mentioned earlier in this section, is a more modern typeface and it has been designed specifically for children. It’s important to notice, though, that neither of these typefaces was meant to be used on screens, but rather on printed material.
Kimberly Geswein is a type designer who made several font families for children. Her KG Neatly Printed is the font I used in the figures used in this chapter to show the correct version in each of the points. I like that because it’s, as the name suggests, very neat, but friendly at the same time, not too serious.
Font Size
Size is undoubtedly one of the main factors influencing the legibility of a font. Early readers’ material is usually characterized by large fonts, so that it’s easier for children to distinguish letters.
The size of texts matters the most when we’re dealing with digital products aimed to children in this “early readers” years, usually starting around 5 years old up until 11, while in products for younger children, not yet able to read, texts (if any, and we should try to keep them at minimum) are mostly intended for accompanying adults.
In early readers’ material, the x-height of fonts usually goes gradually from about 4 mm/0.16 inches to roughly 2 mm/0.08 inches, which is adults’ size of fonts. Pay attention here that I said “the x-height” and not the size of the font. The ratio between x-height and font size is different for each font; take a look at the following example to better understand (Figure 8).
As you can see, depending on the font we use, the size to get an x-height of 4 mm is very different, and this depends on how the font is designed. Now, an x-height of 4 mm is a very big text, but here we’re talking about the proper sizing for paragraphs of text, for example, in an illustrated book. If we need to label some icons or add text to a button with a single word, we can go smaller than that.
Leading
Leading (in typographic terms or line-height, if you speak CSS) is the distance between lines of text. As you can imagine, this is another variable we can play with to try getting better readability. Normally, font families should have a default leading that is good enough in most cases, but in regard to early readers, we can increase the leading just a bit, to make the paragraph more airy.
There isn’t an exact formula, also because it depends on the typeface, its ascenders and descenders heights, its x-height, and so on. But a rule of thumb I tried several times is taking the x-height of the font, multiply it by 1.618 (the golden ratio; you can do 1.5, it’s OK, the golden ratio is mostly just a fetish), and consider that as the distance between the baseline of the line above and the x-height of the line below. That is usually (not always) a slightly bigger leading than the font’s default value (Figure 9).
Letter Case
Texts written in uppercase (all caps) are less readable than texts written in sentence case (starting with a capital letter followed by lowercase letters. Just like this sentence you’re reading now) (Figure 10).
This is a general rule of typography, not specific to children, but considering we’re dealing with early readers (if readers at all), it’s one more reason to apply this best practice.
In the end, my suggestion is to keep it simple, with sans serif non-decorative typefaces, having a well-balanced design (not too narrow, not too wide, too short or too tall x-height, right weight, etc.). The specific choice on which font family should depend on the look and feel you want your product to have and your brand. Then just follow the usual rules of good typography for what concerns kerning, spacing, line height, and so on. There are some best practices when it comes to designing for children, but these never conflict with the general rules of good design, and this principle applies on everything, typography included.
Bibliography:
Cantuni, Rubens. “Designing digital products for kids — Deliver user experiences that delight kids, parents and teachers”. Apress, 2020. Print.
Bessemans, Ann. “Typefaces for Children’s Reading.” TMG Journal for Media History Typografie in Mediahistorisch Perspectief 19.2 (2016): 1. Print.
Wilkins, Arnold, Roanna Cleave, Nicola Grayson, and Louise Wilson. “Typography for Children May Be Inappropriately Designed.” Journal of Research in Reading 32.4 (2009): 402–12. Print.
Dogusoy, Berrin, Filiz Cicek, and Kursat Cagiltay. “How Serif and Sans Serif Typefaces Influence Reading on Screen: An Eye Tracking Study.” Design, User Experience, and Usability: Novel User Experiences Lecture Notes in Computer Science (2016): 578–86. Print.
