Text is the medium for expressing the unique points of your business online – your ideas, brand messages and calls-to-action. This is why readable and attractive text is crucial for the success of your business website.  In the design world choosing the right fonts and styles is known as  the art of typography– and we’re going to give you 5 tips that we’ve collated and summarised from our own experience with typesetting to help you project the perfect image of your business and hopefully boost conversions from visitors to customers.

 

1. The optimum line length is 66 words

When designing a website, the temptation is to fill up almost the entire space – margin to margin with text. The idea of this is that you can fit in more content ‘above the fold’ (the portion of the page visible when you first open the site and without scrolling). This idea is not completely unfounded; it’s just a bit misguided. Here are 3 reasons why long line length is undesired by viewers:

  1. It’s harder to read: whenever a reader reaches the end of a line, they must dart their eyes all the way over to the other side of the page, find the right line and start reading again. This all happens in a fraction of a second, but when you consider how many times readers do it you’ll realise that it’s a key factor in reading speed. The longer the line, the longer it takes for a reader to do this, and the more arduous it seems.
  2. It’s less engaging: viewers need eye movement to keep them engaged. It’s easier for them to get bored and lose attention if they have to follow a single line all the way across.
  3. Too much content is overwhelming: when you’re viewer opens your webpage, you don’t want them to be hit with a massive high-density block of textual content. This can overwhelm viewers and turn them away. Sometimes even if you can fit everything above the fold, don’t. Instead, put some relevant content at the top that you want viewers to focus on.

So how long is 66 characters?

Exactly this much:

123456789012345678901234567890123456789012345678901234567890123456

But of course, you can choose a line length somewhere around this to your liking.

 

2. Blankspace is just as important as content

This seems like a contentious point to make, but I believe I can convince you.

 

Blankspace frames your content.

This is why wide margins like those for the 66-character rule are so engaging.

It directs attention to what is most important.

You can use whitespace above and below a heading to emphasise it.

This allows you to make the actual size and formatting of the heading more subtle, for an elegant effect.

 

It’s a breath of fresh air to overstimulated web users.

Hence it makes your site more attractive and inviting.

 

For more information on this, read about the Minimalist design language that described in our previous blog post.

3. Font choice can make all the difference

We encourage you to take some time choosing the fonts for your website. Because fonts are the style of the content itself, they have the potential to add some pizzazz or to really put-off the reader.

To state the obvious: no silly or childish fonts unless that’s what you’re going for. Especially avoid the disastrous Comic Sans; the patron font of School fetes and sausage sizzles. Now for something a bit less obvious: what’s the difference between serif and sans-serif fonts?

Serif font characters have the little additional lines known as serifs to help guide your eyes, whereas sans-serif font characters as the name would suggest are without the serifs so more straightforward and plain. You can see this in the following example:

Capture

 

Serif fonts look fancier and more formal, but are harder to read on a computer screen. So these are best used for headings.

Sans-serif fonts look cleaner and more modern. They should be used for body text because they are easier to read on a computer screen. As a side note this principle is the reverse on a printed page. Forever

Serif fonts look fancier and more formal, but are harder to read on a computer screen. So these are best used for headings.

Sans-serif fonts look cleaner and more modern. They should be used for body text because they are easier to read on a computer screen. As a side note this principle is the reverse on a printed page.

 

4. Number of fonts to use

At a minimum we recommend two: one for content and headings, one for the website’s interface. The interface includes menus and other elements that are mainly used for website navigation. This two-font minimum is to make a clear distinction between the content and the interface.

But more fonts can improve your website if used consistently to make distinctions between even more website elements. A different font could be used for each of the following:

  • The title/header
  • The subtitle
  • Each heading level
  • Quotes

 

5. Font size can make a statement

The basics of font size are fairly well-known but I want to give them to you just to clear up any doubt:

  • Body text should be 10-12 point = 15-25 pixels (‘point’ is the unit used in word processors, and ‘pixels’ is the unit on the web)
  • Headings don’t need to be much larger than the body text. Sometimes it looks more sophisticated to have smaller headings

But that’s just the bare basics. To make a statement, some modern websites feature headings with a large font size to create an eye-catching effect. It also creates a stunning contrast with the smaller body text. For a beautiful example check out the website of artless Inc. ‘Big Font’ is a current design trend that has taken off for all the right reasons: it is an engaging and  concise way of portraying your brand. Use it in moderation and good taste though; you don’t want it to look like you’re just shouting all your messages at your viewer.

 

Hopefully you can take something away from this little introduction to typography. There’s a lot more that we could have delved into, but these are the essentials. For more, check out Butterick’s Practical Typography – a fantastic guide for web typography. After reading this article you’ll probably find yourself noticing how many websites don’t employ these good practices. But if you put these 5 points to work on your website, you’ll set yourself apart from the rest, and your website will become a breath of fresh air for weary web users.

Leave a comment