Examples of good fonts

Some examples of good fonts:

• Roboto
• Lato
• Ubuntu
• Playfair
• Open Sans

In this post, I will try to enlighten you about fonts by giving some examples of good fonts and providing advice on readability and what to be particularly aware of when choosing.

We start with the web, as we are a digital house and therefore focus on the area where we belong and where we are incarnated.

Frequently used fonts

Out there in the big world, the most frequently used fonts are:

• Helvetica
• Calibri
• Futura
• Garamond
• Times New Roman

However, for many reasons, which I will elaborate on later, we would not recommend the above fonts for your website.

Instead, we mostly use the following fonts:

• Roboto
• Lato
• Ubuntu
• Playfair
• Open Sans

We mostly use these because:

1. They work well digitally, whereas other fonts may be better suited for print.
2. The shape of the letters makes them easy to read.
3. They are fairly neutral fonts, so they can fit many different use cases across industries.

Which font is the most readable?

All of the above-mentioned fonts belong to the so-called “Sans-serif” family.

This group of fonts does not have “feet”, making it easier to read on the web where feet can quickly consist of too few pixels and become unclear to the reader.

On the other hand, fonts from the “Serif” family are easier to read in print, as the feet here are often more distinct than with pixels, and the eyes can “follow” the feet when reading, thus guiding the reader’s gaze through the text.

Bonus info:

Open Sans is particularly good for increased web accessibility, including for the visually impaired and dyslexic.

Readability doesn’t only depend on the font

If you want to treat your readers (which should always be the goal) with delightful and readable texts, then you also need to be thorough in selecting the formatting of your font.

Regardless of which font you choose, the color of the font should be selected based on the background it will be used on. For example, you can’t read a completely white font on a black background, as the two are in such violent contrast to each other. The same applies to a completely black font on a chalk-white background.

Here, one should find some shades of dark gray instead, which complement the white better and thus make it easier on the eyes to read.

Be mindful when choosing a font

At Morningtrain, we primarily use Google Fonts because:

1. They work on all web platforms (and across browsers).
2. Other fonts may require developers to make it work on the web (read: it can get expensive and cumbersome).
3. Many fonts cost money per load, or depending on what you want to use it for (print, web, brochure, TV commercials).
4. And some fonts cannot be used commercially – so you risk not being able to use the same fonts across media and campaigns.

Serif fonts are more feminine in their expression, so be aware of that when matching the font with the brand.

Check all formatting

In addition to colors, you should ensure that all the letters in your font are easy to read and distinguish from each other. Therefore, check the entire alphabet of the font before choosing it.

The most common pitfalls are:

• One cannot differentiate between uppercase and lowercase ‘L’ and ‘I’
• One cannot distinguish between ‘b’ and ‘p’
• And ‘o’ and ‘0’ look too similar.

You should also remember to check if the font is suitable for the language you want to write in. Does your font have ÆØÅ, or umlauts (ö, ä, etc.) depending on the language you want to write in.

Finally, remember to check all the font’s formatting before selecting fonts:

• Bullet points
• Italic
• Bold
• Underlined
• Capital and lowercase letters

Designer’s advice

Before you embark on exploring fonts and choosing them, don’t miss out on a designer’s advice:

• Once you have chosen a font, you should choose a line height that enhances the appearance of the font. Our recommended line height is 1.6. Your line height determines how compact your letters will appear in relation to each other. This can ruin even the best font.

• Do not use more than 2 fonts on your website as using more creates disorder and makes it difficult to read. This is because the brain constantly has to deal with different formatting, and in the end, it will be perceived as disruptive to one’s reading.
• Bonus: If you have two fonts, the two fonts should have a contrast to each other. For example, you can use a serif font in the heading and a sans-serif font in the body text.

And a good little reminder that you should definitely take with you: “Use common sense not comic sans” 😉

That’s it, I hope you now feel equipped to tackle fonts.