CSS Tip: Increasing readability of your blog in one easy step

One line of CSS code can do so much to improve your blog’s readability. It’s a simple thing to do, yet I see many blogs are not making use of it. It’s the line-height: code in CSS. It defines the space between the lines. Screenshots below show two different pages; one without line-height code and another with line-height set to 20pixels.

As you can see, it’s so much easier to read the second page.

css line height

css line height 20px

Just add: line-height: XXpx; to your main theme in style.css file

Whitespace around images

Another thing that is usually neglected is, not using whitespace around the images (i.e padding). It’s a simple thing to do too. I have blogged about it here, this post teaches you how to specify margins for your images, so that the text around the image won’t stick to the border of the image.

While these things are fairly simple things to implement in blogs (which many of us do not bother to do it), but the result that they produce is: better blog readability and professional looking blog.