: Resources for finding good web font schemes/combinations I have started doing some freelance website design work for small business clients, and part of my work will involve selecting fonts to

@Alves566

I recommend Typewolf.com. The site is run by designer named Jeremiah Shoaf.

There are two sections that I find particularly helpful:


Font Recommendations & Lists includes a couple font combination lists.
Web Fonts in the Wild is a database of fonts that includes a list of suggested pairings and a sample of font pairings from across the web.


The site also features an excellent index of similar/alternative fonts, including a document available to purchase that lists many free alternates for paid fonts; this is especially helpful if you're on a budget.

Vote Up Vote Down

@Radia289

There are a lot of sites that give font pairings. Some that haven't been mentioned yet include


Femmebot - For Google Font pairings.
Font Pair - Also for Google Font pairings.
Canva - More general font pairings.
DesignModo - Also more general font pairings.
FontJoy - For random generation of font pairs using deep learning.

Vote Up Vote Down

@Bryan765

Mixfont is one site that showcases various pairings from Google Fonts and have users upvote their favorite pairings.

Vote Up Vote Down

@Correia448

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 :)

Vote Up Vote Down

@Vandalay110

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.

Vote Up Vote Down

@Pope1402555

For better understanding of fonts you can refer to 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.

Vote Up Vote Down

@LarsenBagley460

I thoroughly recommend this website: 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 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.

Vote Up Vote Down