Typ.io

Fonts that go together

get it

Typ.io is a tool to help you choose the right combination of fonts for your project.

Reviews

Discussion

You need to become a Contributor to join the discussion - Find out how.
Mike StenhouseMaker@mikesten · Designer and programmer
The original idea came from my own weak spot as a designer: typography. Finding one font to use for a project is always quite easy; getting its partner is a minefield. Whenever I start something new I browse Colourlovers for inspiration. I wanted something similar for typography. I started studying other peoples' typography decisions - and the advent of webfonts makes this incredibly easy. I'd collect screenshots, storing them in Evernote, and inspect the source to get the font stack, pasting into the note for safe-keeping. This got boring after a while so I wrote a little bookmarklet and a small front end to store/present my screenshots, letting me pivot around fonts to find their partners. Ultimately, I want is to be able to answer the questions: "What font should I use for this?" "What font goes with this other font?" "How should I use these fonts?"
Johnny Quach@johnnyquachy · VP Product @ AIrhelp
@mikesten Help me understand how this helps me with that? I see a lot of nice examples. But I'm not sure what to do next?
Mike StenhouseMaker@mikesten · Designer and programmer
@johnnyquachy That's the "ultimately" bit. They've turned out to be harder questions that I'd expected! More data-heavy. Although I may be over-complicating things. I've tried a couple of tentative steps towards those goals: The recommendations page tries to suggest good combinations and what they're suitable for: http://www.typ.io/recommendations The advice box on the right of the font pages suggests a couple of partner fonts and sizings: http://www.typ.io/fonts/benton_sans Out of interest, what would you hope for next?
Johnny Quach@johnnyquachy · VP Product @ AIrhelp
@mikesten I think like most people I want the answers fed to me. I can go ahead and list of example links of sites I like but without doing some annoying heavy lifting I won't be able to see the font/size combinations. maybe if you had a tool.....that could analyze what every font type and font size is? As a band-aid you could just analyze every site you post with specifics on how they're using every font.
Mike StenhouseMaker@mikesten · Designer and programmer
@johnnyquachy Good point. I've got quite a lot of that data already, as it happens - I just need to find a decent way to expose it. I'll spend a bit of time and see whether I can pull that information forwards. When someone posts a sample via the Chrome extension, I store the full CSS computed style for each element of the page they've said is interesting. So I've got font sizes, weights, variants, etc. There's also load of scraping machinery operating behind the scenes to gather font names from various sites (fonts.com, typekit.com, fontdeck.com, etc) so I can map CSS properties onto something readable. There are 70,000+ unique fonts in that dataset at the moment. I've got some things I'm playing with to automate the screengrab process, which might open up some more options for broader analysis too...
Johnny Quach@johnnyquachy · VP Product @ AIrhelp
@mikesten Sounds like you have most what you need. Consider this: 1. Chrome extension that tells you the font size, style, and weight of anything you hover over. 2. It also list all fonts used on the page. 3. Maybe it can even do some smart comparison and find similar relationships between font styles to font sizes to font combos.
Mike StenhouseMaker@mikesten · Designer and programmer
Oh, and I've been using Product Hunt to mine for nice typography samples since January. :)
Mike StenhouseMaker@mikesten · Designer and programmer
Something else: Pinterest has been a bit of a surprise. The Typ.io Pinterest board (http://www.pinterest.com/typio/w...) has found itself 18,000-odd followers. I haven't really figured out what to do about that though. Very, very few people click through. Any ideas, much appreciated...
Michael Sarlitt@msarlitt · Growth @ HelloTalk
Awesome resource @mikesten, especially for non-designers that needs to create/launch their own prototypes until a *real* designer can get to it. I think something that would help is having an overlay on the website thumbnails that highlights where each font is used. Size would be nice too, as @johnnyquachy said. Took me about 10 seconds of tinkering around to realize that I needed to hover over thumbnails to see the fonts. Could be because the font in the first site is hidden under the fold: http://screencast.com/t/Cy23xIXx
Mike StenhouseMaker@mikesten · Designer and programmer
@msarlitt Good to hear you say that, actually. The vanishing overlay seemed like a good idea at the time but the number of people "liking" samples has dropped significantly since the redesign... I'll sort it out. I've got a tonne of metadata about each specific font use so I'll try to work some more of that in too. Many thanks for the feedback!