Use font subscription! The full font library of 75+ fonts will always be at hand. See more

In our font studio’s 10-year journey, we’ve designed 1.500.000+ glyphs. Try out TypeType fonts online!

We Have a Digital Font Catalog! Looking through our typefaces has become even more convenient. PDF Catalog of TypeType Fonts

Type foundryBlogThe best web fonts: how to choose font for a website

The best web fonts: how to choose font for a website

The best web fonts: how to choose font for a website

To a novice designer, web fonts can seem complicated and even intimidating. But there are no reasons for despair, because over time, by studying the information and practicing, you will become a professional.

Moreover, web design is now one of the most sought-after areas. From young startups to companies with a long history, every brand wants to have a website and maybe even an app. The fonts that will be selected for the site and application will become part of the corporate identity.

Since web fonts are increasingly being chosen for the design of sites and applications, we will talk about them.

Web Fonts

The devices you use (laptop, smartphone, tablet) have pre-installed system fonts. Most websites and applications use fonts that have been uploaded to a web server. These are web fonts.

Website fonts are designed to display well across devices, operating systems, and browsers. Ideally, they are displayed identically, as intended by the designer.

The best web fonts: how to choose font for a website

The problem is that the same site will be looked at by thousands of users on completely different devices, ranging from a state-of-the-art smartphone with new software to a pot-bellied computer monitor whose operating system is older than most social networks.

As you might guess, due to technical features, the font cannot look exactly the same for all users. The task of a designer is then to take into account the maximum number of nuances so that the font is displayed for the majority.

Safe or standard web fonts

Safe web fonts are those that support all kinds of operating systems and browsers. No fonts are absolutely safe.

Safe fonts are often referred to as default fonts because they are preinstalled on many devices. This is the reason why they open for most users.

The best web fonts: how to choose font for a website

A list of safe web fonts can be found on the Internet, these are well-known typefaces. Exactly this constitutes the problem of using such fonts for the designer. These fonts were used so often that they began to look trite and boring to the user. With them, it is difficult to emphasize the character of the brand, so such fonts are rarely made part of the corporate identity. However, a novice designer should get to know them.

Installing custom fonts on a website

We have reached the most interesting part of the article!

Using standard fonts is relatively safe, but boring for a designer. If you want to choose a different font, modern typography offers a large selection of websites fonts in a variety of styles.

All these fonts are called non-standard.

They may differ:

  • by type of font: serif, sans serif, slab type;
  • by purpose: text, display or heading;
  • by character: strict or graceful, neutral or daring;
  • by fullness: a family can include several subfamilies and styles;
  • by character set, number of styles and language support.

Much more important is that they will differ in quality. The better the font is made from a graphical and technical point of view, the more likely it is to be beautifully and correctly displayed on the maximum number of devices.

What to pay attention to?

  • The reputation of the studio or designer who created the font. Ask other designers about their experiences, read reviews, and look at real websites and mobile apps that use the fonts you’re interested in.
  • Kerning, readability, contours. Best of all – in different sizes. Many studios offer to download a test version of the font to try it out for free. For example, TypeType studio’s trial fonts are absolutely identical to commercial ones in terms of composition and technical characteristics.
The best web fonts: how to choose font for a website

When you have already selected and purchased the required font, what remains is to install it.

If you are using WordPress, you can install the Use Any Font plugin, which allows you to upload fonts to your site.

Otherwise, you can use your site’s host to upload the font. The first thing you need for this is an appropriate license that allows you to use the font on the site. For example, for TypeType, this is a web license.

You’ll need font files in the required formats (more on that in a moment), which you’ll need to put into the CSS via the @font-face rule. You need to specify the name of the font, the address of its location and weight.

The best web fonts: how to choose font for a website

Later, you can use the @font-face rule to format text by choosing the font style, size, and color. You can also choose a fallback font from among the safe ones, which will be displayed if a non-standard web font fails to load on a user’s device.

