Fonts are an important part of designing a beautiful interface. They convey character and personality, but most importantly, they need to be well legible and accessible to users on various devices. As words make up such an important part of a design, understanding its form and heritage will certainly influence the message within a design.
Digital screens come in various sizes, so it’s necessary to address that in design. Making sure that the font size is well legible on big screens as well as on smaller screens is important for accessibility.
Keeping body copy font sizes between 16–18 pixels is advisable, depending on your font type. This may differ depending on how much text you may have on a page, or what the focus on the page is.
Splitting long paragraphs so that they form smaller chunks may be easier to read and they will look more engaging and manageable visually too. You can adjust the paragraph width so that it’s easy to scan from left to right quickly. 66 characters per line is regarded as the ideal.
How to get the typography right?
It is, of course, important to make sure that the font you are working with is well designed for the purpose. For example, using a really thin font on a coloured background may make it really hard to read. The colour of the font can make a big impact too. There are really good tools to help you with accessibility. One of them is Stark if you are working with Sketch. Stark gives you an overview for contrast accessibility taking into consideration vision impairment, but also helping with a best practice overall.
In the example above you will notice how certain colours don’t really work that well together. For example, yellow text on white or vice versa is a general no-no. It’s best to look at contrasting colours so that they both make each other stand out without causing a strain to the reader.
Verdana is considered one of the most readable screen fonts. But in general, you may want to choose a sans serif font for a digital product, however, there are great serif fonts that have been well optimised for the web. When looking for a font, we need to make sure the spacing and font weights work together to create enough white space for quick scanning. Sans serif fonts are generally less embellished which makes them easier to read.
However, every font embodies a certain feel and perhaps a serif font might be a good idea for a magazine website or perhaps you may need a font with a kind of vintage grace. There are some really good serif fonts for digital screens. For example, Roboto is a native Android font and Roboto Slab is a great serif font for screens. Below are some more examples. You can find all of these on Google Fonts.
What about Comic Sans?
So I wanted to mention Comic Sans because, interestingly, research shows this font is super accessible to those with dyslexia. As a designer, I have learned to value form over function. However, that sort of can become a trap in itself. I think form is still very important, and perhaps the most significant point here is finding the right use for everything. For example, if a product needs to be designed with its primary focus to help those with impairments, then function needs to take precedence over form. However, it is not to say that form needs to suffer, it just needs to match the function in a complementary way.
So as a recap, important things you may want to consider when working with typography and fonts:
- Make sure the font choice matches the message of the content
- Double-check the paragraphs are a good width and length for legibility, with a good line height for the font.
- Make sure there is enough contrast between the background and the font colour, so everything is well legible.
- Check the font size is well legible on all screens, including small ones.
- Consider functionality, but don’t give up form :) 💛
