HEY

Participate in the next Webflow Challenge!

Web Typography: A Complete Guide to Choosing the Perfect Font

The choice of web typography to be inserted in a website is of paramount importance, both in terms of design and technical aspects. Here are the proofs.

Updated on

15/12/2020

Web Typography: A Complete Guide to Choosing the Perfect Font
Web Typography: A Complete Guide to Choosing the Perfect Font

Web typography is like a touch of charm for a website, as long as it is readable. Indeed, if it is complicated enough to decipher, it can ruin everything.

The choice of typography to be inserted in a website is therefore of paramount importance. There is a wide range you can find on the web. They are paying, free and can be used on the web or in an application.

This guide will help you make that choice.

#typography #police #webdesign #webflow

🌈 Survey

And you, do you take the time to choose the right typefaces for your site?

No, I'm only aware of it now.
Yes, but I'm only focused on his design, and nothing else.
Do you have another opinion? Feel free to mention it in the comments!

Video

Summary

The importance of choosing the right web typography

Different types of typography

Web typography formats

Rules for choosing the right web typography

How to combine web typography

What tools to help you

Where to download fonts

Conclusion

Importance of choosing a good web typography

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.

From a technical point of view, the choice of web typography plays an important role in the site's SEO. Depending on the formats (which we will see a little later), a site can take a long time to load. A poor loading speed is very badly seen by Google bots. They will indeed consider the site as non performing, and thus, visitors will pass their way.

Also, faced with a site that takes a long time to respond (because of badly chosen or too heavy typography), Internet users will simply go elsewhere. The site in question will then have a high bounce rate, and once again, this is a signal to Google that the site is not of good quality .

Before going into details, I think it would be better to list the main typographies that exist, and from which you can choose for your future Webflow website.

Different types of typography

In all, there are 5 types of fonts: Serif, Sans Serif, Monospaced, Cursive and Display.

1. Web typography: Serif

It is mainly intended for printed documents. These are fonts that have "serifs". On paper, serifs (or serifs) are indeed easy to read. You can get a glimpse of what it really is by looking at these examples: Times New Roman, Georgia...

2. Web Typography: Serial-free

Here, the fonts do not have serifs (or serifs). They are therefore simpler, and thus, easy to read on the web. That's why most fonts you see on the web are serif-free. In fact, early computers had a hard time making serifs look neat. That's why we have this choice until today. Here are a few examples of serif-free fonts we are used to reading: Arial, Verdana...

3. Web Typography: Monospaced

We talk about monospaced fonts whenever we are dealing with fonts with the same width. These types of fonts appeared a long time ago, in the age of the typewriter. Nowadays, they are mainly reused in text editors. There are several of them, but I know Incosolata, for example.

4. Web Typography: Cursive

This web typography imitates handwriting (Indie Flowers, Great Vibes...). So it emphasizesvisual interest, but not really legibility. In general, it can be found in the different titles.

5. Web typography: Display

Finally, the displays are eye-catching (Changa One among others). They are imposing, because they are composed of large and fat fonts. For those of their family which are thin, they have a complex shape. You can see that they want to attract attention, that's why they are on the headlines.

These 5 fonts are not all used on the web. For almost all the sites we encounter, serif and sans serif are the most used. Are they really different?

Serif vs Sans Serif

The answer has never been simpler: the choice of web typography depends on the design you want.

If some people think that serials increase visibility, they're wrong. In the digital world, it's quite the opposite. Serials are more readable, especially if they are read on low-resolution screens. But not everyone has the right screen. I therefore advise you to opt for the serial-free version of the body text.

Does that mean that without serifs, there's no point?

No, I didn't say that. On the contrary, you can use them. Their serifs make them professional and formal typefaces. Big brands will look great if they choose sans serifs as their main typeface. The same goes for professional blogs, news agencies, etc. However, be careful not to abuse them ;)

Webflow Training

Web typography : The formats

When you download a typography, you will have several files (ttf, eot, otf, woff and svg). These are the most commonly used typography formats. However, no one of them is suitable for all browsers at the same time. This is precisely why they are combined.

But what do all these formats mean again?

1. TTF (TrueType Fonts)

It is one of the most widely used formats on Mac and Windows. That's normal! Not only was it created a very long time ago (in 1980), but its author was Apple. Microsoft then took over.

Only, it's not compressed, and therefore, quite heavy. This has a significant impact on the speed of a site.

