Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
1  
Not directly answering your question but this is a great read if you want to understand how to pair fonts better: Best Practices of Combining Typefaces –  Emilie Feb 13 at 16:41

4 Answers 4

I thoroughly recommend this website: http://hellohappy.org/beautiful-web-type/. There aren't so many combinations but they showcase them in such an inspirational way.

All the fonts are available free for commercial use from the brilliant Google Font Directory.

If you want to try your own combinations out to see what you like (as that's the most important thing, after all), go to http://font-combinator.com/ where there's a great tool for editing few blocks of text to see how they go together, also using the free Google Font resource.

Go a search for 'Google Font Combinations' for more inspiration.

share|improve this answer

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.

share|improve this answer

For better understanding of fonts you can refer to https://typekit.com/

They have a great collection of fonts to use for web design, and even google fonts have a good collection of free fonts too.

Work with fonts, play with fonts. It's the only way to become good at font selection.

share|improve this answer

Have you tried fooont.com? It consists entirely of font pairs that are hosted on Google Webfonts.

Just download the CSS file and use it instantly on your website. Hope this will help :)

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.