Tips for choosing fonts for websites

When designing a website, fonts and typography (the way fonts are displayed) often fall down the priority list to colours and other visual elements. Yet choosing fonts for websites can have a significant effect on both the look and message a web page conveys.

selecting fonts

When selecting a font for your website, there are two questions to keep in mind:

  • Is the font web safe? Ideally select a web safe font – eg a font that is commonly found on most computers. If you choose a font that many computers don’t have pre-installed, the font will not display unless the user has also downloaded it. The browser will simply load its default font instead.
  • Is it in keeping with your brand? When selecting the font for your website, consider the audience and purpose of the page as well as the style and message you want to convey. Is the font in keeping with your brand? Does it clearly communicate and enhance your message?

popular web fonts

Although there are many fonts to choose from, the fonts used on websites tend to be serif and sans serif fonts as they are modern, easy to read and web safe, so more readily accessible to most users.

Serif fonts. “Serifs” are the small finishing strokes on the end of a character. Example serif fonts include Time New Roman, Palatino and Garamond.

Sans serif.  “Sans serif” fonts do not have these small finishing strokes. Examples of sans serif fonts include – Arial, Helvetica, Tahoma and Verdana.

More recently, the choice of web safe fonts has increased with the introduction of Google fonts for example – which do not rely on users having fonts pre-installed on their computer.

using different fonts together

Once you have selected your font, consider how to use them on your web page to enhance the message you’re trying to convey. On any web page there is usually more than one element of text and, depending on what you are trying to achieve, different typefaces or fonts, when used together, can have different effects. These can be classified as concordant, conflicting or contrasting.

  • Concordant.  This is where one type of font is used without much variety in style, size and weight. Italics and larger headers could be used to give some variety. It gives a harmonious and quiet feel and could be described as formal, or even dull in some situations. However, some situations require this type of feel. So concordant is not necessarily bad, but you should be aware of the impression you are creating.
  • Conflicting.  This is when fonts which are similar but not the same are used. In this situation, the similarities can be disturbing so they conflict. When two fonts look alike but are not, it can look like a mistake. This is one to avoid.

  • Contrasting.  This is when fonts that are distinctly separate and different are combined (see the examples above, where Sans Serif and Serif fonts are used to contrast against each other). This is often visually appealing and exciting as strong contrasts attract our attention. Not only striking, contrasting fonts can also enhance communication as attention is drawn to key areas. Fonts can contrast in a number of ways including size, weight, structure, form, direction and colour.

Considering these factors when choosing fonts, and when adding content to your web pages, can make a big difference to how effective your website is at attracting, engaging and communicating to your target audience and ensuring they return time and again.

get in touch!

We have been designing and building bespoke websites for organisations in Oxford for over 12 years, helping them to work more effectively and realise their full potential.

Get in touch using the contact form, or calling 01865 794009.


leave a comment

Your email address will not be published. Required fields are marked *.

Advantages of Google Fonts New website for Patient Perspective