TT Neoris is now available on our online store! Hurry up to purchase the future of Neo-Grotesques. View typeface

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

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

Type foundryBlogBest web fonts: how to choose and use fonts on a website

Best web fonts: how to choose and use fonts on a website

Best web fonts: how to choose and use fonts on 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.

Best web fonts: how to choose and use fonts on 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.

Best web fonts: how to choose and use fonts on 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.
Best web fonts: how to choose and use fonts on 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.

Best web fonts: how to choose and use fonts on 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.

Best web fonts: how to choose and use fonts on 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”.
Best web fonts: how to choose and use fonts on 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.

Best web fonts: how to choose and use fonts on 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.

Best web fonts: how to choose and use fonts on 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.

Best web fonts: how to choose and use fonts on 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.

Best web fonts: how to choose and use fonts on 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.

Best web fonts: how to choose and use fonts on 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.

Best web fonts: how to choose and use fonts on 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.

Best web fonts: how to choose and use fonts on a website

TT Espina

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

Best web fonts: how to choose and use fonts on a website

TT Autonomous

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

Best web fonts: how to choose and use fonts on 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.

Best web fonts: how to choose and use fonts on a website

TT Tsars

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

Best web fonts: how to choose and use fonts on 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

10+ Best Fonts for Label and Packaging Design

10+ Best Fonts for Label and Packaging Design

The right fonts in packaging design can emphasize your brand’s aesthetic. Since the font is the main element conveying the brand name, choosing the right font will determine whether customers will notice and like your product.

See more16 February, 2024
Our Golden Font: How We Crafted the Ideal Neo-Grotesque TT Neoris

Our Golden Font: How We Crafted the Ideal Neo-Grotesque TT Neoris

TT Neoris is a TypeType team font released in 2023. Its name is derived from two words: «neo,» which means «new,» and «rise.» We’ve been working meticulously on it for two and a half years. At the moment, TT Neoris is the most ambitious project of the studio: our goal was to create the ideal Neo-Grotesque that would mark a new chapter in the history of typography and become a bestseller.

See more05 February, 2024
Our Year in Review: TypeType’s Journey through 2023

Our Year in Review: TypeType’s Journey through 2023

2023 became a very important year for TypeType. Throughout 2023, we actively expanded and improved, embracing change and consistently moving forward. So, in this article, we are taking a step back to take a fresh look at our transformations, document achievements, and note down plans for the future. Let’s review our year!

See more29 January, 2024

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 more23 March, 2023
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 more26 February, 2023
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 more21 January, 2023