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 know 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.

Notifyicon Nimversion Of music player used in 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

Here is another remarkable font – GT Haptik, which Fuzzco use on the whole site. This font has larger characters than BF Bague. If you surf the site, you’ll see that the font looks good both in larger characters and at 15px, making it a good option for user interfaces.

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.

Photostory 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.

DOGSTUDIO

The presentation on this site are incredibly eye-catching. The header text is in Playfair, font-size: 55px and line-height: 55px. Beside the awesomeness of this font you’ll also appreciate the fact that it’s free.

The upper menu text and the congress text are in the well-known Futura Bold, 13px.

This font is also available on TypeKit. In general, the uppercase tracing of this font can perfectly be combined with almost anything else.

In the header text of the presentation above, they use Futura Semibold, 48px, 45px. Perhaps you’ve already noticed, that sometimes I accent the font sizes and line-spacing, as I think, that the designer’s choice of these values is not random and it is in the fundamentals of font pairs.

If the color of the last year was, as I think, was bright blue and we saw it absolutely everywhere, so, at the beginning of this year everything begins to be used with a beige color.

The body text is Helvetica Neue Light, 16px, 28px. It perfectly contrasts with the bold header. The dolled up line-spacing allows you to read the text freely.

As a header text for the contact page, Playfair is used. And for me, the larger this font is used, the better it looks. Notice how the designer made the previous screens beige color of the header dominant on the contacts page? Pretty sweet!

Small, but accurate block found on Studio’s page. Header-futura Semibold, 35px, 33px. Below, text body is typed with Playfair Light, 16px, 20px.

READYMAG

Readymag really has a thought-out design that started from the presentation up to user interface products. They often experiment with fonts and quite often they get awesome results.

For the main page header, the choice is Nobel Ultra Light, 84px, 82px. And below is the same Nobel, but 26px, 26px. In menu is the familiar Avenir Next, 19px, 19px.

Nobel has character and it goes well with narrative stories. With depersonalized and clear Helvetica, this font is good to be used in “creative projects” and show it to a competent audience. Plus, Nobel well pairs with Avenir Next.

Readymag created a clear and minimalistic design with this pair. Pay attention to padding and font parameters used in the features block. The header is in Nobel Light, 64px, 80px., Title block with Avenir Next Medium, 24px 30px., Description text is written with the same Avenir Next, but Regular, 18px, 24px. Wherein texts are loose in each book. And the whitespace between each block and header is meant to make the whole composition free and clear.

Avenir Next goes well in headers and for smaller text. It is perfect for user interfaces as well. The Readymag user interface is just one example of this. In large headers, it reminds me of more hipster fonts and in smaller text that is more geometric and round such as Proxima Nova.

With the help of Avenir Next you can assign blocks using uppercase tracing for headers. Here the letter-spacing is 2px, font-size: 13px, line-height: 13px. and the text below is 13px, 13px.

When I explore new sites I look up many pages. I am interested in how designers create sign-in forms and prices and side menus. But I am more interested in entering the restroom of any site – the terms block. As a rule, companies put less focus on the design of this content and can show their true colors.

With Readymag everything is ok. For this site they’ve used Merriweather, which you can download free from Google Fonts.

DRAGONE

Dragone used the same font pair as Dogstudio. The sites are similar and both are masterfully done. I even get the feeling that the sites are by the same studio. In the header is Playfair, 40px, 40px., body text is in Futura Light 17px, 27px.

Look how well these fonts go together! They are made for each other, though they seem to be from different universes. The header is in Playfair, 30px, 30px. Above it is Futura Bold 11px, 25px, letter-spacing: 2px. I love the clarity and easiness of this pair. It seems there is nothing unnecessary – a nice picture and clear text, leaving you with an emotional connection to the product pictured.

I really like how rich the so-cold regular footer looks. Font size, color and line-height are perfectly thought out. The header is in Futura Bold 12px letter-spacing: 2px. and menu items are Playfair, 13px, 18px.

As a header text for the contacts page they use the same Playfair. And I gotta feeling, that the larger is font, the cooler it gets. You noticed, how the designer made the previous screens beige color of the header dominant on the contacts page? Looks pretty sweet!

This is my first article, thanks for spending time going through these examples with me. Analyzing the work of other cool designers is always an important and useful process.

If you liked this longread be sure to share it with your friends and say me hello on Twitter. Also, I’ve created Tumblr blog and Pinterest board with all images I used in this post for your convenience.

I’d love to know what you think or if you want to share other great font pairings with me. If I am inspired by your reaction, I’ll surely write again.

Vladimir Kudinov, Designer & Co-Founder @Designmodo