How to Choose A Font For Your Website

Blog > How to Choose A Font For Your Website

Posted By Create

Tags: website design

Fonts, typefaces, faces - whatever you want to call them, they are integral to website design.

We'll be looking at some of the most popular font choices for websites, discussing legibility and suitability, and talking a bit about exciting new developments in Web Fonts.

The main font you choose to use on your website is incredibly important to how visitors perceive it and the ease and speed with which they can take in what you have to say. It's right up there with the colour scheme you use and the site content itself.

By using a font that's difficult to read or incompatible with your product or brand logo, you're making your content uninviting. If your visitors find your website harsh on the eyes in any way their first impression will be tarnished and you'll lose trust in your brand.

Considering the importance of font choice, we've brought together some helpful information to help you make your choice of font a little easier.

Popular Fonts

Our first stop takes us to three of the most popular fonts used on the web today. They are available on almost any computer or mobile device, and are part of a group of fonts know widely as 'web-safe fonts'.

I’ve chosen these three in particular as they remain readable at almost any size, they're versatile enough to be used in a huge variety of website, and are very recognisable and familiar to web users.

Arial - The True All-Rounder

Arial Example

Arial is a 'sans serif' font, meaning it doesn't have those extra little flicks at the end of the lines. It's safe to say that Arial is the widest used font on the web; you'll find it absolutely everywhere. Its legibility at almost any size and its likeness to the infamous Helvetica (sadly not as web-safe as Arial) mean it's very popular among web designers.

In the above example you can see that you can get a lot of variety out of it, and make even large blocks of text very easy to read.

Georgia - Classic & Clean

Georgia Example

If you were ever looking for a web-safe alternative to Times New Roman, the 'serif' font Georgia is a perfect choice. Some publishers still use Times New Roman in printed material, mostly out of habit more than anything else.

By choosing Georgia for the main text on your website you’re getting something familiar to visitors who are used to reading long chunks of text in book and in newspapers. This is why it's great for long form reads on the web.

Courier - The Vintage Typewriter

Courier Example

Courier is a 'monospace' font, which is a font that mimics the look of a typewriter. On the surface it can look a bit cold and impersonal, but place it alongside warm colours on your site and its typewriter heritage will show through in all its vintage goodness!

Due to this the use of Courier works wonders on websites that are based around homemade goods and craft items, especially those with light, pastel colour schemes. It’s also very easy to read in short, sentences, bullet points and the like. However, it's not recommended to use Courier for long, uninterrupted reads.

Legibility & Suitability

Can the text on my website be easily read by my visitors?

There’s a reason newspapers are still printed with black text on a white background. It’s without doubt the best way to display text that's intended to be read at length as it’s the most comfortable on the eyes and the high contrast means it can be easily read in different levels of light.

However, there will always be a need for some elements of your website to stand out, or perhaps black and white don't fit with your website's colour scheme? If you need to, you can get around using black on white by ensuring the font you use is legible at different sizes and the space between the characters (also known as letter-spacing) is suitable.

If you ever need to check what a text type will look like on your site before you start writing the content, try using some Lorem Ipsum, placeholder text commonly used in web design and publishing in general.

Does the font fit well with the look of my website?

If your business has a website selling plumbing supplies, you probably don't want to use Comic Sans as the main font. When considering fonts, ask yourself these questions: Is this suitable for my website? Does this fit with my business? What does this say about my company? Think hard about the kind of audience you hope to see on your site. If possible, show your font choices to friends and peers to see what they say.

Of course, the choice is yours when it comes to your website’s font, but I hope you find that by taking a look at different fonts and thinking about the important effect each one has on your website you’ll appreciate their importance when updating your current website or when creating a new one.

Fonts of the Future: 'Web Fonts'

Now that you’ve seen some web-standard fonts and had a taster on how they are best used, you should be well-served to create your website today.

But what of tomorrow? What are the fonts of the future? The answer lies in Web Fonts, and in short, the web is just getting started.

Soon enough the majority of websites will have the same visual flexibility as published print, allowing you to use a wide range of stylish fonts on your website.

Here are a couple of examples of exciting new Web Fonts:

Web Font: Style Script

Style Script


Web Font: Proxima Nova

Proxima Nova Example


How will this work without the font being stored on your computer? Web Fonts are stored on the web, so it doesn't matter what computer you're using, your website's fonts will still look awesome.

This development in online typography is still in its early days and the way it's done at the moment isn't perfect (there's no one-stop shop for Web Fonts, for example). Web Fonts like these are currently a very advanced feature of many new cutting-edge websites. But this is still something to bear in mind for the future. When these features become widely available, be sure to take advantage of them and make the most of them in your website design.

For more on Web Fonts, take a look at Benjamin's roundup of the Ampersand Conference of Web Typography.

Was this blog helpful? Have you got any tips and tricks you’ve used with fonts on your website? Let us know in the comments below.


Blog Search


Search

Get In The Loop


Receive business tips and web news direct to your inbox.