Last weekend we did a post on Sites with High Quality Photos and it ended up being a kinda perfect fun weekend thing. Nothing you have to think too hard about, just enjoy. So let’s keep in that tradition a little bit! Why not! This week we’ll do sites that are intended to help you choose fonts for your website by showcasing nice pairings (as not any two typefaces necessarily go together well).
Typewolf
Typewolf helps designers choose the perfect font for their next design project. This site is an independent typography resource that features typefaces from all type foundries.
Font Pair
Font Pair helps designers pair Google Fonts together.
Google Web Fonts Typographic Project
There are over 650 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites.
Beautiful Web Type
A showcase of the best typefaces from the Google web fonts directory.
There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action.
Fonts In Use
An independent archive of typography.
Typekit Design Gallery
A collection of sites we like using fonts from Typekit
Typekit also has Typekit Practice featuring lessons like Selecting Typefaces for body text.
Discover.typography
From the designers at H&Co.
They also have a nice article Four Techniques for Combining Fonts that is simple and straightforward.
Palettab
Palettab is a chrome extension to help you discover new fonts and awesome color collections every time you hit the new tab button.
Font Pairings on Pinterest
I Font You
Type Connection
Start by choosing a typeface to pair. Like a conventional dating website, Type Connection presents you with potential “dates” for each main character—without the misleading profile photos and commitment-phobes. The game features well-known, workhorse typefaces and portrays each as a character searching for love. You are the matchmaker. You decide what kind of match to look for by choosing among several strategies for combining typefaces. Along the way, you explore typographic terminology, type history, and more. By playing Type Connection, you deepen your own connection with type.
Type Genius
Find the perfect font combo for your next project.
Typ.io
We’re revealing designers’ decisions for all to see; peeking under the hood of beautiful websites to find out what fonts they’re using and how they’re using them.
Ultimately, we want to know what font goes with what?
Mixing Typefaces (PDF)
Typestyles that are close in design, but not from the same family create a visual discordance. Our sensibilities seem to require either strong typographic contrast—or none at all. To some degree this has even been proven in legibility studies. Researchers have found that typefaces and typographic arrangements which are pleasing to the eye are also the most legible. Unlike color combinations that can benefit from subtle contrast, typeface changes need to be obvious.
Font Shop “Great Pairs”
Just My Type
A collection of font pairings from Typekit and H&Co.
When these sites recommend Google webfonts, they don’t seem to consider the download size of the fonts.
Is this not an important metric?
That would be for you to decide mickey.
http://100daysoffonts.com/ is awesome too, and not done yet. All google fonts, with the occasional icon font from else where.
Shameless plug: I wrote the Font Combinator – which lets you play with font pairings in the browser:
http://font-combinator.com
It’s less about making suggestions and more about letting you explore options. It relies on Google Fonts and typical system fonts.
Pretty good, added in bookmarks already! But unfortunately I’m not found even “Bitstream Charter” font (.
Useful article (as always usually). PS. My favorite mono font is “ubuntu mono”,who knows – maybe one day this outstanding font will be added on Codepen, I hope ^^ (https://plus.google.com/u/0/104117558565024967863/posts/5x51D3jPogg?pid=6150060711931032082&oid=104117558565024967863)