design

How to choose a font for a website or article

Guidelines that help you to choose a font
without going into too much theory.
Font is very important. It is like air, you do not notice it when everything is ok. Most people have no idea about fonts' names and their peculiarities (and that is normal), but they will definitely sense that something is wrong with your website, if the font you are using does not suit your project.
We believe you should make your website at Tilda, as we consider it now to be the best way to create a website all by yourself, without a web-developer or designer.
How to change and adjust a font at Tilda
A font is specified in the settings of a website. This means that all the parameters will be applied globally, to all blocks and all pages. This provides a common style and clarity.
The maximum number of fonts that you are able to add is two. On the one hand, the usage of a small number of fonts is good for the visual impression in general. On the other hand, every additional font greatly increases the weight of a page. Thus, in order to have a reasonable load speed, we use no more than two fonts.

In Site Settings, in the Fonts tab you will see Fonts' Pairs. These are combinations of two fonts that have been suggested by our designers. Scroll down. You should find what you need. Click Select and Save Changes. The fonts at your website will change.
If the combinations that we provide do not suit you, click Advanced Settings. You will see allpossible ways to add a font at Tilda:
1) Select one from the basic set
2) Upload your own file with a font
3) Add a font through Typekit
4) Use Google Fonts
5)
Upload your CSS feel
(follow the links in order to obtain detailed guidelines for every type of adding).
If you scroll down the page, you will find settings for size, weight and colors. The parameters that you set there will be applied to all the pages of your website. If you need to change them in some blocks, you can do that using a processor for this or that block.
What is a Font Weight?
Font Weight determines thickness of every letter. Usually we call a text normal or bold. Fonts can have additional grades of thickness: from very thin to very bold. Tilda supports 5 basic values. Not every font has all grades of weight. Many fonts have only two styles, normal and bold.
There are seven variants of font weight for Avenir.
What is the ideal font size for a website?
Font size depends on an amount of text. If you don't have much text, and in fact it is used more for captions and comments, make it bigger – 22px (default size is 20 px). It looks more presentable. If, on the contrary, there is a lot of text, make it smaller, 18px, thus, it reads more easily.
Font parameters setting for different projects
Let us start with the simplest thing: What is your project? Is it an article, a post in a blog or a story, in general – anything where text is the most important thing? Or do you have a website, a landing page or a photo story – a project with just a bit of text? Let's outline two types of project-an article and a website.
Setting fonts for a website according to it's message
When you are just starting to design a website, consider, if the default font suits you because a font has to suit the tone of your website. A website for a kids sports camp and a website for an architecture studio are projects with different tones. You can express this with font weight.
We are going to investigate 4 combinations of different font weight in titles and text. They help to show a website's tone of voice so that it looks balanced and you succeed in creating a nice project.
1
Semi-bold title + normal text
This is the most basic combination that works well in most cases. Use it when your task is to create a good website without too much of any kind of accent. It suits any website.

Use the following parameters in the website Settings:
Text font weight — Normal
Headline font weight — Semi-Bold
Settings> Font and Colors > Size and Weight
Example
Vacancy Page. The following fonts are used: Open Sans (for title) and Roboto (for text).
2
Bold title + normal text
This is also a very popular combination. We recommend using it if you want to stress that your project is about drive and energy.

The websites it suits include - bar, coworking, announcements of a concert, sports competitions, promo page of a tour, etc.

Use the following parameters in the website Settings:
Text font weight — Normal
Headline font weight — Bold
WebsiteSettings> Font and Colors > Size and Weight
Example
Coworking website. The following fonts are used: Ubuntu (for title) and PT Sans (for text).
3
Bold title + thin text
This is a less common combination; it looks dramatic due to the contrast. It works great when you need to match a drive and a style.

The websites it suits: a good example would be our use of the combination for the landing of our course called „Internet Marketing from Scratch". On the one hand, we needed bright and well readable titles; on the other hand, the text had to show aesthetics of good design.

Use the following parameters in the website Settings:
Text font weight — Light
Headline font weight — Bold
WebsiteSettings> Font and Colors > Size and Weight
Example
Page of Design Studio. The following fonts are used: Noto Sans (for title) and Open Sans (for text).
4
Thin title + thin text
This combination is for projects that deal with high tech or something progressive and state-of-the-art. Or something meant to be beautiful and strong. It is particularly good when you have a lot of white space and small accents of bright colors and smart pictures.

The websites it suits include - gadgets, jewelry, expensive cafés or restaurants and beauty parlors.

