The Web Font Combinator

A Web Typography Tool

This tool has been built to allow previewing of font combinations in a fast, browser-based manner. There have been numerous printed books through the years that allowed a designer to put a headline font next to a body font, and this is an attempt to recreate that for the web.

Directions: You can edit any of the type on this page in order to preview any particular text. In the controls at the bottom, select the element you want to modify, and then play! You can change the font, size, line height and color of an element, as well as hide an element altogether.

About

The Web Font Combinator was built for the classic reason of “scratching my own itch”. I am a web designer/front end developer, and wanted to have a way to quickly see how fonts looked in combination.

Credits

There are a number of technologies that make this tool possible, and I’d like to give them credit:

Google Web Fonts - This tool works with the Google Fonts collection, as well as a few selected System fonts. In particular, I’ve made use of the Google Web Fonts Developer API to make updates automated.

jQuery - this site heart and soul is written in jQuery. It would not have seen the light of day if it were not for this JavaScript library.

The Chosen jQuery plugin - this nifty plugin takes very long select elements and transforms them into much more useful lists. This is what I use on the font name and variant list drop downs.

This is the jQuery Color Picker that I use in the controls.

Change Log

Version 1.1.1 - February 6th, 2013

Fixed a bug that was happening in Chrome. Slight modification to how the JS works.

Version 1.1 - September 24th, 2012

Sharing! Now you can share your combination with others!

Version 1.0.1 - April 12th, 2012

Added some requested functionality - if you click on an editable element, the relevent type control becomes active.

Also added a subtle outline on hover of editable text in the hope that it makes it more obvious that text is editable.

Version 1.0 - April 4th, 2012

Version 1.0 is a total rewrite of the font combinator - from the ground up! I’ve been working on this for a few months - I wanted to bring some cool new features. Such as:

Performance Enhancements - taking advantage of some of the intricacies of the Google Font API, page load should be a lot faster.

Responsive Design - it’s been designed to work on modern mobile devices through modern desktop browsers

Font Variants! - this has been a popular request, and something I’ve wanted for a long time. Now, if a font has variants, those are options.

Color! - You can change type color AND the background color of the page!