Freeola posted on Thursday September 15th, 2016

Choosing a suitable typeface is one of the crucial decisions you will have to make when it comes to designing your website. Your selected font is what is going to carry the information you are wanting to communicate to your audience. One should consider what connotations they want their font to carry. The font you choose, in some respect, carries the tone of language of your content.

A Font or a Typeface?

A font is a certain weight or size of a typeface. For example, Times New Roman is a typeface and Times New Roman in Bold would be referred to as a font, as the name is specifying a particular weight. Before computers were used in the mainstream for design everything had to be printed by hand with physical pieces of type which were little blocks. A printer, otherwise known as a typesetter, would have thousands of physical pieces of type - like little blocks, each representing a particular character of a particular font. If you were to print in Helvetica, for example, you would need blocks for every different size and weight. Each individual weight and size would be referred to as a font.

Choosing a font family may seem easy but there are a few things you should consider when doing so. It is important to have a clear font which can be easily read. Be cautious when choosing a font as it is essential to ensure that the font you are using is suitable to be viewed on other devices. Some displays on other devices may have a lower resolution to your display and therefore the type may not appear as clearly as it will do on your display. If, for example, you were designing an e-commerce site and chose a font which was difficult to read or even illegible on some screens then you could potentially risk losing business. It is all about making a good visual impression to your customers. Having a clear and legible font will make your audience feel comfortable using your site as it will be easy to use and thus far easier to read.

It is also important when considering your font of choice to ensure that the font you are using is widely available on other devices. The safest solution is to use a web safe font. A web safe font is a group of fonts which are virtually on every modern device which can access the internet. Using a web safe font you are guaranteed to have virtually no problems.

Below is a list of the most common web safe fonts. Note that some web fonts are substituted on other devices, e.g. Mac:

  • Serif
  • Georgia
  • Palatino Linotype/Book Antiqua
  • Times New Roman
  • Sans-Serif
  • Arial/Helvetica
  • Arial Black/Gadget
  • Comic Sans MS
  • Impact/Charcoal
  • Lucida Sans Unicode/Lucida Grande
  • Tahoma/Geneva
  • Trebuchet MS/Helvetica
  • Verdana/Geneva
  • Monospace
  • Courier New/Courier
  • Lucida Console/Monaco
  • serif;
  • georgia, serif;
  • 'palatino linotype', 'book antiqua', palatino, serif;
  • 'times new roman', times, serif;
  • sans-serif;
  • arial, helvetica, sans-serif;
  • 'arial black', gadget, sans-serif;
  • 'comic sans ms', cursive, sans-serif;
  • impact, charcoal, sans-serif;
  • 'lucida sans unicode', 'lucida grande', sans-serif;
  • tahoma, geneva, sans-serif;
  • 'trebuchet ms', helvetica, sans-serif;
  • verdana, geneva, sans-serif;
  • monospace;
  • 'courier new', courier, monospace;
  • 'lucida console', monaco, monospace;

When coding you can use multiple fonts for the browser to fall back on. You do not necessarily need to use a web font as your desired font, you can use them as a backup incase a device viewing your website does not support your desired font. It is recommended that you choose a web safe font which looks most similar to your desired font.

{font-family: futura, 'century gothic', verdana, sans-serif}

You are not just limited to using the list of fonts stated above. Web fonts have become increasingly popular and with Google's newly designed web font catalogue it is easier than ever to implement a wider variety of fonts into your website design. Read about the updated Google Fonts interface and check out our article about using web fonts on your website.

Article Comments (0)
There are currently no comments on this article.

You'll need a Nickname to leave comments.


Thank you for your comment. Your comment has now been successfully added to this post.