Wolf’s Little Store

I love to read on the web. As a web designer I do my very best to make every site a comfortable reading experience. Depending on context, smaller fonts can be used (e.g. scanning information or metadata) but in general, it’s a good idea to stay at or above the 12 pixel mark for body text.

Some sites have dark backgrounds and very light text. Some have very small font sizes. It’s usually a combination of factors that makes or breaks my reading experience. The most common one is using 10 or 11px as the font size for body text, coupled with poor line-height.

There are various websites dedicated to bookmarklets, which are small javascript files to fix annoyances and make your web experience just that bit better (Bookmarklets for zapping annoyances, for example).

I created a little one of my own: Read comfortably. Click the link to try it out for the website you’re reading this from, or drag it to your bookmarks bar for use on those sites that cry for better readability. Note that this only works in Firefox.

Personal preference

Comfortable reading is mostly a matter of preference. Some people swear by white text on dark backgrounds – something I personally can’t stand for too long. If you want to adjust the bookmarklet to your preferred reading font and font size, it’s as easy as changing the CSS rules and saving the code as the ‘URL’ in your bookmarks. Firefox calls this field ‘location’ when you add a new bookmark. It’s important for the code to be on one line.

The code

javascript:(function() { x = document.createElement('style'); document.body.appendChild(x); x.innerHTML = '* p, * li, * dl, * table, * textarea { font-size: 14px !important; font-family: Verdana, Arial, sans-serif !important; line-height: 1.5; text-align: left;}'; })();

• Category: tips 'n tricks
• Back to the overview