Website Typography

Posted on 19th November 2016 |

Good website typography sometimes vacates the arena, there are many websites that cannot resist going all-out for the fancy stuff.

Are you Typographically Challenged? You know that simple is best, but when you are presented with a delicious array of typefaces, maybe you go overboard. Here we get you thinking

Let’s have a look at what makes good typography and why you should assess what you use on your site.

Simple is best, yes?
OK, so maybe you know that simple is best, but there is a definite line where simple can become plain dull! Recognising the difference between elegant simplicity and clunky dullness is probably harder than you think. A trained, practised designer should be able to describe why one font is preferable over another. An additional factor is be readability on the web, and this is where more thought is needed. Gone are the days when you had literally a handful of fonts to choose from (for example: Times Roman, Geneva, Arial, Verdana and a few more), now there are many very nicely designed fonts to choose from.

Get to know your Arial from your Lato, your Open Sans Condensed from your Oswald, your Lora from your Roboto Slab.

But where should you use them?

The following also applies to print design, but as more and more content is produced for screen viewing, it is worth reviewing time honoured typographical rules.

Bodytext

Second to your brand design, this is one of the most important visual parts of your website. In fact, typography is so important, it can make or break the professionalism of your site. Bodytext is going to be read and needs to have good contrast and an even colour – by that we mean typographical colour. It needs to be unobtrusive and its tone will emphasise the brand values. In addition, a good typeface will have several variations to make up a font family, this will include different weights, light, regular, bold, extra bold and so on. Using different weights help make the written content easier to read and helps create attention-grabbing sections if done well.

Typefaces for body text are designed to be easy to read, are sturdy and work well at small sizes, the x-height should be fairly large, giving the font a nice, open feel. Fonts that are too narrow or too wide wide will be harder to read comfortably. Fonts that show patches of darkness and areas that seem to disappear will be harder to read on the web.

Line Heights and Letter Spacing
Website typography is much newer than typography for print, in the last few years we’ve had the benefit of fonts created specifically for the web. But this throws up a world of potential excess! So many to choose from, so many quirky, fun fonts, it can all be quite dizzying. A designer may decide to have a bit of fun with tracking (letterspacing) or leading (line height). Text set too tightly together will be harder to read, particularly if used in Bodytext. Web themes can sometimes come with pre-determined tracking which may or may not work – simply adjust this to suit your brand.

Headings, Subheadings and Display Fonts

A bit more scope for personality is not a bad thing, but beware of choosing a font that is very distinctive and of the moment – it could very soon date your website or document.

Putting fonts together need not be avoided, in fact, it can add interest and personality to your brand. Combining fonts is perfectly permissable, but it is important to apply some best practices.

Combining Fonts

Serif with Sans Serif
This is a classic example of pairing typefaces, sans serif for the heading and serif for the body text or vice versa, both are equally acceptable. Attention may need to be paid to the variation that you settle upon, look at the over all shape of the fonts. Are they similar colour? Is one a narrow font, the other extended?
Remember, opposites attract.

Avoid Similarities
Putting two Serifs together, or two Sans Serifs can often clash. However, if you put a strong Slab Serif with a modest serif, the difference between the two can be enough to get around the problem. The Slab Serif would have more punch and personality thus creating good differentiation between the two.

Two is Company

Don’t get carried away! Explore web fonts and choose a pair that work well and have a variety of weights, but just keep to the two. Mixing too many fonts will just end up looking amateurish. Explore classic combinations of Serif and Sans Serif fonts and be sure that you stick to them. It is surprising how often I notice good old Arial creeping in where everything else is Open Sans, Lato or Oswald. Just because there are hundreds of specially designed fonts for the web, doesn’t mean you have to use them all. And certainly not all at once!

If your brand is fun and quirky, by all means use a fun and quirky font. But it is better to think about how the visitor to your site is going to feel when they start to read your content. Choose a simple sans serif or serif font for the body text, leaving the quirky font for the headings and emphasis.

Related posts:
Web Design Trends for 2016
Logo Design Tips