Line spacing in web design

Written content is an essential element in any website.

The words alone however are just the start.

An equally important component is your typography (the art and technique of arranging type in order to make is visible and readable) and how you treat your written content; and on the screen, especially so the 'line height'.

Think about it...

You've launched your site with the great written content, but your bounce rate is high?

You read through the original content, it reads well, there are no spelling or grammatical errors, text colour contrasts well against the background colour, everything looks good.

Now try and read it?

Even though all of the words are there, can you actually read what is printed on your web page.

And if you can't read it easily, neither can your users.

 

How to improve your line height 

When you are designing your website, you will notice that by default your layout program will give you a line height of 100%.

If you keep setting, chances are you will fall into an ugly typography trap.

100% sounds great but this standard default line hight looks terrible in most instances on screen; it's crammed and doesn't let the letters breath.

So what is a good line height?

A good average line hight for web copy is 140% - 160%.

When using a serif font, you can use up to 160% because serif font letters seem bigger, busier and closer together.

Of course, be careful to not have too much line height because sentences can start to look like their own paragraph.

Look at the difference line heights for a serif font below:

 

When using a San-serif font you and decrease the percentage to as low as 135%:

Line height will make it easier for your customers to read the information on your website; this can only be a good thing for them... and you!

Here are some inspiring site to get you going: