What The Font: How To Choose Fonts For Your Website

I can pinpoint the exact moment I became interested in web design. A lecturer announced that as would-be photographers, learning some basic graphic design principles would be useful to us, and to that end, they were going to show us a documentary about typography. Cue groans from the whole class (myself included).

A lot of those groans were still audible by the time “Helvetica” had finished, but I was transfixed. It was like a whole world had just unfolded in front of my eyes, one that had always been there but I’d somehow never noticed before.

I was instantly addicted, and for pretty much the rest of my photography degree I found myself working with just as much enjoyment on poster designs for our exhibitions, photo book layouts and our class catalogues, as my own photography work.

My love affair with typography is still going strong a decade later, and it’s been fantastically useful as well as fun. You see, web design is often described as being about 90% typography, and that makes sense when you think about it: most of the content we consume on the web is in the form of the written word.

So it stands to reason that the fonts you choose and how they are laid out for your reader is going to make a big impact on how much (or how little!) of your content they’re going to absorb.

That’s why today I thought I’d introduce you to some basic principles for choosing your fonts, and enhancing your overall website typography.

01. Choose a clear, readable, body font

First, in case any of you are unsure what a body font is, let’s quickly run through some super simple typography definitions:

BODY FONTS
Your body font is the font you use for most of the text on your website. The main priority for your body font is that it is clear, simple, and readable – nothing fancy required here. This very sentence is part of my body copy, and uses Lato Light, a nice, legible, sans-serif font.

DISPLAY FONTS
You’re probably ahead of me on this one: display fonts are unsurprisingly used for text that you want to display more prominently on your website, like article headings or page titles.

SERIF FONTS
Those traditional looking fonts with the little lines decorating the end of the letter strokes. The most well known example of a serif font on the web is probably Georgia.

georgia

Sans Serif Fonts
Again, this may seem painfully obvious, but sans-serif fonts are the more modern looking fonts without those little flourishes; the most famous of which is probably my good old friend, Helvetica.

helvetica

When choosing a body font, there’s a lot of articles that go back and forth over whether it’s best to choose a serif or sans-serif font for readability. Web designer depot has even created a handy infographic outlining the arguments for and against each one.

Personally, I really don’t think it matters that much – so long as you choose something simple, that fits with the rest of your website design, and doesn’t break the following rules, either is fine.

02. Make sure your choices complement your logo – rather than competing with it

Design is very subjective, so this first step is probably the hardest. I think it’s a lot easier though if you start by looking at what definitely doesn’t work, and move forward from there.

For example, let’s look at one of my client’s websites: S. K. Cakes. Her designer had created a logo that was very ornate and flowing, with a swirly, calligraphic font. It gives the whole logo quite a traditional look and feel (ideal for someone in the wedding cake business!), which is why I chose a serif font, Playfair Display to enhance this impression.

s-k-cakes-home

If I’d gone too similar to the logo font and chose something super flowing and calligraphic, the end result would have probably felt a bit OTT – the page titles and logos would have been competing for your attention with each other.

At the other end of the scale, let’s say I’d decided to go in a different direction completely, and choose something ultra modern and geometric, like Lombok. Now it’s a cool looking font, and there’s a lot of things I like about it. But in the context of this website it would just look weird and out of place.

So look at your logo: what overall impression do you get from it? Traditional or modern? Feminine or masculine (or neutral)? Bold and attention grabbing, or simple and understated?

That should give you some clear guidelines when you go to choose a display font – and if you're still having trouble, shout me out on Twitter. I love typography so much I’d be happy to give you some suggestions absolutely free of charge – no catch, just tweet a link to your website and I’ll take look.

03. Establish a clear hierarchy

Of course you might not need a unique display font at all – plenty of websites just use one single font for everything: body copy, headings and sub-headings. They use the principles of typographic hierarchy to ensure their page titles and other copy all remain clear and distinct from each other. Here’s how it works:

Size Does Matter...This one’s easy: the bigger the font, the more noticeable the copy. Simply making your heading 1.5 to 3x larger than your body copy will instantly make them stand out more.

...So Does Width...Your font weight is also an easy way to add a level of visual hierarchy to you website copy. A bold heading is going to stand out more than one that is a normal weight, even if they are the same size.

...and Position is Important too! Get your mind out of the gutter, we’re talking about typography! The position of your headings in relation to the rest of your copy is also an easy way to establish a hierarchy – a big bold, center aligned heading is automatically going to grab people’s attention first.

Putting it All TogetherSo for your h1 heading (that’s your top level heading, the one you would use for page titles) you’ll probably want to go for some combination of the above: large, centered, possibly bold text.

For sub-headings, you’ll still want them to be larger than the rest of your copy, but maybe keep them a normal weight, and left aligned – that way they won’t compete with your main heading.

Finally, we come to things like image captions or any text that actually takes a lower priority than your body copy. Here you’ll want to apply the same rules, but in reverse: making the text smaller, and possibly italicizing your text – it should still be readable if someone gives their attention to it of course, but it should be the kind of text that your eye almost skims over without noticing.

04. Above all, keep it readable

Unsurprisingly, I spend a huge amount of time looking at websites. A vast part of my job involves simply keeping up with the ever changing landscape of web design and online marketing, so I read a lot of articles in my daily life.

Which is why I absolutely hate arriving to a website, which promises great content, but then delivers that content in a way I literally cannot read. I’ve mentioned several of these issues indirectly already: websites with clashing fonts, that distract me from the content. Illegible body fonts. Or an absolute mess of competing font sizes and weights, that offer no visual clue as to what’s important and what’s not.

But for me the biggest offender in this regard is website owners choosing colors that simply aren’t distinct enough from each other. Sure, that delicate pale grey may look very pretty, but on your white background your body copy becomes literally unreadable. And frankly, I’m not going to sit here straining my eyes on the off-chance you have something useful to say.

I’ll just search for the information I need elsewhere.

And that’s really the crux of this whole article: it won’t matter how great your content is, if I can’t read it. Your product or service could literally be the answer to all my hopes and dreams, and I still won’t read about it. So do yourself and your business a favour, and start paying your website’s typography the care and attention it deserves.

And while you’re at it, watch Helvetica.