design
How to choose the right font
for a website or article
for a website or article
These guidelines will help you choose a font —
without going into too much theory.
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 typefaces, their names or characteristics (and that is okay), but they will definitely sense that something is amiss if you're using an unsuitable font for your website.
With Tilda, the all-in-one platform, anyone can create a website without hiring a web developer or professional designer.
Contents:
Changing and adjusting fonts
How to set font properties depending on your project
Setting fonts for a website according to its message
Examples of beautiful font combinations
Choosing fonts for an article
Adding extra fonts
Where to buy fonts or find them for free
How to ensure your website's readability
Changing and adjusting fonts
How to set font properties depending on your project
Setting fonts for a website according to its message
Examples of beautiful font combinations
Choosing fonts for an article
Adding extra fonts
Where to buy fonts or find them for free
How to ensure your website's readability
Changing and adjusting fonts
Fonts can be changed in website settings and applied across all blocks and pages. This creates a unified and clear style for your site.
You may add a maximum of two fonts. On the one hand, using a limited number of fonts creates a good visual impression. On the other hand, every additional font slows down page download speed.
Go to "Site settings", then click on "Fonts and Colors" which will take you to Font family pairs. These are the combinations of two fonts recommended by our designers. Scroll down until you find the pair you like. Click "Select" and "Save changes". The fonts on your site will change.
Go to "Site settings", then click on "Fonts and Colors" which will take you to Font family pairs. These are the combinations of two fonts recommended by our designers. Scroll down until you find the pair you like. Click "Select" and "Save changes". The fonts on your site will change.
If the combinations we provide do not suit you, click "Custom settings". You will see a list of other options for adding a font to Tilda, such as:
1) Select a font from the default set
2) Upload your own font
3) Install a font with Typekit
4) Use Google Fonts
5) Upload your CSS file
For detailed how-to guides, simply follow the links above.
1) Select a font from the default set
2) Upload your own font
3) Install a font with Typekit
4) Use Google Fonts
5) Upload your CSS file
For detailed how-to guides, simply follow the links above.
If you scroll down the page, you will find font size, weight and color settings. The parameters that you set there will be applied site-wide. If you need to change fonts in a block, you may do so in the editor for each block.
What are font-weights?
Font-weight defines the thickness of each font. Usually fonts have two styles — regular or bold. They can have additional grades of thickness, from super light to super bold. Tilda supports five basic weights such as light, regular, medium, semi-bold, and bold. Not every font has many weights, some have only two: regular and bold.
There are seven variants of font weight for Avenir.
What is the best font size for a website?
Font size depends on the amount of text on your website. If you don't have much text and use it mainly for captions and comments, increase the font size to 22px (default font size is 20px). If you have a lot of text, make fonts smaller (18px) to improve readability.
How to set font properties depending on your project
Ask yourself: what is your web project? Is it an article, a blog post or a long read where text is king? Or do you have a website, a landing page or a photo story with just a bit of text?
Setting fonts for a website according to its message
When you are just starting to design a website, decide whether the defaul font suits the look and feel of your site. You wouldn't make websites for a kids' sports camp and an architecture look the same, would you? You can express the difference with font weights.
Next, we will look into four different font weights in titles and text. They help to set a website's tone of voice so its pages look balanced and right.
1
Semi-bold title + Normal text
This is the most basic combination that works well for most websites. Use it if you simply want to create a good-looking webpage without drawing attention to any particular elements. It suits any website.
Use the following parameters in website settings:
Text font weight — Normal
Headline font weight — Semi-Bold
Use the following parameters in website settings:
Text font weight — Normal
Headline font weight — Semi-Bold
Website Settings > Font and Colors > Size and Weight
Example
Job ad web page. Fonts: Open Sans (title) and Roboto (text)
2
Bold title + Normal text
We recommend using this popular combo if your project is about drive and energy.
It is especially suitable for websites for bars, coworking spaces, concert and tour promotions, sports competitions, and so on.
Use the following parameters in website settings:
Text font weight — Normal
Headline font weight — Bold
It is especially suitable for websites for bars, coworking spaces, concert and tour promotions, sports competitions, and so on.
Use the following parameters in website settings:
Text font weight — Normal
Headline font weight — Bold
Website Settings> Font and Colors > Size and Weight
Example
Website for a coworking space. Fonts: Ubuntu (title) and PT Sans (text)
3
Bold title + Thin text
This is a less common combination; it looks dramatic due to the contrast in fonts. It works great when you need to match drive with style. As an example, standout and easy to read titles and texts reflect aesthetically pleasing design in this marketing course website.
Use the following parameters in website settings:
Text font weight — Light
Headline font weight — Bold
Use the following parameters in website settings:
Text font weight — Light
Headline font weight — Bold
Website Settings> Font and Colors > Size and Weight
Example
Design studio web page. Fonts: Noto Sans (title) and Open Sans (text)
4
Thin title + Thin text
This combination works very well for projects about high tech, progress, state-of-the-art technology or something meant to look beautiful and strong. It is particularly good when you have a lot of white space, accented with spots of bright color, and beautiful images.
Suitable for websites featuring gadgets, jewellery, upmarket cafes or restaurants and beauty parlors.
Use the following parameters in website settings:
Text font weight — Light
Headline font weight — Light
Suitable for websites featuring gadgets, jewellery, upmarket cafes or restaurants and beauty parlors.
Use the following parameters in website settings:
Text font weight — Light
Headline font weight — Light
Website Settings> Font and Colors > Size and Weight
Example
Landing page for a photo processing mobile app. Fonts: Open Sans (title) and Open Sans (text)
Examples of beautiful font combinations
Pairing different fonts in titles and text will help you achieve various degrees of overall visual impact and express the character and tone of voice of your website.
Choosing fonts for an article
Do you want to make your article easy to read for your users? Then make sure it uses good contrasts and the fonts are not too large.
If you have a long read or an article with a lot of text, choose the 18px font size. For a photo essay that uses text mainly for captions, increase the size of the font to 20px or even 22px.
Use the following parameters in website settings:
Text font weight — Normal
Headline font weight — Bold / Semi-Bold
Text font size — 18px
If you have a long read or an article with a lot of text, choose the 18px font size. For a photo essay that uses text mainly for captions, increase the size of the font to 20px or even 22px.
Use the following parameters in website settings:
Text font weight — Normal
Headline font weight — Bold / Semi-Bold
Text font size — 18px
Website 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 serifs. Baskerville Regular was used for the Massimo Vignelli quote on the left and Helvetica Light on the right.
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 sans serif fonts looked more legible on a low resolution screen.
Modern monitors display both fonts equally well. This is why today 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, but not all, brands.
Modern monitors display both fonts equally well. This is why today 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, but not all, brands.
Adding extra fonts
In all previous examples we used some very basic font sets. If you want to change the font set, go to website settings and select a font from the list or add any other font you like (because, in Tilda, you can!)
Where to buy fonts or find them for free
On Tilda, there are five ways of adding a font:
1
In site settings, pick one of 13 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 set you back $89. Some sets include free fonts. A 30-day webfont trial is also available.
Fonts.com
Operates a subscription system. You can receive free access to 3,000 fonts while paid-for plans cost from $5 to $100 per month.
Type.today
MyFonts.com
Prices start at about $19/29/49 per typeface. Some of the cheapest fonts cost $2, while others can set you back $89. Some sets include free fonts. A 30-day webfont trial is also available.
Fonts.com
Operates a subscription system. You can receive free access to 3,000 fonts while paid-for plans cost 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.
— 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.
— Free plan: 940 fonts
— Paid-for plan is $49 per month and gives access to 5660 fonts.
— 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 how-to guide.
5
Upload your CSS file. Our how-to guide.
The good fonts list
Futura. Buy this font: myfonts.com/fonts/paratype/futura-book
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/Graphik
Museo. Buy this font: myfonts.com/fonts/exljbris/museo-sans
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 ensure your website's readability
Whatever font you choose, it has to be readable. Especially if you use a background photo. If you put a thin font over an image that contains many small details, the text will be very difficult to read. Always keep this in mind!
What can you do? First, use a good background photo with large, homogeneous elements. Second, apply a fade filter to soften your image. This will make your text easier to read. Third, you may increase the weight of your design block using an inline style. It means that you assign settings to a specific section of your text, not the whole website. Highlight the text you want and assign settings using the website editor.
Style applied this way will always have priority over default settings. So when you change you site's font settings and these changes are not visible on the website, it means they are "inline". To remove these changes, simply highlight the text and click "Clear".
Text is not quite readable
Text is easily read
On the left cover, the text is very difficult to read. To correct this we chose a photo without many small details, used a 40% blue filter and increased the font weight.
If you are interested in learning more about typography, find websites that are similar to the one you're designing, and find out what fonts are used in them. What Font browser extension will help you in this.
Also, browse through this independent typographic archive. It features a collection of websites and printed matter samples sorted according to their font type.
Also, browse through this independent typographic archive. It features a collection of websites and printed matter samples sorted according to their font type.
Liked the article? Share it with friends! Thanks so much!
