A Word on Typography - Part 2: How to choose fonts for your website

Choosing Fonts

In The Principles of Beautiful Web Design, the author states that "that there are no bad fonts, just inappropriate ones". Using one or multiple fonts that suit your website's requirements in terms of legibility and visual appeal are key to underpinning the nature of your content.

Your Target Audience

The first thing to consider is your website audience. Who are you trying to reach out to? Your choice of typeface will depend heavily on the mood or theme you are trying to portray. Is it casual/serious? Are you the owner or a a new trendy Italian restaurant or an accountancy firm? Does your audience comprise of trendy 20-somethings or an older generation who are looking for your professional services? Defining your identity plays an important part in the typefaces you select for your website.

Next is the body text of your website's content, usually because there is a lot of it and so choosing a font which is clear and legible would assist readers. Make sure you choose a font which has plenty of letter-spacing, that is the white space surrounding your font. A typeface in which text is bunched up too tightly can be a strain on the reader. Line-spacing or leading is critical here too. You'll see that each line of text on my blog is given a height of 1.7 times the height of the letters, so that it is easier for your eye to follow the text.

Types of Typeface

Fonts are collected together in groups which are defined by stylistic features and the way the letters of each font are shaped.

Serif fonts

These fonts are characterised by the small strokes, called serifs, emanating from the base and stems of the letters. These allow for increased legibility for large blocks of text as the serifs at the bottom of each letter create a baseline for the eye to follow. Times New Roman is a popular traditional example of this type though modern serifs often have a blockier appearance.

Sans-serif fonts

Sans is from the French for without and basically describes fonts with straight edges. Arial or Helvetica are the best known examples.

Script or Handwritten fonts

For a more stylised and unique look, script fonts are great but use these with caution as their overly italicised or handwritten appearance can compromise legibility.

Fixed Width or Monospaced fonts

Reminiscent of the letters struck out on an old typewriter, monospaced fonts such as Courier New are those with letters which reside in equally spaced blocks of the same width. They are still used today by programmers and accountants who rely on the text in code or data to be arranged in uniform columns as well as rows.

Style Variants

Typefaces often, but not always have variants which are grouped into font families. These are different effects applied to the type to add emphasis. These play an important part in choosing fonts as the bold or italicised versions of the same font family can look quite different, and yet sit together nicely with the regular version, so that it may not be necessary to choose more than one font for different aspects of your design such as titles and headings.

Regular

The standard variant of the font. Arial or New Times Roman are the regular versions of these typefaces.

Bold

Fonts often come in a variety of weights. For the web these are numbered in increments of 100 from 100 being the lightest to 900 being the heaviest. Regular or normal text is usually defined with a weight of 400 whereas bold is weighted at 700.

Italic

The gentle sloping forms of some serif fonts add a touch of elegance to a design.  One brilliant example is Georgia. Italicised sans-serif fonts don't differ as much from their upright counterparts.

Condensed

The letters of condensed fonts have widths which are narrower than those of the same family. These will often have the word condensed or narrow as part of their font name for example, Arial Narrow. Condensed or narrow fonts are often a poor choice for body text as the closeness of the letters can affect readability.

Black

The ultra heavy version. Arial Black is an example.

How to pair fonts

Choosing which fonts compliment each other can be tricky. But here is some advice for combining fonts:

• Choose your body font first

  Select one font for the body text which satisfies the requirements of your project. This will root your content and allow you to select other fonts which can compliment (or contrast) the main text on your website.
  
  

• Use two but no more than four

  If you have a wide selection of contenders for your design try to narrow it down bearing in mind your target audience. Also, adding extra fonts to your website can increase the page loading time if you have chosen to use a typeface from a web font service, as that font must be downloaded and rendered on your visitor's device.
  
  

• Be consistent

  Establish the role of your fonts in your content design. Use the same fonts and styles across your body text, titles, headings, sub-headings, quotes, lists and navigation. This will help to unify your design.
  
  

But above all remember to have fun and experiment with new creative ideas!

Typography tools

Here are some great resources to help choose and combine fonts for your next web design project:

• Combining Fonts - Hoefler & Co.
  www.typography.com/techniques
• Upping Your Type Game - Jessica Hische
  www.jessicahische.is/talkingtype
• Typecast
  www.typecast.com
• Google Fonts
  www.google.com/fonts