Finding a friendly type face

5 January 2021

Text is the interface. You can remove most things from most websites without losing the understanding of what it's reason for being is. But if you remove the text you are lost. If there is no title to tell you what the page is about or if there is no paragraph to explain the concept, then you'd probably go straight for your browser's back button. Without text you can't even search for a video or an image or appreciate someone on Behance. Text is the foundation of online communication.

And the foundation of text is the typeface.

Typeface considerations

Accessibility

I want my website to be accessible to everone, so a good place to start with fonts is with the people who have the most problems with them: people suffering from dyslexia

But that is not the only group that will be challenged by my font choice. There are also all the people who don't have the Latin alphabet as their first alphabet. Just like communicating in a second language, learning a completely new alphabet is hard. Even more so if we encounter a font that has very different shapes than the ones we learned.

And if I can make it easier to read for the people who have the most problems with it, then it will probably be easier to read for everyone. Win-win.

(There are fonts available that claim to be beneficial to people suffering from dyslexia, but with little evidence to back the claims. It may not really matter, however, as those fonts seem to annoy most everybody else.)

The British Dyslexia Association have a dyslexia–friendly style guide with lots of good advice, including:

Use sans serif fonts, such as Arial and Comic Sans, as letters can appear less crowded. Alternatives include Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.
Dyslexia-friendly style guide

(I will not go into detail about "serif" and "sans serif" typefaces here. If you would like to learn more, Luke Millar has written an excellent primer on typography. Go on — I will wait.)

Sans serif fonts have less embellishments making the shapes and their recognition simpler. The small serifs (especially at smaller font sizes) may also blur the letter shape for people who don't have the latest and greatest retina-resolution screens

Don't use similar letter shapes

It is important that the letter shapes don't look too similar. For example, that the capital "I" and lowercase "l" are different, so that the word "Illicit" doesn't become too hard to read.

Use open letter shapes

Letters like "c" and "e" should have wide openings so that they don't look similar to "o". Again, this is important especially with smaller font sizes and older screens — or people with slightly deteriorated vision, who might see the shapes blur together.

Avoid mirror letters

There is an argument for avoiding a font with mirrored letters — i.e. where "b" and "d" and "p" and "q" are just mirrored version of each other. It should be easier for people who have problems with letter flipping to distinguish between the letterforms if they are slightly different. I am not sure how true — or at least valid — that is for a website like mine, that is only occasionally read. I imagine, for that to have any effect, the font would need to be familiar to the person reading. So, that may be more of a concern for a site browsed more frequently, such as a news website. None–the–less, being able to avoid mirror shapes would certainly not make the reading less accessible and it also tends to make for a more harmonious typeface.

Custom or system fonts?

Why worry so much about finding the perfect typeface when you can just use the fonts installed on the users computer?

This would:

use less bandwidth
give faster loading times
avoid the Flash Of Un–styled Text ("FOUT")

The lovingly chosen font may not even be displayed — or even any of the fonts specified in the fallback list. Users may even override the font choice altogether with their own stylesheet. Fonts on the web is a fragile affair.

That is all true. But there are ways of optimising custom fonts. And for the majority of people, who see my font and find reading my website a pleasure (hopefully) all the hard work will be worth it.

Encode Sans

After many trials and tribulations I settled on Encode Sans designed by Pablo Impallari and Andres Torresi, refined by Jacques Le Bailly, and upgraded as a variable font by Stephen Nixon and Marc Foley.

It is, in my HUMBLE opinion, a very readable typeface with simple, open shapes. It is a variable font and I can tweak both the width and weight, so I only need one font file to do all the things. It also aligns quite well with Verdana in (adjusted) width, weight, shape and x-height, which should make the transition less jerky when it has been loaded.