In this week’s guest blog post, Susie Tobias of Wise Genius discusses how best to choose the right font for your website. Susie runs a successful web design company and has experience of buidling sites for a variety of different companies.
The content of your website is the key to its success. How your content actually looks is vital to creating a positive impression. In order that visitors to your site will absorb that content, you need to decide what feelings you want to evoke in your target audience and what kind of voice you want the text to have. This is where choosing the right font comes in. The following advice will hopefully help make this decision easier for you.
Define your tone
The most important task to undertake before you begin choosing fonts for your website is to define the overall tone of voice you want the content to convey. This will be informed by your target market, the purpose of the website, and the message you want to get across. Is it fun, informal and aimed to a young audience, or do you want to strike a more serious and formal tone?
How legible your content is, is crucial to engaging your visitors. Text that is hard to read could scare your audience away. A good test of legibility is to read the content in your chosen font yourself. Other aids to readability include line-height (aim to set this at 1.5 times the text size for body content), font-size and colour.
Serif or sans serif fonts?
There are two main typeface classifications to consider when selecting fonts for your website – serif and sans-serif. Whilst other classifications exist, it is these which provide the best choice in terms of legibility and availability.
Serif typefaces include extra strokes to embellish the letters, and are considered classic and timeless. On the web, they are generally better for use in headlines and headers than body text.
Sans-serif fonts do not have any adornment and give a contemporary, modern and cleaner feel to text. They look great on the web and are widely considered easier to read, especially at small sizes.
Safe for web use?
An important consideration when picking a web font – will it actually show up on my website? There are relatively few fonts that provide consistent results across different operating systems and browsers. These are known as web safe fonts, and include such favourites as Arial, Times New Roman, Georgia, and Verdana.
While this may appear to severely restrict the variety of fonts available to you, there are an increasing number of ways to expand this selection. The most widely applied solution is the font-stack, whereby a number of fonts are listed in your website’s CSS (cascading style sheet) file in a hierarchy of preference to substitute if the visitors system does not have the font specified.
A more recent development is that of font embedding services, some of which are free. The Google Fonts Directory has a limited number of free fonts available for use on your web pages, whereas a service such as Typekit gives you access to a much wider variety for an annual fee.
Ideally, your body text should be sized between 10 and 12 pixels; 14 pixels will give you even better readability. You don’t want your readers squinting at the screen, so again, test whether you can read it clearly first.
Colour & contrast
In terms of the combination of font and background colour, it really is best to play it safe with black or dark grey text on a white background. It is hard to make anything else work for a large body of text, regardless of your font choice.
Experiment with Typetester
A great tool for helping you make your font choice is Typetester. It allows you to add sample text and apply a whole range of options, including typeface, line-height (leading), alignment, colour and background colour to 3 columns in order to compare them side by side. This is a fantastic way to experiment with different fonts and see how they actually look on the screen.
No comic sans
No advice about choosing fonts for a website would be complete without this word to the wise – if you want to retain any shred of professionalism at all, do not use Comic Sans anywhere on your website. Ever! Check out Comic Sans Criminal for a history of the font and how to use it appropriately.
Trust your instincts
At the end of the day, trust your instincts. Sometimes a font just looks right without you being able to explain why. Go for it!
Guide to CSS Font Stacks: Techniques & Resources
Review of Popular Web Font Embedding Services
Choosing the Right Font: A Practical Guide to Typography on the Web