Increase Line Height – I Bet It Will Help

May 192009
 

Well this is one of those a month a go today posts again. Looking back at my notes I saw that I made a few minor changes to my site, but what really stuck out was, “Increased line height to 1.55em, bet it will help!”  Well it most certainly did.

How To Change Your Line Height

If you are uncertain about what I am talking about, or just have no idea on what I did, I am basically referring to the vertical space between lines of my main content (the stuff you are reading now).

The way you can do this is to simply add this line to your CSS file:

p {line-height:1.55em;}

It’s not required that you use 1.55em, but simply increasing what you currently might have could help. All it really does, is make your site a little easier to read. End results for me a month later?

  • 3.55% increase in time on site
  • 2.58% decrease in bounce rate
  • 3.74% increase in total average page views
  • 20.3% in total page views!
  • and 15.96% increase in total unique visitors

Though I have done nothing really different in regards in marketing, I can only assume the results are heavily influenced by my change. Simply forgetting what anyone else said or says, I liked it a lot more bigger, and I think the numbers are reflecting that my visitors agree with me.

Squeezed Text

Jul 152008
 

I found another example of text that could use a little more breathing room. Recd.us is a site listing posts found by bloggers. It works similar to Digg, but articles are blog articles only. Text problem? It’s vertically squished.

Keeping your site tight is important to avoid excessive vertical and horizontal scroll. In this case, it just seemed a little pack vertically. A common problem for webmasters is creating divisions between content. For Recd.us I believe all it needs it just a little white space. Besides creating a top or bottom margin for content, you can also give your text a little more room by controlling the line height.

Example of controlling line height in your style sheet:

p        {line-height: 1.35em;}

You can also control line height by pixels, but the best way to define this and font size is by EM.

On a side note, I was having fun looking at the articles posted on this site. Apparently politics are a hot topic for its members, because Bush was the number one tag. There was also a funny one with Ghetto Prom Pictures worth a look.

© 2012 Best Web Image Suffusion theme by Sayontan Sinha