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.
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.
great tips, I am doing some of those changes in my blog right away :P
Another common mistake I encounter is the fact that some blogs don’t remove the border around images, which definitely hurts the overall aspect of the blog.
Alan Johnson
I’m sure you are aware of this, but it is generally considered bad form to use pixel sizes for things like fonts, as they are fixed sizes. Using “em”s instead is much better as it allows easier scaling of fonts.
Nice tips ades!
Thanks for the tips. I have a blog that has different line heights from the main page to the individual posts and I didn’t know aht the problem was. Now I’ll fix it tomorrow.
Robert, I prefer “pixel” unit of measurement mainly because it can give you more accurate display of fonts on most screen sizes. Disadvantage of choosing pixel is, you wont be able to resize the font sizes (but firefox can resize any font now, regardless of the unit of measurement the fonts are).
Disadvantages of “em” is better described here. I think better option would be to choose “points” if you do not prefer to use pixels.
I’m only using em’s now because if people with eyesight problems see your blog and you set your font sizes to absolute values they will not be ble to read them. As far as the line-height, I personally like the tighter first paragrpah rather than the second.
that was such a great tip ades..
it looks much better now…
could you please write a post as to how do you prepare those images for your posts. I mean the basic steps which you follow in photoshop to create those kind of images and how to add shadow to the images..
if you could please write something on this..
thank you
CW, I have some tutorials on photoshop here.
Hope those help.
There is only one tip but it is very nice and effective. I have visited many blogs, mostly suffer with the same problem, narrow lines make text defficult to read. Thanks for suggestion.
I’m baffled. You’re right and it’s really simple.
Though, arguinbg with px, ems and points – did you ever consider % ? I entered 120% and got the same result as with 20px. It#s weird that relative sizes get almost completely ignored with web designers.
shadaik, i guess web designers want precise measurement. because even 1pixel makes a difference in web design, so they get used to measuring in pixels.
I remember reading about this in my CSS reference book, thanks for the reminder.
A great little tip, this spacing looks much better and so much more easy on the eye!
Good tip.. One of my blog had this kind of problem… i hope to correct it using your tip..
For my blog have the same problem small text and hard to read. Nice tip. Maybe this one helps.
I have visited many blogs, mostly suffer with the same problem, narrow lines make text defficult to read. Thanks for suggestion.
line-height tag is most important thing while coding a css based website.Thanks for article Ades
Thanks no it is much easier to read :)
Wow I didn’t realize that line spacing could make such a difference until I saw your pictures demonstrating it.
looks much better, good tip :)