How to effectively use fonts on your website.
One of the key features of a visually engaging website is the typeface – the fonts used to present the text information of a page.
Not restricted to the screen, fonts are used everywhere we look – advertisements, newspapers and magazines to name a few – and if they aren’t used correctly, textual information may be overlooked or an entire site could dismissed as visually uninteresting and deemed not worth viewing.
To avoid this, it is vitally important to understand the five key rules below for using fonts on your website.
Rule #1: Choose your fonts wisely.
Don’t select fonts to use on your site at random. Examine what you are already using in your business – on your business cards, stationery, advertising and even in the actual business logo. A typeface can say a lot about a business so choose those fonts that reflect the professionalism or general “feel” of your company. For example, if you are a solicitor, don’t use a font which would be more suited to a day care centre.
Rule #2: Pay close attention to font size.
Font sizes on a webpage should generally be limited to the three main areas where you will use them – in the main heading, subheadings and in the body text.
Choose the three sizes for these areas and stick to them, making sure that your web developer uses sizes that are responsive to screen size (i.e. mobile, tablets and desktops).
Rule #3: Don’t use a wide variety of fonts on one page.
As with the rule above, there are only three main areas where you should use a different font – main heading, subheadings, and body text. Even on these three, you may choose to use one font for headings (of any type) and a plain style font for body text.
Try to stick to a maximum of three fonts. You will also need to ensure that these fonts complement each other like colours do on a colour wheel. No need to be an expert in typology – your eyes will tell you which font’s work with each other.
Rule #4: Spacing is key to font legibility.
This rule has nothing to do with the fonts themselves but more about how those fonts are spaced. White space is essential on a website to ensure that the content does feel cluttered to the viewer and all content is legible and easy to read.
Allow larger spacers above/below headings and ensure that your body text has a line height of at least 1.5 (similar to what would be used in a Word document). Once again, check all versions of your website for spacing on desktop, mobile and tablets.
Rule #5: Colours can kill a font.
In the early days of the internet, webpages were mostly text on a dark background. To emphasise various elements, web designers used a variety of colours to grab attention and the results were horrendous.
In the modern of the ‘net, we have a variety of tools at our disposal to grab attention so try to limit the use of multiple text colours in your website. My advice would be to stick to your brand colours for headings and use a plain colour for body text.
Final note: When choosing fonts to use on your website, be sure to check the copyright usage of each. Some fonts are free to use across the internet and others need to be purchased. Some fonts are licensed for desktop use only and are not permitted for use on websites. If you are not sure about a font you are using, search the name of the font on Google to avoid any potential copyright issues you might have.