The power of line height and whitespace

A few times now, I have been asked to look at someone’s web site or web app and see if I can apply any quick wins to improve the poor look and feel.

Sometimes, all I have done is just the following:

  • Switch from Arial to Verdana
  • Put some line-height on the body (a good amount, such as 1.5, even 1.8 or more)
  • Where I can, provide good use of margins and paddings around major chunks of content

Nothing more. And those times I have not thought much of it, but then I get a few comments like “Wow! It looks SO much better! What did you do!”

Conclusion? CSS line-height and white space are your friends! Not only do they improve usability, but simple accessibility, too, while being more aesthetically pleasing. Use them!

Side notes:

  • Other times, I may have also needed to improve/clean the markup too.
  • Public links not available at the moment, sorry — will see if I can get some screenshots.
  • If you require a serif font, try switching from the narrow Times New Roman to something wider like Georgia. Wider fonts (for content) such as Verdana and Georgia improve screen reading, as the brain can more easily make out the shapes etc. For that reason, also avoid all caps. Titles are a different case, and things like Times New Roman (especially italicized) can look quite nice. My personal thought of Arial: I don’t like it!

3 thoughts on “The power of line height and whitespace

  1. Pingback: Comfortable Reading » Blog Archive » Bad typography #2 -Narrow Line-Heigth

  2. Pingback: Rest their eyes: making it easier to read your Web page | Aggie Webmasters

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.