HEY

Participate in the next Webflow Challenge!

Tools and Tips for Choosing a Site Typography

Looking for a typeface? I've put together for you 5 sites that I usually use to find great typography.

Updated on

22/9/2020

5 sites to choose a Happy Desk Typography
Photo by Mr Cup / Fabien Barral on Unsplash
The typography is simple, as simple as playing the violin! - Maximilien Vox

The choice of a typography is crucial, whateverthe type of project. It will make all the difference, whether it is for your visual identity, your website, or your print projects. I don't know about you, but in general, I take a lot of time to choose "the right" typography for my different web design projects.

Take the time to choose: Why?

There are several types of web content: images, videos... But texts still play an important role. In fact, they make up most of the content on a professional website.

Through them, we can transmit ideas, feelings, etc. This is why we must take the time to choose them carefully. Otherwise, we risk distorting the desired result.

typography
Photo by Amador Loureiro on Unsplash

The basic rules of typography

When choosing the typography for your site, I advise you to consider these 3 main criteria:

1. The size of the font

Depending on the size, the font is more or less legible. However, a font that is difficult to decipher will not help. So how can you make sure you've chosen the right font size? This tip works very well: test the smallest size, the one used on a mobile device. Once you've found the appropriate small size, it will be easier for you to choose the rest (for the tablet and computers).

However, don't forget to test the largest size. Some Internet users may try to enlarge the screen of their terminals when they browse your site. Won't this change the design of the site in general? This should also be checked.

2. The devices used and the conditions of use

I don't just use my computer to surf the internet. My smartphone is the most used (as for many other Internet users). All this to tell you that you'd better try the fonts you'll be using on various devices to make sure they fit the design, before publishing your site.

The results are also different on different operating systems (Android, Windows, iOS, Mac...), but also on different types of browsers (Chrome, Firefox...).

It's true that in the end, all these tests will become intertwined. Especially since you won't necessarily have all these tools at your disposal. If you do it manually, you're going to waste a lot of time. Lucky for you, there is BrowserStack for that. This tool allows you to simulate a site on the most common devices and browsers.

3. The tone of the typography

As you probably remember, I covered this subject in depth in theother article about typography. The types of typography used have an impact on the emotion of the target audience. While some give a playful look, others seem more serious, and still others are informative.

The only way to know the tone of a font is to show it to others (colleagues, friends, family...). For your part, when you choose them, showempathy. Try to put yourself in the shoes of the people who will read your site and see how they will react.

typography
Photo by Annie Apratt on Unsplash

Tips for good design: combine different fonts

Combining multiple fonts adds contrast to a site, further accentuating its design. However, the rub lies in the way the font palette is selected. Some do not follow the rules. Maybe they don't know what the rules are.

One, don' t abuse the policies. Two or three are more than enough! With more fonts, you risk confusing the site and breaking the consistency.

Secondly, choosing different fonts from the same family is a very good idea. For the titles, you can use serif while for the body text, sans-serif remains the best option (for more explanations on this subject, I invite you to read this article). Fonts from the same family match very well.

Another solution is to use the same typography throughout the site, but in different sizes. The titles are obviously larger than the others. This way, it's simple!

Know that you are also free to choose fonts from different families. The titles are short and attractive, making them ideal for complex typography. As for the body of the text, the important thing is that it is legible. If I were you and I wanted to distinguish the site from others, I would avoid overused fonts.

typography
Photo by Stanisla Kondratiev on Unsplash

What tools to help you?

I understand you have no idea what the best font combinations are. It's happened to me a few times already, but I've found the solution: use specialized tools. Don't worry, they're free:

  • FontPair suggests you a good variety of font combinations. To better visualize the result, you can even insert a custom text.
  • typeconnection is a kind of typographic game. Before offering you the best possible font combinations, the platform asks you to answer a series of questions.
  • Just My Type, like FontPair, offers a series of font combinations.
  • Font Combination offers only Google typography, which is easy to get and free!

Where to download fonts?

1. Google Fonts

These fonts are optimized to make your site load quickly. That's why they are designed for the web. For a blog for example, it is important to choose a "light" typeface, because if you end up with a hundred articles, it will have an impact on the loading of your page.

typography

2. You work for them

This is a very handy site because all the typographies are staged. It helps me to choose the typography according to the style I want to create or respect (for example, the financial one will be more corporate than the one of a children's toy manufacturer).

typography

3. 25 Typos Classic

Too many choices often kill the choice. That's why Spoongraphics has selected for us 25 "classic" typefaces that in most cases allow us to choose a typeface that will suit any type of project without going through the endless hours of research.

typography

4. Adobe Typekit, now called "Adobe Fonts".

Adobe Typekit has changed its name to "Adobe Fonts". It is the Pro typography library par excellence. All typefaces are accessible and integrated into the Adobe Cloud Suite.

typography

5. The Designer Foundry

Premium" library of typography for designers, this platform is for me the Alibaba cave. When a project requires a very particular typeface with a larger budget, it is very practical.

typography

Conclusion

In short, typography is an art form. By knowing how to choose well, you will have a more refined, professional and readable site. In this article, I've given you some tips to help you choose more quickly and above all correctly the fonts you will use for your website.

Come back to this page whenever you want. Have you found any advice that I might have forgotten when writing? If so, what are they? Leave a comment below or email hello@happydesk.be
Kevin Palombo, Happy Desk Manager

Most entrepreneurs have an inefficient website with no clear message. So I created a 5-step process that is to create a custom and connected website to achieve your successful web. See Happy Desk

Are you a freelancer? Join our Webflowcommunity. We're talking about website, design, business, etc. The community is growing and will be able to give you a lot of advice to develop your business. It's this way.

Sign up and access my online method.

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training