Typ.io

Fonts that go together

2 followers

Fonts that go together

2 followers

We're revealing designers' decisions for all to see; peeking under the hood of beautiful websites to find out what fonts they're using and how they're using.

Launch tags:Design Tools•Developer Tools•Tech

Launch Team

CloudflareYour next app belongs on Cloudflare Workers. Deploy for free

Promoted

Typ.io

Maker

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?"

Report

12yr ago

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?

Report

12yr ago

Typ.io

Maker

@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?

Report

12yr ago

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.

Report

12yr ago

Typ.io

Maker

@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...

Report

12yr ago

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.

Report

12yr ago

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

Report

12yr ago

Typ.io

Maker

@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!

Report

12yr ago

Typ.io

Maker

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...

Report

12yr ago

Typ.io

Maker

Oh, and I've been using Product Hunt to mine for nice typography samples since January. :)

Report

12yr ago

Reviews