8

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?

Improve this question
1

7 Answers 7

Reset to default
5

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.

Improve this answer
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.

Improve this answer
2

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.

Improve this answer
2

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

Improve this answer
1

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

Improve this answer
1

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.
Improve this answer
0

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

There are two sections that I find particularly helpful:

  1. Font Recommendations & Lists includes a couple font combination lists.
  2. 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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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