I’ve been working on something for a while, and if you follow me on twitter, you may have seen me mention it.
The Web Font Combinator is a simple tool that simply shows you combinations of fonts as headers and body text.
With the emergence of legitimate web font usage, a tool that seemed to be absent to me is a way to see how fonts look next to each other. One of the trickiest tasks in typography is choosing font combinations for your design.
Does a crazy header typeface look okay next to a sans-serif body font? Does one serif typeface work as a header when paired with a different serif typeface for the body (hint: probably not).
So, choose your fonts, and see how they look – really easy!
A couple of neat-o features:
- All of the header and body text is editable – just click on it and edit away (thank you HTML5!)
- The “Reverse” button at the top of the page shows you what your combination looks like as white text against a (nearly) black background.
- If you have a webkit based browser, you can adjust the size of the h1 by using the slider. I’m not sure how it works in other browsers yet.
- Don’t want to see one of the three elements? Select “hide this” in the drop down menu and it’s gone!
I have a few ideas for the future:
- Controls for all of the elements – font-size, line-height, letterspacing, color
- Some way to save/share font combinations with others
- Other example content – like tabular data
- Some way to let you get the code that would give you the font combinations (like a CSS window or the like)
Let me know what you think! Do you find this useful? What features would you like to see?