About font formats and sizes in web design

Web fonts can have different formats.

Fonts in the following formats are used in web design:

  • TTF (TrueType Font);
  • OTF (OpenType Font);
  • SVG (Scalable Vector Graphics);
  • EOT (Embedded Open Type);
  • WOFF и WOFF2 (The Web Open Font Format).

You can use multiple formats at the same time to increase the chances of a font being displayed on different devices. The most popular formats for web design are WOFF and WOFF2, which are displayed on most modern devices.

The best web fonts: how to choose font for a website

Web font size is another important criterion. The lighter the font file, the faster the font will load on the site. For example, if you purchased a font that has extended Latin and Cyrillic, and you only need the standard set, we can reduce the weight of the font. If you are using a TypeType font, please ask for customization. We’ll decrease the weight of the font file by removing languages or characters you don’t need.

Color, style and font size on the site

Using the @font-face rule, you can control how the font will be displayed on the site. You can set the background or font color, size or style.

  • Use the “color” property to select the font color. To change the text background, use “background-color”. You can use both the color name and the RGB code.
  • Use the “font-size” property to select the font size. The size can be specified in pixels or use the em value.
  • And, of course, you can choose italic or bold for selected text passages. Use “font-style” and “font-weight”.
The best web fonts: how to choose font for a website

Testing

The most important thing when working with websites fonts is testing.

After completing the work, check the result on all available devices, browsers and operating systems.

It is better to involve all your friends in design testing than to receive unpleasant comments from the customer later after the project is delivered.

What fonts to choose for websites

Even among fonts of high quality and well suited for web design, it can be difficult to choose the right one for a project.

We already wrote an article about typography, in which we talked about the main types of fonts. In it you will find recommendations for choosing the right font for different projects.

And in the article “Serif and Sans Serif: Font Differences,” we talked about the two most popular font categories. Check it out if you want to know what each of these fonts has to say about a brand.

Mobile apps and websites typically use two fonts. For headings – larger and more expressive, and for text arrays – more neutral.

The best web fonts: how to choose font for a website

When choosing text fonts, pay attention to high readability. Most users visit websites from mobile devices, and they should feel comfortable when reading text. It is better to choose a neutral font that will not distract from reading.

Pay attention to the accompanying design factors – too bright and contrasting text on a dark background is impossible to read, as your eyes will quickly get tired.

Website font combinations

When choosing multiple fonts for website design, be careful. You should not use more than 2 fonts and more than 3 styles on one site. It is better to be minimalistic, because this reduces the page loading speed and makes the design more neat.

We wrote an article about font pairs and how they are used in design. Learn how to choose fonts using the studio’s bestsellers: TT Norms® Pro sans serif and TT Norms® Pro Serif serif.

Top 10 Best Web Fonts for Websites by TypeType

We share a selection of 10 studio web fonts that look stylish on websites and mobile applications.

Let’s start with text fonts.

They are safe to format large arrays of text due to their high readability and neutral character.

The best web fonts: how to choose font for a website

TT Interphases Pro

It’s not just a good web font, it’s the perfect font for mobile appы and website interfaces. Created based on extensive research.

Neo-grotesque with uni-width proportions, legible and flawless.

The best web fonts: how to choose font for a website

TT Norms® Pro

It is difficult to count the number of sites designed with TT Norms® Pro – there are more than a thousand of them. Among them are the brands Cartoon Network, CSN, Pinarello and others.

A geometric sans serif whose neutral character and versatility are familiar to many designers.

The best web fonts: how to choose font for a website

TT Hoves Pro

The font is used for the websites of Telefonica, True Digital, Studio Lenzing and other companies. A universal sans serif with a recognizable but stern character.

The best web fonts: how to choose font for a website

TT Livret Text

Modern, versatile and aesthetic text serif. The studio’s most popular serif. Headings on websites are often set in more expressive fonts. Here we are sharing the best display web fonts.

