Today, I saw a pigeon land on my windowsill and look right into my eyes. The cars were beeping outside. People were running errands and hurrying to important meetings. It seemed to be a usual day. Except for the pigeon staring at me.

We were looking at each other for about 10 minutes. It seemed that the bird wanted to convey with all its wisdom with its glance. As soon as I began to sink into its gaze, it broke the silence.

“To cut it short, Vlad, you are an idiot!” it said and spat sparingly on the window-sill. I was taken aback by such uppity and was ready to call out. But it continued staring at me with his serious look, like a cowboy on a ranch from the movie “Mulholland Drive”. I had no argument to raise an objection.

We were silent for a minute. Then it sharply asked: “How are the sales going for your new tool for web developers with Bootstrap forms?”. “Could be better,” I replied sadly. I couldn’t understand why that pigeon with stupid eyes asked me all those questions.

“That’s easy! Your sales are low because you use the Roboto font in the design ”, he exclaimed. And a lonely tear rolled down my cheek. I thought, “So, that’s it! Roboto ruined my business. A pigeon cannot be wrong. ”

Then the pigeon turned away from me toward the street and was doing something for a long time. After 7 minutes of its hard work, I saw that it scribbled the message on my window sill: “Poor fool, find a cool font for the website and the gold will fall on you from heaven.”

The bird looked at me for the last time hopelessly, then fell off the windowsill and flew away. I stayed alone to sit in a quiet room.

Perhaps, the pigeon is right and I should choose a cooler font for my website to make the sales rocket. It’s even better if I put together a collection of perfect font pairings in this article and tell the others about them.

1. Portrait + Graphik

Font pair: 1. Graphik | 2. Portrait

You’ve probably noticed how Graphik began to gain pace in early 2018. The popularity of this font continues to grow, especially on the web. It is perfectly combined with the Portrait font, from the same Commercial Type studio.

In general, it’s amazing to explore the trends of using fonts in web design. When I started designing, many websites were done using the font ITC Officina Sans. Then they switched to Proxima Nova. A few years later, Futura turned up and was in trend for a long time (given that in the past several decades, this is not the first moment of glory for this font). Then everyone started using Circular and now we admire Graphik. I loved everything using different cute fonts.

By the way, tell us in the comments what font trends you found in your design practice.

2. Tiempos + Averta

Font pair: 1. Tiempos | 2. Averta

I’m not sure who set the fashion to use Tiempos for headings and titles. It seems to me these were the guys from Slack. At least it was after their redesign that it started to be used everywhere. Even my mom adds it to the jam when she makes home food supplies.

Used in titles, Tiempos looks very cool and catchy. Especially next to the bright illustrations. This font is perfectly combined with Averta. Although almost any sans font such as Graphik, Circular or my favorite Larsseit could be used in its place.

3. Domaine + Founders Grotesk

Font pair: 1. Domaine | 2. Founders Grotesk

Thanks to the designers from Pantheon, I first stumbled upon the Domaine font. They use it for headlines and combine with Founders Grotesk. Both fonts are designed by Klim Type Foundry and look good in combination with each other.

4. Colfax

Font: 1. Colfax

Colfax fits well with … Colfax? Thanks for this to the Framer website. Now you know about it. The combination of Colfax Bold and Regular is a goody-goody.

5. ITC Grouch + Fakt Pro

Font pair: 1. ITC Grouch | 2. Fakt Pro

WeCollect uses ITC Grouch for headlines and combines it with Fakt Pro. The fonts work perfectly together. Especially, when the headings are large and contrast with the size of the body text.

6. Fakt Pro + ITC Clearface

Font pair: 1. Fakt Pro | 2. ITC Clearface

When designers have already seen and tried everything, they switch to hard drugs. Circular is past the point. Avenir is boring. Futura – well, better wish it to your grandmother. You need something more sophisticated. Something that being used on your website will make the heavens opened and a voice will shout from there, “This is a real designer I can feel proud of”. And the children meeting you on the street would point their finger at you and shout “Look, the designer is coming!”. Well, you get the idea.

Feel like that? Then ITC Clearface is what you were looking for. The guys from WeTransfer perfectly combine it with Fakt Pro. It looks cool!

I’ve been following WeTransfer for a long time. Especially for their sub-project WePresent. It can be viewed for hours. The guys who do the design there, know their business.

7. Tiempos + Avenir

Font pair: 1. Tiempos | 2. Avenir

Oscar is one of the few insurance companies that can do things simply, clearly and beautifully. For the website headings, they use the well-known Tiempos along with Avenir.

8. Libre Baskerville + Inter UI

Font pair: 1. Libre Baskerville | 2. Inter UI

I adore Libre Baskerville. I love and use it every time I have such a chance (for example, on my personal website with a product designer portfolio). I especially like the way its Regular style is combined with Italic. The guys from Backer News use it with the Inter UI sans font and it looks great!

9. Circular

Font: Circular

Hey, what is your strict look about? Are you asking why I’ve included Circular in this collection? Why don’t you love it so much? Just because every Dribbble designer uses this font? Or because it was 2 years ago, and now they have forgotten about it at all?

Damn it! Circular is a beautiful font with its own character. At the same time, it’s so versatile, elegant, geometrically balanced that it can satisfy any needs. You can even use it in your resignation document. I promise this document will look amazing, just remember about the correct white spacing.

