design

How To Choose Fonts for a Website or Article

This guide will help you choose the right font
with less theory
Font is very important. Using the right font is like breathing, you don’t seem to notice once all the necessary condition is perfect. However, most people have no idea of the typeface, the names, and characteristics (and that is okay). However, they could easily sense something missing once they use the wrong font on their website.
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.
Changing and Adjusting Fonts
You can easily change the font on a website and apply the effect across all blocks and pages. This feature allows you to create a unified and clear style.
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.
If none of the basic fonts is suitable enough, click on “Custom settings.” This will launch a list of different options allowing you to add a preferred font to Tilda, like:

1) Select a font from the pre-loaded font collection
2) Upload your own font
3) Install the font with Adobe Fonts
4) Use Google Fonts
5) Upload your CSS file

For detailed how-to guides, follow the links above.
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.
What are font-weights?
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.
There are seven variants of font-weight for Avenir.
What is the best font size for a website?
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.
How to Set Font Properties Based on the Project
Ask yourself: what type of web project are you working on? Is it an article, a blog post, or a long read where content is king? It could be a website, a landing page, or a photo story with few texts.
Setting Fonts for a Website in Accordance to the Message
When you are starting to design a website, it is important to decide if the default font is in line with the characteristics of the website. The fact is you don't expect a kids' sports camp website with an architecture website to look the same. And one of the best ways to express the difference is with the use of font weights.
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.

1
Semibold title + Normal text
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
Site Settings → Font and Colors → Size and Weight
Example
Job ad web page. Fonts: Open Sans (heading) and Roboto (body text)
2
Bold title + Normal text
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
Site Settings → Font and Colors → Size and Weight
Example
Website for a coworking space. Fonts: Ubuntu (heading) and PT Sans (body text)
3
Bold title + Thin text
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
Site Settings → Font and Colors → Size and Weight
Example
Design studio web page. Fonts: Noto Sans (heading) and Open Sans (body text)
4
Thin title + Thin text
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
Site Settings → Font and Colors → Size and Weight
Example
Landing page for a photo processing mobile app. Fonts: Open Sans (heading) and Open Sans (body text)
Examples of Beautiful Font Combinations
Combining different fonts in your headings and body text will help you achieve varying degrees of overall visual impact and express the character and tone of voice of your website.
Choosing Fonts for an Article
Do you intend to have your articles skim-friendly? Then ensure you use good contrasts and a medium-sized font that is not too large.

If the content you are working with is lengthy, try to use an 18px font size. Alternatively, if you’re designing a photo essay that uses text mainly on the captions, increase the font size to 20px or 22px.

Use the following parameters in website settings:
Body text font weight — Normal
Heading font weight — Bold / Semi-Bold
Body text font size — 18px
Site Settings → Font and Colors → Size and Weight
Example
Fashion blog
Example
Corporate blog
Example
Online marketing article
With or without serifs?
Serif font
Sans-serif font
Small orange lines in the example on the left are called Serifs. Baskerville Regular was used for the Massimo Vignelli quote on the left while Helvetica Light on the right.
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.
Adding Extra Fonts
In all the previous examples, we used some of the most common font families. To change a font, open the Site Settings and select the font from the list. Moreover, on Tilda, you can upload and use any custom font you like.
Where to Buy Fonts or Find Them for Free
On Tilda, there are five ways of adding fonts:
1
In Site Settings, pick one of the 18 fonts we've pre-selected from open sources.
2
Upload your file with a font you've purchased elsewhere. For example, you may buy fonts here:

MyFonts.com
Prices start at about $19/29/49 per typeface. Some of the cheapest fonts cost $2, while others can rate as high as $89, while some are free. You can also have access to the 30-day Web font trial that is available.

Fonts.com
A subscription-based service. You can have free access to 3 000 fonts, while the paid plan range from $5 to $100 per month.

Type.today
Prices start at about $25 per typeface.
3
Add a font through Adobe Fonts. This is a font library.
— The Basic font collection is available for free with an Adobe ID;
— Adobe Creative Cloud paid subscribers get unlimited access to the complete library of fonts.
4
Use Google Fonts. The fonts are free. Check our how-to guide.
5
Upload your CSS file. Check our how-to guide.
List of Our Recommended Fonts
Proxima Nova. Buy this font: myfonts.com/fonts/marksimonson/proxima-nova
Franklin Gothic. Buy this font: myfonts.com/fonts/itc/franklin-gothic
Graphik. Buy this font: type.today/en/Graphik
Gotham. Buy this font: typography.com/fonts/gotham
GT Walsheim. Buy this font: grillitype.com/typefaces/gt-walsheim
Helvetica Neue. Buy this font: myfonts.com/fonts/linotype/helvetica-neue
How to Increase Readability on Your Website
Regardless of the font you choose, it has to be easy to read, especially if you are using a background photo. If you use a thin font on an image with lots of small visual elements, the text may become difficult to read. Always keep this in mind!
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."
Text is not quite readable
Text is easy to read
On the left cover, the text is very difficult to read. To improve it, we chose a photo without lots of small details, used a blue filter with 40% opacity and increased the font weight.
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.

Liked the article? Share it with friends! Thanks a lot!
See also: