Ah, I’ve asked myself that question so many times and I’m not alone. Joel H Crawford-Smith has come up with a great tool that allows you to find the closest Google font for a series of non web fonts.
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. Stylify.me 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.
There are over 400 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Chad Mazzola has created a beautiful website showcasing some of the best fonts available. You can see the various typefaces in action and click on the examples to get the typeface from the Google web fonts directory.
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?