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?

Cause-based fonts

Over the years font-creation has been an artistic outlet driven by charitable causes. Here are three examples of fonts created by social motivated type face designer. 

1. Homelessness

Through engagement and participation the Arrels Foundation used custom typography as a tool to support the homeless, cutting out the need for a traditional fundraising campaign. Homeless Fonts takes the handwriting of individuals supported by Arrels, and creates unique fonts from their handwriting. These fonts are then sold on to brands with all profits going to the 1400 people supported by the Arrels Foundation.

HOMELESSFONTS-Example-Luis

There are 10 volunteer designers currently working on digitising the Homeless Fonts and each font takes about 2.5 months each to develop. Shows you just how much work is involved! Good for them!

2. Global Illiteracy

World Heavyweight Champion Wladimir Klitschko has his eye on knocking out global illiteracy amongst children. The champ gave his right hand to the job and punched out the alphabet on 26 separate canvasses! Each of his custom-crafted letters was then auctioned off as separate pieces of artwork. The campaign has so far raised over €136,000 and is working in partnership with the ‘Heart for Children’ charity. Plus the font is completely free and available for download.

TypeForGood-Klitschko

3. Sustainability

There has been much debate over printing, ink and the sustainability issue. Ink, oil, forests - there are a lot of natural resources at stake. Printing double side and using your printer's ink-saving options, we hope?! Now granted, this project is not for charity purposes but it does hopefully bring awareness to the issue. Ryman who? The Ryman Eco font claims to be "the world’s most beautiful sustainable font”. It also claims to use 30% less ink than Arial, Times New Roman, Georgia and Verdana.

If it's not quite your type, consider switching to Garamond. One young teen from Pittsburgh discovered his school could save 25% on ink consumption from this small change.

TypeForGood

So while none of these are web-ready fonts and therefore unlikely to ever be used on one of our charity websites they demonstrate an often overlooked way to build a charity brand and cause. 
Date: 
14 March 2016