Readability, just a bookmark away
Some sites actually do try to provide you with legible and easy to read content—it’s the equivalent of a restaurant trying to make their food delicious.
Unfortunately websites with messy layout survive for the same reason that there is MacDonald’s: offer something even less enjoyable, but timely and conveniently. Thusly typography of many news sites comes closer to an emetic than delicious food.
The Arc90 Lab started an interesting experiment called, you guessed it, “Readbility”. Why wait for typographically impaired websites to finally see the light (if ever)? The open and dynamic character of the web enables us to alter the content and appearance of the pages we are viewing (e.g. greasemonkey, custom CSS).
On their site you can create a somewhat customised bookmarklet to alter the appearance of article pages on any site (the bookmarklet won’t properly work on many other pages, due to layout issues).
Customisation
You can choose between five different font/colour settings, five sizes and there are also five different margin widths to choose from. Once set up you simply drag and drop the link onto your bookmark bar.
When you find a hard to read page the next time, you simply click on the bookmarklet to let it do its magic. Here are samples for the settings “Newspaper” and “Novel”. They also have different size and margin settings applied.
I personally found it nice to see the font Palatino in good use with the novel settings. This is actually just about the right font, because many paperback novels are indeed using Palatino.
My only gripe: the line height is suboptimal. I would like either a default line-height of at least 1.5em or get an option to customise that as well.
Example
I just took a random news site and used the bookmarklet on an article on that site. Works just fine and if you read a lot on the Web, you might consider using this little gem to make you read more efficiently and with less strain on your eyes or brain.
this is one of those hard to read articles
this is how the same article looks after using Readbility
Chrome, Firefox making the Web readable
There are extensions resp. add-ons for Googles Chrome browser and Firefox, so you can now “Readabilitise” any Web site by simply hitting a button.
Chrome Extension
Get the Chrome Readability extension
Firefox Add-On
Get the Readbility add-on for Firefox
Safari 5 does it built-in
Just hit CMD+SHIFT+R and you get Apples version of “Readability”.
About the comments
This article was posted originally on a previous version of this blog. Most criticisms about the readability of this site and font selection do not apply anymore, since this website has been completely re-designed, just in case you wonder.
posted on:
Feb 24, 2010 @ 13:37
filed under:
design & typography, english
this article on your favourite site.
Comments
Odd that you go on and on about readability, when your own blog is almost unreadable for Windows users.
good read. thanks!
This article talks about readability on the web, but the font you are using is barely legible on a Windows system in Firefox and Chrome. I think you would want to make sure you are perfectly legible across the board before you write about readability on the web.
Thanks for the info, honestly speaking whatever font I check on Windows I find everything very hard to read on Windows. I cannot apprehend how anybody can stand the visual abomination that is ClearType, so at that low level of legibility it was all the same to me.
So what's the solution? Use Georgia? Even that looks horrible on Windows, although it was designed by Microsoft to be readable there. Also I'm not really the "lowest common denominator" type of guy.
For now I went back to Palatino, which is available on Windows as well (and a rip-off named Book Antiqua is on Win XP). I consider this a very legible font. If you want to argue about the legibility of Palatino, please discuss any details with Hermann Zapf, but be kind he’s 92 ;-)
There are some excellent Web fonts from Linotype, but they, too, don’t allow for @fontface embedding, go figure.
You would think that if Windows users were having difficulty reading stuff on the web that they would look for a plugin to help them with that..
If only someone would write an article discussing something along those lines..
Kilian, your welcome for the input. Palatino is much more readable as your previous font apparently did not hint at all for Windows, rendering it pretty poorly. Garamond is also a choice I like to use because it’s also legible on Windows.
I’ve found fonts made for a Mac do not translate at all to a PC, which I’m guessing your previous font was a Mac-specific font that is ported to Windows. If you ever see Helvetica on a website through a Windows machine you’ll also find it nearly impossible to view.
Anthony, as far as a plugin, sure that would be something someone like I would look into, but the point of the issue is readability and you’re not going to get every Windows user out there to go download a plugin so they can view an article on a website. With such a market share, you have to cater to the Windows crowd and use fonts that work well on it.
I shouldn’t have to download a plugin to read something on the web. (Just like I shouldn’t have to download a plugin to watch a video, so I hope HTML5 will give some help in that department in the years coming.)
Cameron,
It’s not about fonts made for a Mac, it’s the problem that Windows’ ClearType font rendering and hinting is inherently broken, just to make the fonts look more sharp (even on the cost of distorting the shapes of the glyphs), so any font that is not specifically made to be readable as ClearType will look pretty terrible on Windows.
While any font I’ve come across until now was quite acceptable on the Mac (provided they are good designs, of course), for Windows you need fonts designed specifically for it to make things work really well. Even Ubuntu Linux nowadays has better font rendering than that.
I know CSS3 is all the craze, but again, your article on readability, and your own site’s lack of, are kind of ironic. The switch to Palatino is appreciated, but the drop shadow on pages of (non-Clear Type) text makes me downright dizzy and nauseous! (Literally)
Progressive enhancement would have those lucky few with the ability to have extra special experiences. But to make other people (the vast majority, no less!) feel like rushing away to close the browser window? Uncool.
This is so funny now the people complaining about the readability are the Windows folks. Just because ClearType looks like shit, don’t blame me, the shadow was perfectly readable on the Mac.
Again this is the problem with Windows: unless you design fonts specifically for it any typeface just looks like crap.
Absolutely! However, that’s the nature of the web. Different devices, different operating systems, different browsers, different settings. Designing for the web is different from Print – you need to set up your styles to accommodate all settings, to some degree, preserving usability and readability.
Mac is really still just a small percentage of web users. Really small. Designing just for Mac will lose you visitors and negates your article on web readability, Big Time!
Thanks for the update – this looks much better to me!
Well, that’s what I do on the websites I design for others via Pixelblast.jp, but this is my personal blog, here I do what I want to, it’s my little kingdom.
By the way 60% of all viewers of this site are on the Mac, so there ;-P peace out.
P.S. Yes I love to have the last word…
Your CSS reads:
Palatino,“Palatino Linotype”,“Bookman Antiqua”,Times,“Times New Roman”,serif
Error: “Bookman Antiqua”
Correct: “Book Antiqua”
I use:
font-family: Palatino, ‘Palatino Linotype’, ‘Book Antiqua’, Georgia, Times, ‘Times New Roman’, serif;
Thanks for the Book Antiqua tip, I didn’t know that.
Wow, are you one of the people who reads other people’s CSS? Thanks for catching that!
As you might have noticed from my IE6 warning, I stopped testing my personal site on XP, so I would have never noticed.
I have only used Firebug to check the properties of one paragraph to see what you are talking about regarding your blogs readability :)
Regarding usability you have some issues. Examples?
# Preview shows bad textile support for ol in comments :) # Pagination should follow at the end of an article and not (only) on top (Oops, that’s a ‘me too’ issue). # A missing *Read more…” permalink to single articles in lists. I just discovered the full articles by accident coming from your homepage. # No permalinks for comments.
Nice typography but issues with usability :)
Preview shows bad textile support for ol in comments :)
That’s not a bug that’s a feature. I have disabled extended Textile support for comments. I don’t want to you to write essays, I’d like comments (as the title indicates)
Pagination should follow at the end of an article and not (only) on top (Oops, that’s a ‘me too’ issue).
Does anyone ever read articles that way? I found that people who actually read more than one article usually use search, prefer “related articles” or go to the archives. So I now will remove the previous/next article links altogether (put an archive link in there instead), I was thinking about doing that a while ago.
A missing “Read more…” permalink to single articles in lists. I just discovered the full articles by accident coming from your homepage.
Everything that’s red text is a link here. Should be straightforward, but that can be added (you’re the first person I know using those links. Fitt’s Law actually makes people click the larger titles to read the full article—easier to hit. Anyway if you're such a good aimer, I just put the links in there.
No permalinks for comments.
Again this is intended. What would I want those for and where would I link from? If you look at the source the comments do have separate anchors if I need them, and I link to the comments altogether via the combination of article permlink and the id #comments.
ol OK
Pagination: Well, I do. I normally tend to read interesting blogs article by article.
The ‘Read more…’ link is a valuable hint for the reader that there is more to come.
Permalinks for comments are a great way to point to specific comments in a conversation.
I’ve read about readability before, but just due to your help I really understood what it’s all about. hope this initiative will find support.
‘Readability’ is available as a Firefox add-on now. It adds some nice features like auto-scrolling.
addons.mozilla.org – Readability
Recommended.