cssvault - inspiring creativity

The Better Web Readability Project aims to promote screen-friendly and more readable fonts. The result is a CSS library that redefines, among others, the standard font size as well as leading (the amount of space between text). Other features of this library are:

• 16px default main text size
• Partial 26px baseline grid
• Serif for Heading, sans-serif for the paragraphs
• Lower color text contrast
• Intensified paragraph division (new line + indent)
• Bigger leading (line-height) 1.625

The original idea came from Vladimir Carrer, who also came up with the library. In his post entitled How we read on web and how can we improve that he reveals that most of us who use computers to read news, blogs, and various sites end up scanning rather than reading. He then compares reading a book to reading on the monitor, and provides three reasons why it is harder to read on a computer screen:

1. We maintain the book standards (12pt) for font size on the web (12px). But the distance from the monitor is triple. Just put your newspaper to your monitor and try to read. Hell! Is hard!
2. Additionally the paper reflects the light and monitor emits the light. If you have old “cathode” monitor it’s like looking directly in a light bulb.
3. You also have distraction noise: strong colors, links, flash animation, banners , not defined site architecture, click here, digg me, follow me on twitter, by my products… it’s fucking jungle out there.

He then comes up with a set of standards and rules that would allow for better and easier on-screen reading, and packages it as a CSS library. The resulting text is beautiful and pleasing to the eyes. One such example can be seen in the screen shot below. You should notice how your eyes would easily glide through the text:

You can head over to the project homepage, or click on the links below to view the library in action:

• Typography
• Absinthes to Go Mad Over - NY Times
• An American Prayer - The Doors
• Critique of Pure Reason - Immanuel Kant
• Excerpt from No Way To Paradise - Charles Bukowski
• How To Sniff Out A Liar - Forbes
• Hubble - Ars Technica
• One Day in Spring - Rabindranath Tagore
• Shaman’s Blues - The Doors
• Tarantino - NY Times
• The Alchemist - Paulo Coelho
• The Last Question - Isaac Asimov
• The Raven - Edgar Allan Poe
• Viva Las Vegas - Elvis Presley

You can also head over and download the full library here.

Share

This entry was posted on Friday, May 22nd, 2009 at 6:30 pm and is filed under Accessibility, CSS, Font. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.