I have started doing some freelance website design work for small business clients, and part of my work will involve selecting fonts to use on the sites that I will be making.
Given that typography is not my strongest point, I was wondering if there is a website that offers a collection of schemes/combinations using web fonts. By ‘scheme’ I mean something as simple as a small list of fonts that have been proposed to work/look well together, e.g., Font A for headers, Font B for sub-headers, Font C for body copy, etc. Basically something like Color Combos, except for web fonts.
I think a site like this would be a great resource to people like me who aren’t the best at picking fonts that work well together. It would be great if the website indicated which of the included font schemes consist entirely of free-to-use web fonts, as these would obviously be very easy to implement.
So, does anyone know of any websites like this?
This isn’t exactly the answer you’re looking for, but here are a few thoughts:
Hoefler & Frere-Jones are pretty much the cream of the typographic crop. They sent an e-mail awhile back that showed some really great font pairings (with their fonts, of course), but at the top there’s a good rule listed:
…all built around H&FJ’s Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.
They go on to show some really esoteric similarities and differences (which work really well), but that rule is a good thing to keep in mind. If you use a sans-serif for the header text, use a serif for body copy. If you have something with thick strokes, contrast it with something thinner. As was discussed in a somewhat similar thread, Bauhaus and Bembo don’t have much in common at all, but Bauhaus and Futura share some geometric letterforms while varying in thickness and overall garishness.
Fonts In Use is a great resource from which you can draw inspiration. I linked to the Web section. They don’t deal with free fonts, but hopefully you’ll find this to be useful.