Introducing Typ.io. Belatedly.
TL;DR
Collect, share and discover type combinations with Typ.io. It's live and you can play with it.
The idea
Choosing one font is easy... finding companions is really hard.
When I start a new project I'll generally go and have a browse of ColourLovers for palette inspiration. I wanted the same for fonts.
I collect samples of webtype in Evernote that I find around the internet. It's great as far as it goes but when it comes to acting on the inspiration it's quite painful: go to the site, inspect the elements I like, check the computed style, copy the font, search Typekit, Fontdeck and Google Web Fonts to see whether they have it. Rinse repeat.
Typ.io
To make my life easier, I made myself a little bookmarklet to extract the font data and built a little app to store the data. That's Typ.io. On Typ.io I can browse the samples I've saved, see what fonts are used and what I've tagged them with. Each font gets its own page, illustrated with samples people have saved, and what fonts are commonly combined with it. If I find another sample I want to save for later, I can "like" it.
Take Proxima Nova, for example. It's all over the shop at the moment. Many designers combine it with Lucida Grande and Helvetica Neue. Agencies and apps seem to favour it. If you want to use it, you can get it from Fontdeck, Fonts.com and Typekit amongst others.
Bookmarklet
You can the latest version of my bookmarklet from the Contribute page. When you find a site with type you like, hit the bookmarklet and follow the instructions.
Chrome Extension
On a friend's suggestion, I extended the bookmarklet into a Chrome extension. It sits in the bottom right hand side of your browser. Click it to see the fonts being used on the page. Click the fonts to see exactly where each one is employed. Click on the plus to start sending a sample to Typ.io.
Next
I'm trying to make the screenshot stage less painful. I want posting to Typ.io to be a single step, rather than the slightly irritating screenshot and crop course you have to navigate.
Done
And that's it. Care to try it out?