The guys from Airbnb make great use of it on their website and in the elements of user interface.

10. Sailec

Font: Sailec

Sailec is a great replacement in case the Circular price will cost you arm and leg. I think these fonts are very similar in their nature. Landr uses Sailec on all pages of its site and it presents their brand perfectly.

Sometimes I think how good it is that I have a loving girlfriend. How many times she calmed me at night when I woke up in a cold sweat. She said, “Everything’s good, honey, one day you’ll save up enough for Circular. But meanwhile, you are going to use Sailec. I love you anyway.” So that’s it for now.

11. Butler + Roboto

Font pair: 1. Butler | 2. Roboto

DSX use Butler as the font for their headings. It is free and very similar to Playfair. It combines well with the free font Roboto, which can be found on Google Fonts. And while the word “free” sounds reasonable, this is a good combination of fonts for your next design.

12. Saol Text + Agipo

Font pair: 1. Saol Text | 2. Agipo

Saol Text and Agipo are the brightest representatives of the font family saying they are cut for design right off the bat. They aren’t definitely the ones to draw posters for handouts at the subway.

These two fonts are really interesting both individually and in their combination. They suit for brands with a bright personality. Or for hipsters (yep, I know that there are no hipsters and all that is a myth).

13. Cooper + Graphik

Font pair: 1. Cooper | 2. Graphik

I hadn’t heard anything about the Cooper font for about 1,500 years. But then the MailChimp designers took a dusty CD titled as “10,000 fonts for website design in Dreamviewer” off the shelf and thought “Why not?”. (Actually, no, first they got the Enigma CD, then the Romantic Collection, and only after that they got to the font disc.)

Indeed, Cooper looks cool in the headlines on the new website. It combines well with the character of the logo as well as the background font Graphik.

I really like the way the guys at MailChimp redesigned their website and updated the brand.

14. Eksell Display + Ivar Text + Siri

Font combination: 1. Eksell Display | 2. Ivar Text | 3. Siri

The Christmas HQ guys made a real miracle! The design of this website is so good that you want to live in it. Interesting typography, Christmas colors and atmospheric illustrations.

The titles use Eksell Display. As Santa’s assistants, there are Ivar Text and sometimes Siri. “Hey, Santa! Could you make all my designs to look as cool as this one? Thank you. ”

15. Whitney + Hoefler Text

Font pair: 1. Whitney | 2. Hoefler Text

Kollegorna uses a combination of Whitney and Hoefler Text fonts. Both fonts were designed by Hoefler & Co studio that created such famous fonts as Gotham and Sentinel.

In its day, Gotham made a lot of noise. Especially after Squarespace began to gain fame.

16. Maison + Charter

Font pair: 1. Maison | 2. Charter

Lorenz Woehr is a young German designer and developer. On his website, he uses a combination of Maison and Charter fonts.

17. GT Walsheim

Font: 1. GT Walsheim

Algo chose GT Walsheim made by Grilli Type studio as the main font. Well, yes, GT is not always abbreviated from “gran turismo”.

I think this font has a strong character. It is a little “childish” and in some cases similar to Avenir. But it is obviously memorable so it’s a worthy representative of a bright brand.

18. Feijoa + Brown

Font pair: 1. Feijoa | 2. Brown

Couple combines Feijoa for headings and Brown as the body text font. It should be noted that Brown in uppercase looks awesome.

The Feijoa font was designed by the same Klim Type Foundry studio that made Tiempos. Why do you need to know about it? To keep a conversation with another design fella. You see how lonely he is, he needs to know more useless information.

19. Larsseit

Font: 1. Larsseit

Larsseit is one of my favorite fonts. It first caught my eye when I was looking for an alternative to Circular. The guys from Relate are great in using it in their product presentation.

In addition to the beauty of this font, its main advantage is the price. Larsseit Regular + Bold will cost you $74. The rest of the money can be spent on subscribing to Icons8.

So, every time your client asks you to make a “cool typography” website but he is not ready to sell his Porsche to buy a font – use Larsseit. A proven option.

20. Portrait Light + Portrait Light Italic + Suisse

Font pairs: 1. Portrait Light | 2. Portrait Light Italic | 3. Suisse

And the for the most hipster font combination goes to the guys from håndværk. In the headlines, they use the artsy Portrait Light and Portrait Light Italic. As a second font, Suisse is applied. It looks cool in combination with an interesting website layout.

Bonus: 21. Brandon Grotesque

Font: Brandon Grotesque

Brandon Grotesque is a win-win. Baronfig uses it on all pages of its website. It looks light and attractive.

That’s all for today. Feel free to tell us what you think about this article in comments. Negative comments are also accepted because we are democratic here (just kidding, because I am from Russia). And also write about the fonts that you use in your designs, we are keen to learn about it. Cheers!

About the author: Vladimir Kudinov is a product designer and entrepreneur based in beautiful California. He’s a co-founder of a few projects. Nice, Very Nice: design templates / Mailto: html email templates / Donetown: dedicated virtual personal assistants for entrepreneurs / Foculty: step-by-step guides on how to start a startup.

Check the fonts designers use most often, review popular UI design trends and learn about the most hated UI and UX patterns.