The best web fonts: how to choose font for a website

TT Lakes Neue

A large family of geometric sans serifs where you can find stylish technological sets. The nature of the font can be controlled using different weights and stylistic alternatives. Can be used for both headings and text.

The best web fonts: how to choose font for a website

TT Espina

An elegant serif with narrow proportions and sharp serifs. Ideal for the luxury segment.

The best web fonts: how to choose font for a website

TT Autonomous

Font with wide proportions, suitable for tech projects. Stylish sans serif for a variety of tasks.

The best web fonts: how to choose font for a website

TT Trailers

Conceived as a typeface for the film industry, TT Trailers has gone beyond this and has become a favorite of many major brands.

The best web fonts: how to choose font for a website

TT Tsars

Serif with a refined character. The elegant shape of serifs will make headings expressive and memorable.

The best web fonts: how to choose font for a website

TT Travels Next

Cutting-edge sans serif for headings.

Share your favorite web fonts with us and ask web design questions on social media.

Latest publications

On Opposite Sides: Wide and Narrow Fonts

On Opposite Sides: Wide and Narrow Fonts

Wide and narrow fonts are among the newest trends in typography, graphic design, and web design. At first glance, some may seem odd and awkward, but when thoughtfully applied, they can infuse a project with freshness, boldness, relevance, and strength. What are narrow and wide fonts, what variations do they come in, and where are they used? Let’s explore this together in this article.

See more
How do you add a font to your computer? 

How do you add a font to your computer? 

How to install a new font on a PC? Users and designers face this question very often. Rest assured, there is nothing tricky in this process! This article provides a step-by-step guide to help you understand how to install downloaded fonts correctly on Windows and iOS-powered computers.

See more
Font Licensing: Complete Guide for Designers and Business Clients

Font Licensing: Complete Guide for Designers and Business Clients

In this article, you will find out what types of font licensing exist, how to choose a suitable font license and use it, how to verify and buy a commercial font license, and how to avoid unpleasant typeface licensing issues whether you are a designer or a client.

See more
Kerning, Tracking, Leading & Spacing in Typography: What’s the Difference?

Kerning, Tracking, Leading & Spacing in Typography: What’s the Difference?

Even seasoned designers sometimes mix up the concepts of kerning, tracking, spacing, and leading. Become a pro at distinguishing them! Learn the definitions of these concepts, explore their differences, and discover some helpful tips on how to use them while working on your fonts.

See more
Branching out: How Scandinavian Sans TT Firs Grew and Found Its Font Pair

Branching out: How Scandinavian Sans TT Firs Grew and Found Its Font Pair

In 2023, we breathed new life into the beloved Scandinavian sans serif TT Firs Neue by dramatically refining and renewing the typeface to comply with cutting-edge standards. Soon after, we introduced the text font pair for this typeface – an elegant TT Firs Text. This article is dedicated to how it all began, why we decided to update TT Firs Neue, what we added and modified, and how TT Firs Text was born.

See more
Top 10 Typography Trends of 2024

Top 10 Typography Trends of 2024

We live in a time when trends shift nearly every day, and typography design trends are no exception. We all encounter typography daily: on the web, in supermarkets, and on shop windows and signs. Outdated design, at the very least, induces boredom; at worst, it fosters distrust in the product or service. However, trendy design looks captivating and attractive.Experts and designers from the TypeType font studio are excited to share the key type trends of 2024 with you in this article. Stay trendy!

See more
15+ Best Magazine Fonts for Perfect Editorial Designs

15+ Best Magazine Fonts for Perfect Editorial Designs

Magazines are a perfect backdrop for typography to express all its dimensions. Fonts, in this case, not only communicate information but also directly influence the design. They deliver the magazine’s message, reflecting its values and ideas. In this article, we discuss how to choose the best magazine font and compile a list of 15 relevant options for editorial designs on various themes.

