The Web Font Combinator

The Web Font Combinator

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:

  1. All of the header and body text is editable – just click on it and edit away (thank you HTML5!)
  2. The “Reverse” button at the top of the page shows you what your combination looks like as white text against a (nearly) black background.
  3. 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.
  4. 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:

  1. Controls for all of the elements – font-size, line-height, letterspacing, color
  2. Some way to save/share font combinations with others
  3. Other example content – like tabular data
  4. 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?

Read MoreLeave a comment