Design research done simply with

Ever visited a site and wondered what font is being use or what shade of green that is?

In the old days (i.e. last year) I would make a screenshot of the web page and then inspected the colours in Photoshop. But that was only good for colours and didn’t give any info about the typeface.

A few months ago I discovered the what font bookmarklet and I’ve used it countless of times. It works really well and even gives me info about the font foundry should I wish to purchase the font.

I mark a lot of tweets as favorites as a way to read them later and today discovered a tool which I think may become my favourite resource of all time. is a fantastic resource for designer.

Simply type in the url of the website you like and you can find all the hex values, typeface used as well as size and line-height as well as image dimension. This tool is so simple, yet allows designers to get a rough style guide without having to dig around the source code. Fantastic.

Are mobile devices changing the way we read on the Web?

If you’re a hard core fan of Apple products, you’ve no doubt paid attention to yesterday’s announcement about the iPad 2. I must admit, I do own several Mac products, but I’ve never been first in line to get the new iToy. I did purchase an iPad when they first came out and I do enjoy it, but I won’t buy another until this one breaks. As far as I can tell, the iPad is great for playing games, reading e-Books and… that’s about it.

I still like the tactile feel of paper and so prefer my books the old fashion way, but the iPad has changed the way I read online blog posts and articles.

Instapaper makes this tasks wonderfully pleasing

Instapaper is an online tool, which once you’ve set up a Free account, allows you to save articles to read later. During the day, I’ll bookmark several of these using my Read Later bookmarklet and then in the evening will read them  on the iPad. Best of all, Instapaper, strips all of the design, clutter, advertising and displays the article in a large black font making it so much more enjoyable.

I enjoy reading articles this way so much, that I’ve also installed another bookmarklet called Read Now. This bookmarklet also strips all of the clutter and provides you with an easy to read article with large fonts but it displays it in front of you right away instead of saving the article in your account.

What does this mean for typography?

As a designer, you should be aware of the typography limitations on the web. Common browser fonts are still you’re best bet for body text, but much more leeway can be had now with headlines. The Google web fonts api and typekit offers loads of new fonts to play with. These are easy to use and have been tested thoroughly. Typekit’s blog is a great resource to see how others are using various typefaces.

Do keep in mind though, that you no longer have control of your audience. With just a simple click of a button, I can make all of your design disappear and make the fonts bigger. So before spending hundreds of hours researching the right font and debating with your client, do keep in mind that your hard work may not be appreciated.

What about mock-ups?

If you’re concerned about fonts in your mock-ups, Google’s web fonts api allows you to download the font with the added option of contributing a small amount to the font designer. Another great resource for finding web fonts for your mock-ups is at Font Squirrel. All of the fonts are safe to embed in websites.

Just as an aside, if you’re looking for image placeholders, take a look at placekitten. Who will say no to your design mock-ups now?