See more
UniversiTTy: Lesson 9. Uppercase Characters. Detailed Contour Refinement

UniversiTTy: Lesson 9. Uppercase Characters. Detailed Contour Refinement

Welcome to the ninth lesson of our «UniversiTTy»! In this series, we guide you through the process of font design step by step. The font is a cohesive visual system. This can be seen on all levels: global (font type, weight, proportions, contrast, general forms) and at lower scales that encompass all graphic choices in individual characters. Let’s find out together how visual details influence the overall perception of fonts.

See more
15 Best Outline Fonts Approved by Designers in 2024

15 Best Outline Fonts Approved by Designers in 2024

Outline fonts are an excellent tool for adding variety to a design, making it attractive and bold. What do they look like? Where are they used? What font styles do they match?
We covered all these questions in this article and made a selection of the best outline fonts for different projects.

See more

See more

15 Best Modern Sans Serif Fonts for Your Design in 2024

15 Best Modern Sans Serif Fonts for Your Design in 2024

Most modern brands choose sans serifs fonts as their corporate font. Such fonts began to gain popularity almost a century ago, but still remain at their peak. Let’s find out what is so attractive about these fonts and have a look at a selection of the best sans serifs from the TypeType collection.

See more
At First Sight: Stylish Fonts for Headlines and Displays

At First Sight: Stylish Fonts for Headlines and Displays

Today we will talk about these options: graceful and daring, friendly and brutal, dynamic and stable. These are display fonts. They are different in character and expressiveness, but always attract attention when used properly.

See more
15 Best Serif Fonts for Design Projects in 2024

15 Best Serif Fonts for Design Projects in 2024

Modern typography offers hundreds of serif typefaces for projects of every mood and direction. Despite this, many designers are still cautious about serif fonts, afraid to make projects look outdated.

See more
Corporate font for O’STIN: The full story

Corporate font for O’STIN: The full story

The font is part of the brand, responsible for the emotional context of the information communicated. Is it possible to complement these associations and expand the audience by changing the corporate font?

See more
Complementing Each Other: Font Pairs Using TT Norms® Pro and TT Norms® Pro Serif as an Example

Complementing Each Other: Font Pairs Using TT Norms® Pro and TT Norms® Pro Serif as an Example

In almost any musical track where vocals play the main role, there is more than one voice part. Sometimes you don’t notice it right away, but the moments that make you get goosebumps are supplemented by another part – a tone lower or higher in order to accentuate and enhance the effect.

See more
Creating a font from scratch: A detailed guide and tips for choosing software

Creating a font from scratch: A detailed guide and tips for choosing software

Creating your first font is most difficult because the designer does not yet know all the details of development, does not have enough visual intuition and experience. When developing a font for the first time, you have to learn a lot in the process, transferring theoretical knowledge about type design to practice, which is always difficult.

See more
Fonts in design: types, categories, characteristics and styles 

Fonts in design: types, categories, characteristics and styles 

A harmoniously selected font not only conveys information to the audience, but also visually complements the project. A mistake in choosing a font can spoil the impression and alienate the viewer from the product, whether it be a poster, a sign for a store or cafe, product packaging, a website or an app.

See more
Serif vs Sans serif: Font differences

Serif vs Sans serif: Font differences

Go to the websites of your three favorite brands and try to analyze what emotions they evoke. Whether it’s clothing or shoes, cars or electronics, cosmetics or accessories, every company has a secret: they want to be part of your life.

See more
Grow and divide: Creating a font for the G8 festival

Grow and divide: Creating a font for the G8 festival

Creative industries festival G8 has presented its 2022 visual identity. The associations that immediately come to mind are the unity of nature and people, cell division, and organics.
The «grow and divide» principle was guiding the creation of the corporate visual identity created by a large team. The font design studio TypeType is one of the participants in the creative process of making the font and logo.

See more