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.
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.
Related Posts
- Popular Posts
- Usability in One Easy Step
- Pingoat.com
- Instant Riches? Not in this Lifetime!
- Geni - Flash based family tree tool
By bil on Jan 9, 2008
great tips, I am doing some of those changes in my blog right away :P
By Alan Johnson on Jan 9, 2008
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
By Robert on Jan 9, 2008
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.
By faizal on Jan 9, 2008
Nice tips ades!
By Affiliate Confession on Jan 9, 2008
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.
By Ades on Jan 9, 2008
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.
By Dannielle on Jan 10, 2008
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.
By CompuWorld on Jan 10, 2008
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
By Ades on Jan 12, 2008
CW, I have some tutorials on photoshop here.
Hope those help.
By Web Designer Group on Feb 22, 2008
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.
By shadaik on Mar 23, 2008
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.
By Ades on Mar 24, 2008
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.