Great Font Combinations You Need to Try
In flat and material design, we use more bare typography on web pages. And we need fonts to look nice in combination with each other.
You’ve surely noticed the font trends. Each year a favorite font appears in design networks and flashes in all the projects on sites like Behance and Dribbble. At first it was Gotham, then Proxima and Avenir, and now we’ve returned to Futura. But there is no need to fear of this cyclicality.
Design is a looped model just like style and trends in architecture. A new direction is born, reaches its peak and then gets changed.
But sometimes you need to stop, look around and try something fresh. Here is a set of interesting pairs of fonts that you can use in projects and maybe include many you have not used before. When talking about fonts, I’ll use the name, font-size and sometimes line-height with a format like this: *font-family*, *font-size* + px, *line-height* + px.
Plus, I’ll draw your attention to the details and what I namely like about them.
Disclaimer: Some of the links below are affiliate links and I will earn a commission if you purchase fonts through those links. I’ve purchased fonts on these sites many times, and can recommend these companies.
Stampsy
For headers and interface fonts, Stampsy offers the soulful PF Bague Sans Pro.
This font looks cool in web designs, but it can also be used in newspapers and fashion magazines. On the screenshot above, you can see how they’ve used it in a music player design. As a second font is the famous Minion Pro Condensed, which looks cool along with Bague. Together they form an excellent tie-up like a young couple of hipsters living in Portland. And I think the decision to use condensed version of Minion was a risk, but it turned out solid and.
On the front page they use the same fonts but backward. Here the body font is Minion Pro Condensed and the hero text is written in PF Bague Regular. In general, the front page looks fresh as a whole. Nice colors, no large text overloading the page. I like the approach, with the whole essence of the project in five large slides. Sometimes it’s pretty difficult to tell about your project this fast, but you always gotta try.
The minimized version of music player used the same PF Bague. It looks pretty cool in interfaces. It’s still brief, but has a zest that grabs the eye.
Block of recommended story. Both fonts stay readable even at 14px size.
On the collection page, many different font sizes are mixed. The header is written with PF Bague, Bold, 60px and under it is Minion Condensed, 24px, 31px. Pay attention to how cool this font looks on the green button below.
Fuzzco is a good example of how skillful usage of fonts and pictures can make the page attractive. GT Haptik has a strong character and might not fit all site designs. For example, it has a pretty pretentious number 0 and title R. But this font is still cool.
Thanks to the guys from Fuzzco for the new font in my arsenal. I’ll use it on holidays. Sometimes, I even feel sorry that I no longer work with clients.
Exposure
Exposure is a site for people interested in making photo stories. I like the fact that these guys are also not afraid to experiment with fonts and frequently think of something new. The primary font used here is Europa found on TypeKit and oldie and goodie Adobe Garamond Pro, which is set there too. Mixing serif and sans serif makes for potentially great combinations.
Headers are written with Europa Bold Uppercase, 40px, 60px, letter-spacing: 4px. below them is Garamond Regular. As you see on the right side of the screenshot the font Europa looks cool on buttons and text fields. Exposure has the right visual emphasis form and use uppercase as headings, text fields and buttons.
Another interesting feature of Garamond is that in smaller sizes it doesn’t need much attention. Pay attention to the Privacy, Guidelines & FAQ form in the text below. That’s the very information, that must be on the guideline page, but shouldn’t be visible unless you are looking for it.
Europa is another font that can go into your interface font library. This is how the manu panel looks. While this menu has nine items, each item is readable due to nice line-spacing, with a little bit marked stripes, and font choice.
Photo story block uses an interesting combination of Europa and Garamond. Even the small sized fonts are readable.
Wonderland
Wonderland uses the famous ITC Avant Garde on its site. The font is 40 years old, but it still looks sweet and remains popular.
As a second font, Wonderland uses Neuzeit Grotesk. If you type it in 22px size and with 35px line-spacing, it gets pretty readable and clear. You can see it on this large text part.
I also liked the contact page, which uses Neuzeit Grotesk 20px.
Bold and marked ITC Avant Garde and thin, textual Neuzeit Grotesk go well together. This contact page just like in case of Fuzzco contains only text. And due to the fact that the designer tried to make it light and clean, it looks clear…
