Typography in Web Design: 8 Principle Considerations

20th September 2017 / 6 minute read

typography hero

Where there is wording, there are typeface enthusiasts judging your font. Typography always plays a part in your website’s design, so choosing the right font is momentous.

Here’s a question for you:

What is it exactly that grabs your attention when you look at a website?

Is it the design of your website, or the wording throughout the website? Surely it’s the mixture of the two, right? Yes and no. The answer we were looking for is the wording is part of the design.

Typography plays a part in effective web design and can be the difference between a positive and poor user experience.

Let’s go through our 8 major points about typography on websites and how to go about choosing the best font.

1. We’re visual people.

We as people are very visual, so the look of something always plays a big role in our decision making. Think of the font on your website as a slice of cake, and the entire cake is your website – it’s not the be all and end all, but it’s certainly a considerable chunk of cake!

The importance of typography is perfectly explained in the iA article ‘Web Design is 95% Typography’ by Oliver Reichenstein. He says “95% of the information on the web is written language”. This point leads us onto our next point…


2. Communication.

The word communication in web design is the focus of connecting with your site visitors through your website’s design. You need to form a connection between your website and your user to help them come to a positive conclusion on your website – finding exactly what they need.

Good typography makes reading less of a chore and will better communicate with your site visitors.

3. Break the rules or stay traditional?

‘Innovation’ is a word that is always chucked in when describing any creative process, and web design is no exception. Breaking the mould is always encouraged, which is all very well, until your break the mould so much that people either don’t like the design or struggle to even make sense of it.

4. Stick to standard fonts.

Some web designers like to use unique fonts to make their website look different. We recommend that for the main segments of content on your website that you stay with the traditional formats. Arial, Calibri, Verdana, Georgia, Trebuchet; you know those safe font choices.

If you’re designing a graphic for your website, then you can feel a little more adventurous with your font. Headings, headlines or sub headings on an image, you can be a little more adventurous to grab a user’s attention, but it’s still integral that a user can easily read your font.

Are you a fan of Times New Roman? I’ll let our graphic designer’s blog post about Times New Roman help you out with that. It’s no longer one of the standard fonts when it comes to web design. Go and see what our designer had to say.

5. Refrain from using your entire font bank.

Payday – we all love it. It’s tempting for many of us to go mad with our pay as soon as it hits our bank account, but then we regret it a week down the line when we have used too much of it.

It’s the same for choosing a font on your website. You may be spoiled for choice, but don’t go overboard. 3 different fonts on your website is more than enough and would be the absolute maximum number of different fonts. Any more than that and your website will look unstructured, unprofessional and messy.

Once you have your desired font or fonts, you can then focus on how to arrange your website to make it easy to read.

6. Line length.

The readability of your text is a big deal. The font will have an effect, but so will your content’s line length. According to Viget, anything from 45 to 75 characters is regarded as a satisfactory line length for a website page. We would agree, but we would say around 60 characters is the perfect amount.

7. Spacing.

The width of your text has a guideline, and so does the horizontal spacing between your lines of writing.

For typographers, the term is known as ‘tracking’ or ‘leading’ for letter spacing. White space is a good thing in web design and should always be present on any website. It’s worth taking a moment to read our blog, ‘What’s The Psychology Behind Web Design?’, to help you understand the benefits of white space.

Spacing counts as the layout of your text. By embracing a good structure for your website’s content, you will draw your site visitors in a lot easier and encourage them to spend more time on your site and take notice of your text.

UX Planet recently wrote an article about typography, and one of their top 10 tips is to not minimise the spacing between lines. They said, “as a rule, leading should be about 30% more than the character height for good readability.” Although you shouldn’t minimise the spacing, you also shouldn’t create too much spacing.

8. Make sure people can read your content.

Font, sizing, line length, and spacing – they all contribute to this final consideration. It might seem a little obvious this point, but you need to be confident that your content is clearly visible and laid out to appeal to your users.

Typography is big. With the right format, font and foundation for your content, you can better interact with your site users and potential clients. Your content should be readable, comprehensible, and clear throughout your website.

Do you have your own typography tips? Let us know!

What's up next?