The Importance of Legibility & Font Style to the Success of Your Website

The Importance of Legibility & Font Style to the Success of Your Website

This may not sound like the most exciting topic for discussion, but if you take some time to think of the minutiae of your website, and plan accordingly, I can guarantee you that the website as a whole will become so much more successful than it otherwise would have been. Font styling is one such factor that can impact the engagement and conversion of your website in a positive, and negative way.

 

This is a largely overlooked concept in website design and one that most people foolishly ignore entirely, choosing instead to opt for a ‘default’ font style, size and spacing throughout their website. This defaults most often to one that comes with their ‘theme’ or that their web company puts in place without really thinking it through.

 

Chances are, you’ve never considered the way the font on your website appears in any great degree of detail, apart from to choose from the usual styles like Georgia, Helvetica and Arial. Does this sound about right?

 

That in itself is no crime, all of these fonts are “standardised” across platforms and are very legible, by default. However, their aesthetic appearance & attraction to read can be vastly altered in the negative by making a few mistakes in confirguration which most people never even consider.

 

Take Our Website as An Example…

 

Perfect Ratio for Fonts on WebsitesFor instance, have you noticed that the written content you’re reading right now, and throughout this website is inherently easy to read? It doesn’t cause you to strain your eyes, the words don’t feel cluttered or packed together, nor do they feel clumsily large.

 

There is also a nice feeling of space when you’re reading the blog articles and pages within the website.

 

That, my friends, is not an accident. We work tirelessly, often in minute detail, to gauge, amend and adapt the fonts on our website, and those of our clients, to ensure maximum legibility for website visitors and also to get across the desired message of each individual website.

 

Believe it or not, there is a knack to this and it’s most often related to the relevant spacing between lines, based directly on the font style, size and width of page being used.

That’s right, there are at least 3 factors important to guaranteeing maximum legibility and removing eye-strain from your visitors’ list of complaints when visiting your website.

 

Use this excellent tool to figure out the “Golden Ratio”

 

1) FONT STYLE

There are often hundreds of fonts that you can choose for your website (in part thanks to services like ‘Google Fonts’). However, often the basic, old, antique “Web Standard” fonts are the best in terms of legibility. Fonts like arial, helvetica and georgia are ‘standard’ for a reason; they are very easy to read; granted however, they are a tad ‘boring’.

 

If you want to mix it up a bit, I’d suggest Helvetica Neue for the body font. At the moment, if you like the font on our site, we’re using “Open Sans” for the body, with “Oswald” for the titles.

 

In a typeface setting, both the fonts we are currently using, as well as the ‘standard’ ones, are inherently easy to read, being simple at their core – they’re not flowery, ornate or ultra-modern. Of course, in certain circumstances these fonts can feel a tad bland and perhaps don’t represent who you are as a company, which I fully understand – in that instance, just ensure whatever you use is easy to read.

 

Probably not as dynamic, true, but almost guaranteed, websites containing fancy fonts would be more legible without the fancy font. If you’d like some examples, I was surprised to see recently that ‘funky’ brands such as Innocent Drinks and Starbucks use some of the most boring typefaces around. And it doesn’t do them a bit of harm.

 

2) FONT SIZE

Size is a difficult factor to gauge at the best of times and fonts are no exception. Is ‘big and bold’ better? Or is small and understated the way to go? Personally, I believe in a mixed approach. I believe titles should be large, but not overbearing on normal pages, whereas body text should be fairly small, and I find a general threshold sits around size 14-16px.

 

Anything less than this, regardless of line spacing or font style, to me at least, appears cluttered and difficult – I feel, even with excellent eyesight that I am straining to read – this is not good, you must make things easy on your visitors.

 

By contrast, anything much larger simply appears clumsy, unless being used for a title or call to action – if in doubt, stick with the 14px-16px size I mentioned above and for most standard fonts like Helvetica and Arial, the size will be about right.

 

3) LINE SPACNG

If you have the other two factors set (style and size), the make or break factor then becomes line spacing. A tightly packed paragraph (especially a longer paragraph) will immediately put people off reading it altogether and that can be disastrous for you as a business – when people become uninterested in learning more about you and your company, you are in real trouble.

 

On the other hand, if you make it easy for them, psychology this can have a positive impact. I’m not going to get into the detailed psychology of the concept, but the basic theory to take away from this is that people, being inherently lazy, want you to make things as easy as possible for them.

 

This goes for when they go to purchase something from you, or when they speak with you… make things easy for someone to say ‘yes’ and you’re already onto a winner.

 

BONUS TIP 4) – PAGE WIDTH

Page width plays it’s part as well in creating the ideal balance for legibility and engagement in relation to font. Using the calculator linked to below, you will subsequently  be required to gauge your website page width and may have to tweak font size & spacing between different layouts of page throughout your website (for instance full-width at approx 980-1000px vs blog width at around 600-700px).

 

Bear this in mind when getting your web team to configure your website!

 

HOW DO YOU DO THIS, AS A “NON-DESIGNER”?

The truth is we don’t just guess this, it’s based on researched metrics which show that there is a balance to be struck between size, style and space, in proportion to page width, which is more likely to attract, engage and keep visitors on your site.

 

At the end of the day, you want visitors to come back to your site time and time again so making it easy for them to do this is essential – and therefore the legibility of your site is actually more important than potentially any other factor such as aesthetic design, logical structure and so on.

 

If you need a sure-fire way to make your website more attractive, a strong font ratio is the way to do it, and you can figure it all out easily by using the calculator right here.

 

Simply enter your desired font, desired size and the width of page (approx will do) and it will spit out the perfect ratio for legibility and design. If you know how to edit the code of your website you can do this yourself; otherwise, just take it to your web design team and they will be able to fix it up for you very quickly.

 

We have found this tool to be an excellent gauge for “perfect” font-design-size-spacing balance and I would urge you to give it a shot now and then compare what you feel is “perfect” for legibility to what currently sits on your site.

 

You might just be surprised how far from perfect your website really is.

 

 

 

Pin It on Pinterest