Typography design & font text size optimization tips.

Disclaimer: This post contains affiliate links.

A few years ago, I looked into optimizing the font, typography, and paragraph spacing on my site to see if it had an impact on my site’s engagement and conversions. And to my amazement, it did.

It is something that is easily overlooked, since most people upload a website theme and accept the default settings.

As a web marketer, it is important to run split tests on a website to see how traffic, engagement, and conversions can be impacted.

There were a few things that stood out when I ran the experiment.
The impact from changing the font size
The impact from changing the font typography
The impact from changing the line spacing
The impact of the font’s colour
The impact of the background colour.

Skip to section

Why did I consider looking into this in the first place?

Originally, my website had an extremely high bounce rate. This was due to a few things, such as the theme that I was using at the time and its default settings.

The second was that I found people weren’t engaging with the content as well as they could have been. Which is when we started to run the split tests and looked into case studies where others had run similar tests and the results that they had achieved.

After running our own tests, we did see the bounce rate drop and engagement with the website increase.

What are some changes that you can make?

Line spacing

The amount of space between the lines can make it easier for people to scan and engage with the content that’s been published on the web page. Experiment with single line, 1.5 line and double-line spacing to see how it impacts engagement and time on site on your web page.

Paragraph digestibility

The last thing people want to read is a “Wall of text” when they visit a website. So paragraphs need to be published in a way that will keep the reader engaged.

A rule of thumb is to keep paragraphs to an average 3 lines, so it is easy for people to scan.

Paragraph width

You will also need to consider how wide the paragraphs on your web page should be to make it easy for the reader to engage with. I personally like 715px, however you should test the width to see what your audience engages with best.

Text alignment

You will need to test the ease of reading with your audience. In the English language, people read from left to right. So it is usually better to align paragraphs from left to right instead of having the paragraph aligned right to left or even centered.

The alignment will depend on the reading actions that you want the reader to take. So experiment with the alignment to see what generates the optimal result.

Text colours

There isn’t just one colour that appeals to everyone. You should test different colour grades on certain parts of your text (or even the overall text) to see what kind of impact it has on your web page’s performance.

I usually stick to black text on a white background because it tends to work well for my campaigns. There are different grades of black and white that can be tested. I aim for the content to be as easy to read and engage with as possible. And I find that this combination tends to make it easy for the reader to scan and engage with the content on the web page.

Beware of fonts loading times.

One of the things with fonts is that they can add to the loading time of your web pages. So you want to

Cory Rylan shares insights in a typography case study test, in which he explains how he optimised the CSS loading for fonts that display on websites that he manages so that the sites can load as quickly as possible.

If you are looking for a WordPress solution, you can also check the insights from Specky Boy.

You can also learn more about font optimisation from Google’s Developer’s platform.

[4]

You need to have web traffic to test this.

You will only be able to get conclusive results if you already have web traffic going to the page. So look through your analytics to see which web pages are getting traffic, or pay for traffic to a web page and split test different versions of the page to see what the results are.

Once you have the results from the data, implement the result that had the most success.