Reading glasses are for old folks and big type is for kids that don’t know how to read. Well, that used to be true.

For those that believe that the web is now looking like itself and no longer doing a mimetic dance with it’s first cousin, print, you should be down with this: Bigger font sizes, better kerning, wider line height and plenty of negative space make for a better user experience. Especially when reading thousands of words online everyday.

What got me going down this path was a link that someone shared today through their Google Reader shared feed to an article in Rolling Stone by Matt Taibbi. The link, as you can see, is a link to a printable version of the piece. I was rate this as great for print and poor for readability.

The post content font size is super for saving printer paper and thus trees, but it is a killer on the eyes. Reading the post at that size even in the the early paragraphs was causing me strain and fatigue. I was tired of reading the dense blocks of text without even forming half and opinion about writing. I was more concerned with the design and the inability to read it quickly because the type was packed so tight – letters like sardines.

To read this article and make it not about the squished fonts and tiny words I had to throw the Readability plugin at it. Once activated it gave me plenty of white space, larger font and the ability to scan the words with ease. It performed the duty of making the web look like itself.

This got me thinking about what the best size for type readability on screens is. Turns out that after reading a couple of studies that say that is someplace between a 12pt or 14pt sans-serif typeface with a setting of 120% height in CSS. Readers also typically prefer serifed fonts for legibility but sans-serifed for actually reading blocks of text.

The major irony of course is that this blog and both of the posts that I linked to don’t follow any of these guidelines for creating and optimal reading experience! Tech Startups will be heading there in the not so distant future but I fear that the those two poasts are going to be stuck in the internet dark ages.

Related articles by Zemanta

• Typographic Design Patterns and Best Practices (smashingmagazine.com)
• Talking RSS Reader Does Just What it Sounds Like [Downloads] (lifehacker.com)
• Social media has made me boring (mdzlog.alcor.net)

No Shame In Readability is a post from: TechStartups.com

Over the weekend I came across a project from the Arc90 lab called Readability. It is a tool designed to grab the content of a page and make it, well, more readable.

Take the content display of our blog for instance. It is wrapped in graphics, the type is small-ish and the body margin is kind of wide. It’s not a perfect scenario for every user. There is no standard for readability on the web as it varies based on reader preferences.  Enter Readability.

Based on your own preferences for reading onscreen content you can choose the style, size and margins. Style being the font of your preferred device style. Size is the font size. Margins being the white space to the right and left of the copy that determines the width.

Readability is used then by creating a bookmarklet that resides in the web browser bookmark toolbar. Then once you are on a page where the copy isn’t displayed in a way that is acceptably readable you simply click it. Right in front of your eyes is the content that you wanted to read formatted to meet your readability desires.

Beyond just being readable, the bookmarklet also makes a great tool to prepare content for printing. With all of the images removed, typeface larger and the appropriate margins the content is good to go for inking. Another cool use is taking this Readability formatted page making it portable via PDF. It’s crisp, clean content on the go without the hassle of subscribing first.

Before:

After:

Conclusion:

Readability is pretty good at figuring out which content you are seeking to have reformatted but about 15% of the time during my testing it failed. The bookmarklet, no doubt, is sifting through the code of the page looking for typical title codes or styles and gets tripped up.

One example this would be a blog post with multiple comments where the comments have same title code as the post itself. Readablity might return one of the comments instead of the post. With more features this could become and indispensable tool to surfers.

DISCLOSURE OF MATERIAL CONNECTION: http://cmp.ly/0

Increase readability with Readability is a post from: TechStartups.com