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.
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.
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.
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.
Fixed a bug that was happening in Chrome. Slight modification to how the JS works.
Sharing! Now you can share your combination with others!
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 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!