Web typography is like a charming touch 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 insert in a website is therefore of paramount importance. There is a large panel that you can find on the web. They are paid, 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 typefaces of your website?

No, I'm only aware of it now

Yes, but I only focus on its design, and nothing else

You have another opinion? Don't hesitate to talk about it in the comments!

Video

Contents

Importance of choosing the right web typography

Different types of typography

• 1. Serif
• 2. Without serif
• 3. Monospaced
• 4. Cursive
• 5. Display
• Serif vs. sans-serif

Web typography formats

• 1. TTF
• 2. OTF
• 3. WOFF
• 4. EOT
• 5. SVG

Rules for choosing the right web typography

• 1. For whom the site is intended
• 2. Define your target audience
• 3. What is the behavior of the target
• 4. Consider the message to be sent
• 5. What is the purpose of the content
• 6. Check the font size
• 7. What about ease of reading

How to combine web typography

What tools can help you

Where to download the fonts

• 1. Google Fonts
• 2. You work for them
• 3. 25 classic types
• 4. Adobe fonts
• 5. The designer foundru

Conclusion

Importance of choosing the right web typography

There are several types of web content: images, videos ... But the texts always occupy an important place. They constitute the major part of the content on a professional website.

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

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

Also, when faced with a site that takes a long time to respond (because of poorly chosen typography or too heavy), 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 typefaces that exist, and among which you can choose for your future Webflow site.

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 are indeed easy to read. You can get an idea of what it really is by looking at these examples: Times New Roman, Georgia...

2. Web Typography: Sans serif

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 of the fonts you see on the web are sans serifs. In fact, early computers had trouble rendering sharp serifs. That's why they've been chosen until today. Here are some examples of sans serif fonts that we are used to reading: Arial, Verdana...

3. Web typography: Monospaced

Monospaced font is the term used for fonts with characters of the same width. These types of fonts appeared a long time ago, in the era of the typewriter. Nowadays they are mainly used in text editors. There are several of them, but I know Incosolata for example.

4. Web Typography: Cursive

This web typography imitates handwritings (Indie Flowers, Great Vibes...). It therefore emphasizesvisual interest, but not really readability. In general, it is found in the various 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 bold fonts. For those of their family that 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, the serif and sans serif are the most requested. Are they really different?

Serif vs Sans Serif

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

If some people think that serials increase visibility, they are wrong. In the digital world, the opposite is true. Serifs are more readable, especially if they are read on low-resolution screens. However, not everyone has a suitable screen. So I advise you to choose the sans-serif for the body text.

Does this mean that the serifs are useless?

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

Web typography : 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, there is no single one of them that 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 used formats on Mac and Windows. This is normal! Not only was it created a long time ago (in 1980), but its author was Apple. Microsoft then took over.

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

2. OTF (OpenType Fonts)

It too is not 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 it the most.

3. WOFF / WOFF2 (Web Open Font Format)

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

By uploading fonts in WOFF format on 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? It is an evolution of WOFF. The difference is that it has a 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 web sites: 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, the SVG is a vector format, and therefore, very light. It is used, in most cases, on mobile, including iOS. There is also the SVGZ, which is just its zipped version.

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

There are other rules to know when choosing web typography for a webflow site.

Web typography : Rules for choosing

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

1. Who is the site for?

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

Photography may require fonts that stand out from the photos featured on the site, so 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 be appropriate. Your choice could be Sans Serif.

2. Define your target audience

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

Even 2 sites dealing with the same theme can address different targets. For example, a construction company can target professionals who want to build commercial or industrial buildings, while another one targets individuals who plan to build individual houses.

3. What is the behavior of the target

I don't only use my computer to surf the internet. My smartphone is the most used (as for many internet users). All this to say 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 several types of browsers (Chrome, Firefox...).

It's true that, in the end, all these tests will become annoying. Especially since you won't necessarily have all these tools at your disposal. If you do it manually, you may lose a lot of time. Fortunately 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 appear more serious, and still others informative.

One of the best ways to know the tone of a font is to show it to others (colleagues, friends, family...). On your side, when you choose them, beempathetic. 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 first and foremost 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 be formal, for example. However, if you are addressing a private audience, 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 the site by inserting more than 3 types of fonts).

6. Check the font size

Depending on the size, the font is more or less readable. However, a font that is difficult to decipher will be useless. So how can you be 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 find the right small size, it will be easier for you to choose the rest (for tablet and computers).

However, don't forget to test the larger size. Some 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? You should check this point too.

7. What about ease of reading

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

Here are two examples of letters that often confuse us: upper case i and lower case l. These are not the only ones; too much or too little space between letters also makes reading difficult.

Finally, the readability itself concerns the entire content. This criterion depends mainly on the size of the font, the spacing and its color.

How to combine web typography?

Combining multiple fonts adds contrast to a site, which further accentuates its design. The catch, however, is how to select the font palette. Some people don't follow the rules. Maybe they don't know what the rules are?

First, don't overuse fonts. Two or three are more than enough! With more fonts, you risk to confuse and break the coherence of the site.

Secondly, choosing different fonts from the same family is a very good idea. For headlines, you can use serif while for 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 go together very well.

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, simplicity is the key!

Please note that you are also free to choose fonts from different families. Headings are short and attractive, so they work well with complex typography. As for the body text, the important thing is that it is readable. If I were you and I wanted to make the site stand out from the rest, I would avoid overused fonts.

What tools can help you?

I understand that you have no idea what the best font combinations are. It happened to me several times, but I found the solution: use specialized tools. Don't worry, they are 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 proposing the best possible font combinations, the platform asks you to answer a series of questions.
• Just My Type, like FontPair, offers a range of font combinations.
• Font Combination offers only Google typefaces, which are easy to get and free!

Where can I download the 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" typography, because if you end up with a hundred articles, there will be an impact on the loading of your page.

2. You work for them

This is a super handy site, because all the typefaces are staged. It helps me to choose the typeface according to the style to create or to respect (the one of the finance will be for example more corporate than the one of a manufacturer of toys for children).

3. 25 Types Classic

Often, too much choice kills the choice. That's why Spoongraphics has selected for us 25 "classic" typefaces that allow in most cases to choose a web typography that will suit any project, without going through endless hours of research.

4. Adobe Fonts

Adobe Typekit has changed its name to "Adobe Fonts". It is the Pro library of web typography 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 every typeface is suitable for a website. If you choose the wrong typeface, your website may look unprofessional. After taking notes on this guide to choosing web typography, you may still have doubts. This is perfectly normal. I advise you to test your choices. Ask yourself if the whole conveys the desired tone.

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

Comments