UX

Truth About “Cool Fonts”: We Scraped the Fonts That Designers Actually Use

Summary: According to our fonts study, designers of the best startups don’t use the trendy, cool fonts (surprise). Instead, they rely on old good system fonts, some of the popular Google Fonts, and they misspell font names a lot.

Check the font service on Product Hunt and join the discussion

“What’s your favorite font face?”

Impressing a Designer

“What’s your favorite font face?” — she asked after the second glass.

That was a tough question.

Segoe UI? Uncool.

Comic Sans? OK, you tried to be funny at least.

Helvetica Neue? It lacks personality.

Which fonts are cool fonts? Which fonts do people use after all? In particular, which fonts do successful teams use?

Fonts of the Best Startups

So we performed a study.

For best startups, we chose those which won on ProductHunt. We took it over multiple years.

We scraped the CSS from these websites and checked the font-face attributes.

Font Study Results

This way we’ve got:

  • The most popular fonts
  • For each of them, the most popular font combinations
  • For each font pair, the list of websites that use it

Have a look

The most popular font combination on ProductHunt: Helvetica Neue and Consolas

Numbers

We’ve got thousands of fonts in the study.

Let’s limit our analysis to:

  • Top 50 fonts
  • For each of these, top 50 fonts that combine with them.

Here’s what we get.

Here’s our study of the best fonts in the numbers.

Best Fonts

We hoped to find the combinations of the fonts that trend in each particular year. Instead, we’ve found that there are few trends. In fact, people remain using the same fonts over and over again for years, if not centuries.

Key Insights

  • People use the system fonts, a lot.

People use the system fonts, a lot.

  • People use Google Fonts, a lot.
  • And there’s a long tail of the misspelled fonts. See below for some entertaining stats.
  • People use many icon fonts. Many! We’ve filtered out over 20.
  • Shockingly, no Comic Sans!

Icon Fonts

New projects still use the fonts for icons in 2018 (how to convert the icons to the fonts — better don’t though).

While we proposed a number of better solutions, they’re not close to our Line Awesome library. Is it the purpose? Replacing one icon font with another icon font.

Funny: Misspelled Fonts

At first, we tried to locate all fonts in 3 font libraries:

  • Google Fonts
  • Typekit
  • Font Squirrel

Of 500 unique fonts that we scraped, only 126 had matches in any of three libraries. Of the remaining 374, misspelled words are the majority.
Examples of the misspelled fonts:

  • Montserray → it should be Montserrat
  • Rpboto → it must be Roboto

Cliches Are True

People don’t look like their Instagram shots. True.

People are not as happy as their Facebook profiles are trying to convince us. True.

And designers don’t use all that trendy font combinations. True. We love this guide from Great Simple. Our study shows people only like it.

“Whatever Chrome shows for sans-serif, I like it”, — I can say.

About the author: Ivan Braun, UX designer, founder of Icons8

Check the font service on Product Hunt and let us know what you think

Recent Posts

Testing the ground

This is where we place all the possible blocks that we use for our articles…

5 months ago

How to illustrate a children’s book with AI

Creating illustrations for a children’s book is challenging, especially if you're not an artist. Learn…

6 months ago

Retro fonts: history, examples, and modern interpretation pt. 2

Nostalgic typefaces are trendy and more varied than ever. Discover the story behind vintage typography…

6 months ago

Retro fonts: history, examples, and modern interpretation pt. 1

Curious about the diverse world of nostalgic fonts? Keep reading to explore typography from the…

6 months ago

Arrow icons: style ideas and examples of use cases

Check out arrow icons in different aesthetics and get some inspiration on how to implement…

6 months ago

How to create perfect matching visuals for an online course landing page

Step-by-step tutorial on generating AI illustrations for the online school landing page design.

6 months ago

This website uses cookies.