How To Choose Fonts For a Website Or an Article

In this article, we explained some of the essentials you need to make the right selection considering that you are building your website on Tilda, the all-in-one platform that allows anyone to create a website without hiring a web developer or a professional designer.

You can upload a maximum of two fonts. Using a limited number of fonts creates a good visual experience. Moreover, the use of additional fonts can slow down the page load speed. That is why there are only two fonts.

In the "Site Settings," proceed and click on "Fonts and Colors." This command will take you to the basic fonts selected by our professional designers. Once you find the most preferred font, click “Select” and “Save changes.” Once this is in place, the font on the website changes automatically.

Once you scroll down the page, you will find the font size, weight, and color settings. The parameters used at the phase will be applied site-wide. If you want to change the font, you can do so in the editor specified for each block.

Font-weight explains the thickness associated with each font. Fonts have two basic styles -regular or bold with an additional thickness that ranges from super light to super bold. Tilda supports five basic weights such as light, regular, medium, semibold, and bold. Although these weights are limited and some fonts have only two weights: Regular and Bold.

The size of the font you intend to use depends on the volume of content used on the website. If the website you're working on has content like captions and comments, you can increase the font size to 22px (the default font size is 20px). On the other hand, if the website requires a lot of text, you can make the font size smaller (18px) to improve the readability.

The next phase is to look at the four different font weights recommended for title and text. This feature helps to strike a balance on the tone of voice.

This is a basic blend that is compatible with most websites. We recommend this if you intend to keep the website's style unified and not call attention to any specific element.

Use the following parameters in website settings:
Body text font weight — Normal
Heading font weight — Semi-Bold

We recommend this combination if you’re working on a drive and energy project.

It is recommended on websites meant for concerts, tour promotions, bars, coworking spaces, sports competitions, and so on.

Use the following parameters in website settings:
Body text font weight — Normal
Heading font weight — Bold

This combination is pretty rare; it appears dramatic due to the contrast used on the fonts. However, it is a perfect blend of drive and style. For example, standout and easy-to-read titles and texts reflect aesthetically pleasing design in this landing page course website.

Use the following parameters in website settings:
Body text font weight — Light
Heading font weight — Bold

This is a perfect combination for projects meant to look attractive and strong to call attention like state-of-the-art technology, progress, or high tech. This blend of font appears perfect when used on a page with plenty of white space accented with bright-colored spots and beautiful images.

Suitable for websites featuring gadgets, jewelry, upmarket cafés or restaurants, and beauty parlors.

Use the following parameters in website settings:
Body text font weight — Light
Heading font weight — Light

Serif font has a guideline that allows the eye to slide smoothly and quickly. When the first computers appeared, Sans serif fonts became widespread as these fonts are more legible when used on a low-resolution screen.

Most modern monitors display both fonts perfectly. This is why the choice between Serif and Sans serif depends solely on the message you intend to convey and not on the readability score. Although Serif fonts are suitable when used on the formal ground and are recommended for specific brands.

On Tilda, there are five ways of adding fonts:

What can you do? First, use the right photo on the background with large, homogeneous elements. Second, apply a fade filter to soften the image. This will help increase readability. Third, you can increase the font weight for a specific block by using an inline style. It means you can assign settings to a specific section of your text and not the entire website. Highlight the text using the inline website editor.

Styles that are applied in this manner always have priority over default settings. That is why, if you modify fonts in the Site Settings and the modifications are not visible on the website, it means you have previously set the inline style. To remove the inline style, highlight the text and click on "Clear all formatting."

If you're interested in learning more about typography, visit a website similar to the project you're working on, and check what fonts are used. The What Font browser extension will help you quickly identify fonts on web pages.

Also, browse through this independent typographic archive. It features a collection of websites and printed samples sorted in accordance with the type of font used.