The importance of font size

Font size on websites

When creating content online, there is one element that is vital when it comes to the design of your website.

Yet is often the last consideration.

That element is your font styles.

You might have the best website design in the world, the layout could be perfect, the use of images just right.

But if your website visitors can’t read the text comfortably, then it is unlikely that they will turn into customers or leads.

This is especially true if you create content on your website, whether that’s in a blog, newsroom or testimonials.

New considerations with font

In the past couple of years, mobile and tablet browsing has really taken off.

No longer are our websites viewed only on a computer or laptop, there are now on screens of all shapes, sizes and resolutions.

That makes it more important than ever to break away from that 12px font face that designers love.

Here is an example of bad font sizes:

Example of bad font

Here is some good font to feast your eyes on:

Example of good font

How to test your font sizes

This test is really easy:

  1. Open up your website
  2. Go to your about me page (or a page with some text on)
  3. Sit back in your chair so that you are comfortable
  4. Read your text.

Did you read it easily? Or we’re you struggling to see the letters?

If you couldn’t read it easily without having to sit forward, then neither can your visitors!

How to increase your font size and line spacing

If you’re not happy editing any of the code for your website, then it’s best to ask your developer to do this, but the change isn’t particularly difficult.

If you aren’t on a WordPress installation, you will need FTP access and locate your main CSS file (normally called style.css).

Otherwise, within your WordPress admin, click on ‘Appearance > Editor’

On the right, click on ‘Stylesheet’ (this might already be selected).

If you then search the page (ctrl + f) for body, you should see some font styles.

You are looking for the style called font-size.

This will normally have a number followed by the letters px (pixels) or em.

By changing this value to either 16px, or 1em your font size will increase.

Next, you will want to change the line-height.

This will amend the spacing between each of the sentences.

I would suggest setting this to 1.5.

The final result should look similar too:

[css smarttabs=”true”]body {
font-size: 16px;
line-height: 1.5;
}[/css]

Just hit save and you can see the results.

Go and do it!

Now you know how, you have no excuse for hard to read text on your website.

Don’t spoil your website and push potential customers away.

Please read the following in your best motivational, pre-battle voice:

Together, we can help prevent back pain from people leaning forward.
Together, we can prevent serious eye squinting and premature eye wrinkling.
And together, we can demolish small words from the face of the internet!

ohh rah!