The power of line height and whitespace
Posted on: Friday, July 27th, 2007 at 3:51 pm
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!
On April 7th, 2008 at 8:01 pm Comfortable Reading » Blog Archive » Bad typography #2 -Narrow Line-Heigth said :