How to style and arrange the text on your website

When designing a website, there are lots of elements you need to pay attention to. The choice of images, layouts, colours, navigation and so on. One of the important elements that usually gets ignored is the choice of typeface. Typeface, similar to colour, it conveys certain feelings and messages. It reflects your brand identity, gives the first impression even before your actual content. Typeface has a much bigger impact than you have ever imagined. Apart from the choice of typeface, how you arrange your text also has a great effect. In this article, I am going to show you how to style your text as well as the best way to arrange it to get the maximum result.

Before we jump into the details, let’s look at these two dummy pages I set up:

I am sure most people are squinting their eyes when looking at the second image — am I right? Because I was doing exactly the same thing. The only text that is readable is the call to action text “SIGN ME UP”. So what does this teach us? The answer is simple:

Typeface is important.

Both images contain exactly the same content. Most people would read the text in the first image and the second image simply just drives people away.

Readability is crucial

There are many different typefaces to choose from but the number one rule is to pick something readable. You literally have a few seconds to convince your visitors to stay and look around on your website, if you use the typefaces like the second image above, you are giving them a good reason to hit the back button. Which typefaces have good readability? (In case you are getting confused about the terms, typeface and font — here is a simple explanation: Arial is a typeface, Arial bold is a font.)

Serif and Sans Serif. An example of a Serif is Georgia and Helvetica is Sans Serif.

Picking the right font is the start, you also need to think about the font size and the letter spacing. No matter how readable the font is, if the size is set to be too small or the spacing is not right, nobody would be able to read your content.

Another point you need to pay attention to is — don’t use too many different fonts on your website. I have come across a lot of websites using 4 or even 5 different fonts to create visual hierarchy on their site. This is not visually appealing and visitors would not know what to read first and what are important. If you want to use different fonts to style your headers, limit the choices to three. The other way of creating a visual hierarchy is by adjusting the font size and weight but using the same typeface, like below:

Typefaces and fonts are just like you and me — we all have our own character

Let’s start with typefaces. Some typefaces appear to be playful and fun, for instance, Bradly Hand:

Some like Georgia, it looks more serious, academic and professional. Depending on your brand identity, choose the typeface that carries the same feeling and style. If your website’s audience are children, you should pick something less serious. If your website is a business website, for instance, a financial consultancy firm, you should select a typeface that portrays authority, trustworthy and professionalism.

Apart from choosing the right typeface, you should also pay attention to the font. That means the size and the weight. Let’s look at the example below:

Both typefaces are Helvetica. One is Helvetica Bold and another one is Helvetica Light. The former one gives the feelings of strong, solid and domineering. It grabs your attention right away. It’s best for headers. The latter one, on the other hand, looks more clean, simple and minimalistic. It’s best for the main content as it is easier to read when you have a long text.

Here is how your visitors scan your webpage

We have discussed the way we should style the font, now let’s move on to the way we should arrange the text.

When visitors consume the content on your webpage, a big misconception is that we always think that they are reading every single word, from left to right, like reading a book. The reality is — your visitors do not read in this way.
They scan instead of read, their eyes movement is in an F pattern instead of left to right, one line after another:

Your visitors usually start scanning the line “1 → 2”, here is where you should place the most important element. If it is a blog post like the image above, you should put the subject of the blog post along the “1 → 2” line.
“3 → 4” line is for the second important element, here is where your visitors would pause a bit and slowly digest the rest your content, if they find your content interesting.
Finally, I inserted the newsletter sign up form on the right so that the visitors would be able to take a rest and perhaps sign up for the newsletter because of the great content on the left.

The above is just a simple example of how we can use the F pattern to make a blog post more intuitive and eye-catching. You can use the F pattern method on any page of your website.

A final tip for you, if your webpage contains lots of text, it is best to divide the text into different sections with their own sub-headline. By doing this, it improves readability, i.e. your visitors can scan your content more easily and this encourages them to read if they find your sub-headlines interesting.

Conclusion

Oftentimes, when we create a website, we usually just pay attention to the images, the actual content, SEO and so on but forget about the usability of the website. No matter how SEO friendly your website is, if the visitors land on your page and cannot read the content or locate the information they are after, all the effort you put in the content and SEO would become a waste. When doing your content and SEO audit, do not forget to also audit the usability. You can use Hotjar and other similar tools to find out how the visitors interact with your website and then you can improve your website based on the insights.

If you like this article, please 👏 and share so more people will see it. Don’t forget to follow me :). If you are interested in web design and user experience, you can read my other articles below:

How to use visual cues in web design

How to create a start page for your website that attracts attention