Investigate optimum typeface for children and young people. Compare Proxima Nova to others

[jeddy3]

There is a need for the future of the Barnardo's brand to consider the typeface choice as part of:

• the brand personality and look-and-feel
• maximising readability and engagement of users

Extensive research exists on the best typefaces for engaging children and young people.

This issue is to research what considerations to make when choosing the typeface, and look at potential typeface options.

Related to: https://github.com/barnardos/design-system/issues/40

[kelliedesigner]

Key findings from fonts.com

When selecting a typeface for a children’s text, choose:

• warm, friendly design with simple, generous letter shapes

• rounded and open counters

• typefaces with larger x-heights

• one-story ‘a’s and ‘g’s

• book or medium weight; stay away from hairline or very bold weights

• standard width, don’t use condensed or expanded typefaces

• italics that are easy-to-read, and not overly condensed or stylised

• avoid all cap settings, which are difficult for readers of any age!

• don’t put too much text on a page. Avoid dense blocks of type, they can be very intimidating to young readers. Keeping it light and fun is the key to keeping a young reader interested

[kelliedesigner]

Key findings from Effective Use of Typography in Applications for Children - Designing for Children - Early engagement in the digital world

General guidelines for the effective use of typography in the design of applications for children between 3 and 10 years of age.

Typeface

• choose a typeface with well-defined contours and generous space between letters, which gives a warm and inviting feeling
• many Web sites and applications for children use rounded, playful, sans-serif typefaces
• while it is vital to establish a visual hierarchy in expressing interactivity and, at the same time, convey a playful look and feel, designers should be cautious when using extra bold or extra thin letterforms, as well as drop shadows, italics, underlining, caps, and colour.
• always test to ensure that the styling you are using supports the user experience rather than detracts from it

Usage

• strive for legibility. Keep in mind that most children are not going to read entire paragraphs of text unless it is critical to their experience
• differentiate elements that are interactive and make it clear to children when they can tap, click, or interact with something
• layout should still have an underlying grid structure that displays information in the best way possible, carefully balancing all graphic elements
• consistent alignments between links, headlines, sentences, and paragraphs is key.
• Use font sizes that accord with children’s developmental stages, especially for links and button labels
• use outsized headlines and titles to capture children’s attention and divide content into sections using visual hierarchy.
• use a line width that is consistent with the span of a child’s focus on a screen, which can be shorter than that of an adult.
• use generous leading, line heights, and good separation between sections, so kids can easily identify different letterforms and chunks of content.
• Avoid making users do extra work to read text, for example scroll bars or other interactive elements to see all of the content.

Process

• You should conduct in-depth usability studies when embarking on specific design projects

[kelliedesigner]

Webfonts with single storey characters: https://www.fontfont.com/fonts/schulbuch http://www.sassoonfont.co.uk/fonts/sample.html https://www.fontsmith.com/fonts/fs-albert

[kelliedesigner]

FS Albert

[kelliedesigner]

Comparison between Proxima Nova, and FS Albert (including paragraph text):

Mock up of FS Albert in a transactional service:

[sl33p]

what's the status of this?

[kelliedesigner]

Feedback from today's meeting

Ensure that we test and validate this typeface with a cross-section of users:

• Children and young people
• Teens (eg leaving care)
• Project workers
• Staff
• Doners
• Researchers

[kelliedesigner]

Next steps

• Mockup designs with chosen typeface for testing
• Test with users

[kelliedesigner]

Continued in #95

[jeddy3]

Imprima - open source rounded sans-serif with single-story "a": https://fonts.google.com/specimen/Imprima

Only available in a single weight, though.

[jeddy3]

Nunito - open source and meets the above criteria except single-story a: https://fonts.google.com/specimen/Nunito

Available in light and semi. Only 16k per weight.

[kelliedesigner]

Heinemann

The Heinemann fonts were initially developed by the in-house design team at Heinemann educational publishing out of the necessity to find the perfect font for use in early primary reading books and literacy products.

Basic Heinemann is defined by longer ascenders and descenders which help children to distinguish between letters; rounded edges on all letterforms help focus the reader on the individual letter shape; and modified characters (eg. a, g,) ensure instant recognition of letterforms.

Heinemann Special offers further modified characters and kerning pairs ideal for dyslexic or special needs use (eg a, d, b).

The Heinemann fonts were developed in partnership with children, literacy advisors, teachers of special needs/dyslexia and primary school teachers, and are now released in response to hundreds of requests from publishers, designers and teachers to purchase them. They have been trialled in schools and learning institutions over an 8 year period, and are a favorite for use in both print and electronic product. The modern, clean aesthetic of the fonts ensures that their use can span beyond educational application.