2. OTF (OpenType Fonts)

Neither is it compressed (again, OTF is not made for the web). In fact, it is more like an evolution of TTF. Microsoft also played a role in its design, but this time in partnership with Adobe. Thus, OTF formats are mostly used on Mac and Windows (pc, screen and print). Graphic designers are the ones who need them the most.

3. WOFF / WOFF2 (Web Open Font Format)

Finally, a format that is intended for the web! It only appeared in 2009, and Mozilla created it. It's not a brand new format. It is taken from OTF and TTF themselves. In other words, they are compressed OTF and TTF.

By uploading fonts in WOFF format to your site, it will be displayed quickly (faster than the 2 previous formats, in any case). Above all, WOFF fonts are compatible with all browsers.

What about WOFF2? This is an evolution of WOFF. The difference is that this one has better compression.

4. EOT (Embedded OpenType Fonts)

EOT is also intended for the web, obtained by compressing the OTF format. But then, which is more adapted to websites: WOFF2 or EOT? As EOT was mainly designed for Internet Explorer, it has lost interest.

5. SVG (Scalable Vector Graphics Fonts)

As its name shows, SVG is a vectorial format, and therefore, very light. It is used, in most cases, on mobile phones, especially iOS. There is also the SVGZ, which is none other than its zipped version.

Note that conversion from one format to another is possible; in case you want to convert a TTF to WOFF. You just have to find the right tool.

There are still other rules to know for the choice of web typography of a webflow site.

Webflow Training

Web Typography : Rules for choosing

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

1. Who is the site intended for?

In webdesign, you have to work with different personalities. This is to tell you that depending on your clients, you will obviously have to choose different fonts. Indeed, the typefaces used for a photographer's website will never be the same as those used on a lawyer's website.

Photography may require fonts that bring out the photos highlighted on the site, and therefore, classic, sober and soft . On the other hand, law firms need to show through their site that they are reliable and professional. A completely different font would therefore be appropriate. Your choice could then be Serialless.

2. Define your target audience

Understanding your client is one thing, but understanding your client's clients is another. And that's even more important, because the future site you create is mostly aimed at them.

Even 2 sites dealing with the same theme can address different targets. For example, one construction company may target professionals who wish to have commercial or industrial buildings built, while another is aimed at private individuals who are planning to build individual houses.

3. What is the behaviour of the target

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.

4. Consider the message to be sent

The types of web typography used impact the emotion of the target audience. While some give a playful look, others seem more serious, and still others are informative.

One of the best ways 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.

However, if you create a site, it is above all to send a message to your audience (to use your service, to buy your products, etc.). This message will never be 100% understood if the web typography used does not have the right tone, i.e. it does not bring out thedesired feeling ormood in the target audience. For a professional audience, this tone should for example be formal. However, when addressing private individuals, you can choose a less formal typography.

5. What is the purpose of the content

A site is composed of several elements: menus, paragraphs, titles, CTA... Their typographies will not necessarily be the same (however, be careful not to clutter up the site too much, by inserting more than 3 types of fonts).

6. Check the font size

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.

Webflow Training

7. What about the ease of reading

When you go to a site, but it's hard to read it because you're trying so hard to distinguish the different letters used, what do you do? I guess few will answer that they will persist and continue browsing. Most of you will tell me that they will simply go looking for another site. Do you understand the importance of legibility ? Theuser experience is impacted by it.

Here are two examples of letters that often confuse us: upper case i and lower case l. These are not the only ones; spaces that are too high or too low between letters also make reading difficult.

Finally, legibility strictly speaking concerns the entire content. This criterion depends essentially on the size of the font, its spacing and its colour.

How to combine web typography?

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 is the best option (for more explanations on this subject, I invite you to read this article). Fonts from the same family work very well together.

Another solution is to use the same web 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.

Webflow Training

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.

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

3. 25 Classic Types

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

4. Adobe Fonts

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

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.

Conclusion

Not all typographies are suitable for a website. If they're poorly chosen, your site may look unprofessional. After taking notes on this web typography selection guide, you may still have some doubts. This is normal. I advise you to test your choices. Ask yourself if the whole thing conveys the tone you are looking for.

Also, it will be convenient to ask people for their opinion: your friends, your family, your colleagues... If you want even more reliable results, why not talk to someone who can potentially be part of your target audience.

Webflow Training

Comments

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