Choosing the right web font for your charity

Web fonts

When creating a new website, typography can easily be overlooked. It’s easy to assume the fonts specified in your brand guidelines will work on the web. Unfortunately a lot of the time they do not. In this post, we take a look at the importance of web fonts and how to choose the best ones for your charity website.

Why your brand font doesn’t work

When creating a brand, designers will choose typography that works to represent your image across all media. They are not primarily choosing a font with your website in mind. Unless they are designing both the brand and website at the same time, the font will likely be a desktop font that is created specifically for print purposes and not optimised or licenced for the web.

Web safe Vs Web based

Web safe fonts

These are the fonts Microsoft, Apple and Linux operating systems have loaded as standard. These fonts will always display on the web as intented if they are already on your computer. Unfortunately, there aren’t many to choose from, and a few of them rate terribly for legibility and readability. You can view a list of these fonts here.

Web based fonts

These are not preinstalled on your computer. Instead they are downloaded temporarily by your web browser whilst viewing a website. Google fonts and Typekit are two of the largest Web based font services, and the ones we like to use. Many professional Font Foundries have allowed their font software to be licensed in this way so that the typefaces can be used on your website.

You may not find your exact brand font in the libraries offered by such web based font services but the prospect of finding a good match is quite high.

How to choose the right web-font

The whole point with type is for you not to be aware it is there...If you remember the shape of a spoon with which you just ate some soup, then the spoon had a poor shape. - Adrian Frutiger, type designer of London’s street signs 

Legibility vs Readability

Legibility is how well individual letters are read whereas readability is how easily body copy is read. Body text need to be easily readable and headlines need to be legible. When choosing a font for body text, choose a font that is 'invisible'. An 'invisible' font would be something that is not fussy, decorative and distracting.

Headlines and calls to action on the other hand, need a font that is legible with a level of interest. It needs to attract attention without being too decorative that it becomes unreadable.

In most cases having a combination of two typefaces works well which allows you to have a more stylistic headline font and an easily readable body font.

What to choose

As previously mentioned, Adobe Typekit and Google Fonts are two of the leading web based services available and we normally recommend choosing fonts that can found in one of their libraries. Together they offer a wide variety of typefaces from professional, global Font Foundries.

With thousands to choose from, where do you start? To help you out we’ve selected just 5 of our favourites. They balance legibility, readability and are consistently used and considered as favourites on the web.

Five great fonts and combinations

Raleway

WebFonts-Raleway

WebFonts_Raleway-goodbadcombo

Both Raleway and Adelle work well as Headline fonts but as a body font, Adelle competes for attention.

Proxima Nova

WebFonts-ProximaNova

ProximaNova-goodbadcombo

Proxima Nova is safe but too simple and indistinct when paired with Raleway as a body font.

Open Sans

WebFonts-OpenSans

OpenSans-goodbadcombo

Open Sans lacks character as a headline font but works well in the body.

Adelle

WebFonts-Adelle

Adelle-goodbadcombo

Adelle works well as a headline font but is less readable as body text.

PT Sans (Normal, Caption, Narrow)

WebFonts-PTSans

PTSans-goodbadcombo

PT Sans is a great body font paired with something like Oswald for headings. See how it doesn't work the other way around?

What's your favourite web font?

Do you have a favourite you want to see more of on the web? What do you think of these 3 fonts created specifically to support good causes? Let us know in the comments.

Date: 
14 March 2016
Amy Reinecke