Use the following parameters in the website Settings:
Text font weight — Light
Headline font weight — Light
WebsiteSettings> Font and Colors > Size and Weight
Example
Landing of a mobile application for photo processing.
Examples of different fonts' combinations
By combining different fonts in titles and text you can get various effects and express the character and tone of voice of your website.
Choosing fonts for an article
The most important thing for an article is that a text should be read as easily as possible. That is why it should be contrasting and not too big.

If you have a longread or an article with a lot of text, select 18px font size. But if you have a photo report and the text is mostly captions, you can keep a 20px font size or enlarge it upto 22 px.

Use the following parameters in the website Settings:
Text font weight — Normal
Headline font weight — Bold / Semi-Bold
Text font size — 18px
WebsiteSettings > Font and Colors > Size and Weight
Example
Page in a fashion blog.
Example
Corporate blog.
Example
Article about internet marketing.
With or without serifs?
Serif font
Sans-serif font
Orange particles on the left of the picture are serifs. Massimo Vignelli's quote on the left of the page is in Baskerville Regular font, the right one in Helvetica Light.
For a long time many people believed that serif fonts were better to read, because serifs create a guiding line that helps your eyes to slide more smoothly and quickly. When the first computers appeared, sans serif fonts became widespread because on low-resolution screens plain, sans serif fonts looked more legible.

Modern monitors display both fonts equally well. That is why nowadays a choice between serif and sans serif is determined by the nature of your message, not by readability. Serif fonts sometimes suggest a rather formal tone and suit some brands.
How to add a font that is not in the basic set
In all examples that we have given, the above fonts from the basic set were used. In order to change them go to the Website settings and select a font from the list. Besides this, Tilda allows you to add any kind of font you want.
Where to purchase fonts or find some free ones
At Tilda there are 5 ways to add a font:
1
Select one from the Settings. We picked up 13 good fonts from open sources.
2
Upload your file with a font to Tilda. In this case, you have to have found a font elsewhere. For example you can buy them at:

MyFonts.com
The price is about $19/29/49 for one typeface. There are some cheap fonts for $2, and there are those that cost 89$. Some sets have free fonts. Any web font can be tested at your website for 30 days.

Fonts.com
Subscription system. There is a free plan (3 thousand fonts); paid-for sets are from $5 to $100 per month.

Type.today

3
Add a font through Adobe Typekit. This is a fonts library.
— Free plan: 940 fonts
— Paid-for plan is $49 per month and gives access to 5660 fonts.
— An access to these 5660 fonts is granted to Adobe Creative Cloud subscribers. If you pay for Creative Cloud, you do not have to pay extra for Typekit.
4
Use Google Fonts. The fonts are free. Our guidelines.
5
Upload your CSS file. Our guidelines.
Good Fonts List
Futura. Where you can buy this font: myfonts.com/fonts/paratype/futura-book
Proxima Nova. Where you can buy this font: myfonts.com/fonts/marksimonson/proxima-nova
Franklin Gothic. Where you can buy this font: myfonts.com/fonts/itc/franklin-gothic
Graphik. Where you can buy this font: type.today/Graphik
Museo. Where you can buy this font: myfonts.com/fonts/exljbris/museo-sans
Gotham. Where you can buy this font: typography.com/fonts/gotham
GT Walsheim. Where you can buy this font: grillitype.com/typefaces/gt-walsheim
Helvetica Neue. Where you can buy this font: myfonts.com/fonts/linotype/helvetica-neue
Readability of a font
Whatever font you choose, it has to be readable. Especially if you use a background photo. If you put a thin font over a photo with minor details, your text will be impossible to read. Never forget about that.
What can you do? First, use a good background photo: a one with big, homogeneous elements. Second, fade the picture with a filter; it will become smoother and your text will be easier to read. Third, you can increase the weight of your block using an inline style. That means that you set parameters not for the whole website but for a part of the text. Highlight the text and set parameters with the processor.
Style that is applied this way, above the global settings, will always be prioritised. Thus, when you change something in Website Settings and do not see changes, it means that it is inline. To remove it, highlight the text and click the Clear icon.
Text is not quite readable
Text is easily read
On the left cover, it is very hard to read the text. To correct this we took a photo that does not have many minor details, used a 40% blue filter and increased the font weight.


If you are interested in choosing font, find good websites that are similar to your project and examine what fonts are used. The What Font browser extension helps to determine that.

Also, have a look at the independent typographic archive. This resource includes, websites' and printed matter examples which have been collected and sorted out according to their font type.

If you like the article, share it with friends. Thank you!
Made on
Tilda