How to Choose Fonts for Your Website

Choosing the right fonts to use on your website is no easy task. Balancing design and style with usability and performance can be hard. Some aspects you should be taking into consideration when choosing fonts to work together are:

• Contrast – choose fonts from different classifications
• Style & Decoration – working with italics, bolds, plain style, underlines and outlines
• Scale & Hierarchy – typeface sizes to be different for each heading and body text
• Classification – combine different classification like sans serifs and serifs
• Structure – how it works with other typefaces, as very similar structures will clash
• Colour Texture – this can help with the contrast to the fonts
• Mood – formal to casual, fun to serious, modern to classic, keep the mood within the project you are designing

The amount of fonts on the web are growing all the time. When the internet first started there were only a few fonts available to use in designs, but now there are hundreds of fonts that you can easily use on your website. Google Fonts offer a wide range of good looking, modern fonts, that are entirely free and are simple to embed into your site, while Adobe Typekit gives a far more extensive range, as well as better performance, as part of their paid package. Not all fonts are web friendly however, so you need to be careful if you are attempting to match text on your website to existing print text or logos, as you may have to find an alternative font as a replacement instead.

Whatever font you may choose, ensure that it is easily legible and not overly complex, as well as fitting in with your site and branding. Typography is something that people do not necessarily recognise as that crucial of an element to a design, however it has a massive effect on your website, so choosing the best font is not something to not over look. When picking a font you have to think about the screen size and resolution of the devices that it may be viewed upon and how it easy to read it will be on them.

When fonts display on the web, they may often render differently on different browsers. This can be a pain, but there are ways to get around it and make them look correct. A simple way is to specify in the CSS the specific browser and counteract the issue that has caused it to not display correctly. I always find that Firefox makes certain fonts a heavier weight than they display on Google Chrome. Internet Explorer can also be even more problematic as far as displaying fonts accurately goes, so you may have to spend some time getting all browsers looking consistent.

Choosing the correct font is important as it can change the look and feel of the design. When using a font for body text you need to ensure it is legible and that the line height looks ok and will work well with a lot of body text. Also, you need to take into consideration the other elements of the type font as there are always normal, lighter, bold, italic styles to choose from. You will often find that you are required to use a subtle mix of bold, italic or simply underlined font styles, in order to make certain text elements stand out appropriately, so how these will look are key factors when choosing a font. If the bold weights are just so heavy that they’re eligible, then it is likely to be rather useless on your website. Font sizes are very important too. Getting the correct font size, even if it is a pt or px bigger, can make all the difference.

With headings, you have more scope to choose a creative, bigger and more eye catching font. With the body text you want a more simplistic font as you want it legible for the viewer to read and not get a head ache. With body text, the best practise is to think of a newspaper – black or dark colour text on a white or light background. This will help you to make the text very legible. If you used, for example, a black background with a yellow colour text on top of it, it won’t matter what font you use as it will be difficult to read in a long amount of body text.

When designing you do not want to have several different type fonts on a design. I would recommend to aim for having two different type fonts, one for headings and another for body text. Even choosing two different type fonts can be dangerous as you do not want them to clash; you want them to contrast, but work well together.