How to choose the perfect font for a website? Step by step guide + Examples!

By Karol Andruszków

February 3, 2020
How to pick font for website

Do you refresh or create a website or online store from scratch? So you have to choose the fonts that you will use on your website. It is a crucial choice. Why? The layout and appearance of texts significantly affect the aesthetics of the website and its functionality and readability. Pages with appropriate fonts are much more user-friendly. And that translates into a higher conversion!

Choosing the best font for a website is not easy. However, all you need to do is follow the guide prepared by us, and you will be sure to choose the best font!

In this article, you will learn:

  • How is a font different from font and a typeface?
  • How to choose the perfect font for a website
  • What tricks to use to combine fonts effectively
  • And much more!

How to choose the best fonts for a website?

Here are the 7 key steps you should take!

Choosing the perfect fonts for your website:

  1. Define the character of your brand
  2. Define the goals of the texts on your website
  3. Make sure the font has the correct characters!
  4. Check font license!
  5. Choose Primary and Secondary
  6. Fonts Skillfully combine the fonts and get even more out of them!
  7. Focus on legibility
Let's take a look at how to make each of them in practice.

Step I
Define the nature of your brand

restaurant template webiste
Lounge Restaurant is an example of a template dedicated to restaurants, emphasizing the long-standing tradition and craftsmanship of prepared dishes. The serif fonts used here, which you can read about in this article, are ideal for this.
Have you ever heard that a picture expresses more than a thousand words?
It is similar to typography. Therefore, you need to make sure that the fonts properly reflect the character of your brand.

How to do it? First, you need to define the nature of your brand.

To do this, use the supporting questions we have prepared for you below!

How to determine the nature of your brand when choosing a font?

  • Is it a technical company, or is it an aesthetic products and services company? 
  • People of what age and gender are its offers addressed to?
  • Are the services or products intended for a broad or narrow audience? 
  • Is it a "brand for everyone"? Or is the target exact, e.g., educated women aged 25-35 from big cities? 
  • What are a given company's values, and what does it want to communicate to the recipients?
  • Is the brand elegant or maybe humorous?
Write down the answers to these questions! They will help you with the next steps in font selection, which we will explain in this article!

Step II
Define the goals of the texts on your website

designing fonts website

After identifying your brand's characteristics, you need to know the fonts' types and features on the web.

This knowledge will allow you not only to match the font to the character of your brand perfectly.

You will also learn in which situations it is best to use each of them. Remember that the font you choose must serve the purpose of the text it is saving.
In other words, you will use a different font to describe your product or service and a different one to create, for example, a CTA (call-to-action) or headers on your website.
So, get to know the division of fonts and the goals that will work for them!

Classification of fonts

Fonts are mainly divided into:

  • Serif fonts
  • Sans-serif fonts
  • Script fonts
  • Decorative (display fonts)

When to use the different types?

You will find the answer below:

Serif Fonts

font newsreader

Newsreader - a top example of a serif font

These are fonts that have transverse or diagonal line endings (so-called serifs) decorating the script.
The use of serifs gives the texts a traditional, more elegant character. These fonts have long been used in long paper publications (mainly in books) as serifs help the reader follow the text line, making it easier to read.

Due to their decorative character, serif fonts also look good on websites ... but most of all, when they are used as additional content elements, e.g.:

  • headings,
  • quotes,
  • subtitles,
  • logos, they
  • slogan
Should not be used to write the main content of the page.
They can be used by companies that want to emphasize their many years of experience, refer to tradition and signal certainty and stability.
Popular serif fonts: Times New Roman, Georgia, Palatino, Bookman Old Style, Garamond, Courier, Lucida, Century, Arno Pro, MS Serif.
See also: a list of the best fonts for various industries!

Sans-serif fonts

font lato

Lato - an example of a sans serif font

As the name suggests, sans-serif fonts are devoid of the serifs. For this reason, they have a more modern and minimalist character.
Their use on the Internet has become commonplace because screens could not correctly display serif fonts in the past. Also, sans-serif fonts displayed on the screen do not tire the eyesight.
They should be used by companies that are innovative or want to be perceived as modern and dynamic. They show accessibility and simplicity, so they will be a good choice for a company that addresses its services to the young generation.

Popular sans serif fonts: Arial, Open Sans, Montserrat, Helvetica, Futura, Verdana, Trebuchet MS, Univers.

Script fonts

font sofia
They are fonts that mimic handwriting.
They are elegant and formal but also a little bit humorous. Among them, you can find both very (VERY) ornamental and quite simple fonts.
Their advantage is high expressiveness. They carry an enormous emotional charge that you can use to evoke a specific reaction in the recipients. Besides, script fonts attract attention and allow you to communicate serious or humorous content (depending on the font type).
Elegant script fonts are perfect for wedding invitations and greeting cards. On websites, they will work when you use them to write tiny text elements - e.g., headings or quotes.
When using these fonts, you should pay attention to their legibility. The more decorative and "complicated" the font - the greater the chance that it will be unreadable for the recipient.

Popular script fonts: Great Vibes, Lobster, Grand Hotel, Sofia, Arizonia, Black Jack, Cookie, Germanica, Miama, Pacifico, Tangerine.

Ready to create your website?

Use the most convenient website builder, trusted by thousands of designers and create websites that will provide you with customers!

Start now!

Decorative fonts (display fonts)

It is a large group of very diverse fonts, which are distinguished by an elaborate shape and high ornamentation.
Their form may be related to specific emotions (e.g., fear - with gothic decorative fonts that the title of horror movies is sometimes written) or one particular historical time, place, or object. Decorative fonts also often refer to cultural phenomena, e.g., graffiti. Sometimes the form resembles pictures.
They are very expressive and original fonts. Therefore, you have to be careful with their use - they can quickly become unfashionable because they often reflect certain times' design trends.
Another problem may be the selection of an appropriate decorative font on the website - it should match the character of the brand/company, and at the same time, remain legible. Therefore you should use it carefully and mainly to write small elements - e.g., headers. However, if you choose the right decorative font, the page will stand out.

Tip:

You have already defined the nature of your brand. You know the types of fonts and their characteristics.

Now try to find fonts that will express the same features and values ​​that your company has.

To quickly find font ideas, you can look at our list of the best fonts for different industries.

Step III
Check that the font has the correct characters!

Watch out for Lorem ipsum and subtitle generators!

Have you started considering your choice of several fonts? Good!
Before you decide, however, make sure that the font you choose has all the necessary characters.

What is going on?

Not having all the signs is a common trap. It's easy to fall into it when we use text generators and check the font's appearance not with our target content but with, for example, Lorem ipsum.

As this text is written entirely in Latin, we may not notice the lack of vital signs, including language diacritics.

The lack of language diacritics is not the only trap you can encounter. It also happens that popular fonts (both paid and free) have problems with certain characters ... or do not have them at all.

Remember about the language versions!

Does your website have multiple language versions? Remember that most languages ​​have specific diacritics. Even more so, you should carefully verify that a given font has them all - before choosing it.
If the font you chose does not exist, the default font will be used each time for the missing character. This can look ugly in many situations.
You can solve this problem in two ways:
  • by changing the font to another
  • coding the page in such a way that the correct CSS podmieniał the mark on a visually similar for different language versions
If you are using BOWWE, you do not have to worry about it - any work requiring coding, we will do it for you!

Step IV
Check Font License!

What is also crucial when choosing a font is the utility license.
You need to check if the license by which you have the font allows you to use it in general on websites.

Be careful, especially with the fonts that install with the Adobe suite or the operating system. Their license often only allows them to be used in printed materials, not on websites. Therefore, not every typeface can be converted into a digital font and placed on the page.

If you want to be sure that you can use a given font on the web, use the Google Fonts library.

Step V
Choose Primary and Secondary

Fonts You like a few fonts but have a hard time making the final decision?

Remember that you can't use too many of them. 2-3 fonts on a website are the optimal number.

The use of many fonts introduces chaos on the website. It makes it difficult to read the text - then you will not reach potential customers.

Most professional websites include:

  • Primary Font
  • Secondary Font
  • Accent Font (optional)

Font, each of these fonts, has a different role and is used for other content. To give your website a professional look and make it easier for you to choose the best fonts - take a look at how each of these groups differs from each other:

Primary font

The most visible on your website. Used in slogans, titles, and headings. Although it will not be the most used, customers should identify your brand with it. It's worth it to match the font present in your logo (as long as it contains text).

Secondary font

Will be the one that will fill the text blocks: paragraphs, product descriptions, or blog entries.

This is the most commonly used font on every website or online store.
While the primary font may be original, the primary purpose of a secondary font is readability. It is very important - customers should read your content easily.
The secondary font aims to bring out the primary font's qualities (see the next section for more information on combining fonts).

Accent font (optional)

It's not a required font, but you should consider selecting it.

You can use it, for example, in CTA (Call To Action) buttons, which are to attract attention and generate clicks. Accent font can also use it to emphasize the essential parts of the text or highlight quotes.
This type of font should be different from the rest to attract your audience's attention effectively.

Tip

How can I recognize a font that has been used on another website?

Did you like the font you found on a website? Would you like to use it in your website design?
Install the plugin for Chrome FontFace Ninja. With its help, you can check the name of each font used on a given website. Just click on the installed plugin's icon and use your mouse cursor to select the font whose name you want to know.

Step VI
Skillfully combine the fonts and get even more out of them!

machine rental and sales website
Professional Machines is a template, dedicated to the machine sales and rental industry. The combination of the massive Oswald font (basic font) and the minimalist Nunito (complementary font) well reflects the nature of the industry and builds trust in the company among visitors. 
Now is the time to learn how you can master the art of combining fonts.
The best way to do it is by following these tricks:

Ready to create your website?

Use the most convenient website builder, trusted by thousands of designers and create websites that will provide you with customers!

Start Now!

8 tricks for better font combining

1. Serif with sans serif

Serif and sans serif font matching fonts are a safe combination - mainly when we use them in different sizes. Such fonts are so different that, in many cases, they look attractive.

2. Contrasting size

Serif and sans-serif fonts are a safe combination - mainly when we use them in different sizes. Such fonts are so different that, in many cases, they look attractive.

3. Contrast weight

It is worth writing the headline in thicker font and the content thinner. Then the text will be better readable.

4. Using fonts from one font family

Using fonts from the same family can quickly achieve the thickness mentioned above (e.g., Open Sans and Open Sans Semibold). Many fonts have many variants - consider combining two of them on your website. For example, on our BOWWE page builder page, you will find different Roboto font versions: Roboto font, Roboto Condensed, and Roboto Slab.

5. Avoiding fonts that are too similar

This rule also applies to contrast. Suppose the difference between the font is too tiny (fonts are too similar to each other). In that case, the connection will not look good - even if one is Serif fonts and the second - sans serif.

6. Similar emotional expression

There are fonts, which are the carriers of emotion. For example, they are meant to be sophisticated, profound, dynamic, or fun. It would be best not to combine fonts from such different groups because then we will introduce communication and visual chaos.

7. Expressive fonts with neutral

If you use a script (similar to handwriting) font in your header, use a neutral font to write your body text. Besides, the use of two expressive fonts, again, close to each other, will distract the reader and make it difficult for him to read.

8. Conflict avoidance

If two fonts have entirely different proportions (e.g., one will have very distorted letters and the other condensed), they may look awful. It is worth checking that the lowercase letters' height is the same - then the fonts are more likely to match.

Tip:

Smart and Easy Ways to Combine Fonts

The above selection tips may be helpful, but it's hard to follow dry rules. Below you will find links to valuable tools to help you combine fonts accurately.

Font pair

This page presents pairs of fonts that look good together. You can download prepared pairs of fonts from there immediately, and all fonts are available in Google Fonts.

Canva Font Combinations

Straightforward and practical tool. First, you choose a font name from the list. Then the search engine suggests a different font for it. Next, it presents an example of what such a font combination looks like.

Typ.io ​​​

That page shows various fonts statement with examples. You should pay particular attention to the font lists used on websites.

Step VII
Go for legibility

If you conclude that a handwritten font suits your brand best, then… you should not use it as the primary font on your website. Decorative fonts add style but are challenging to read, and you should want users to spend as much time as possible on your website and read the content you publish.

Indeed large headlines or Call-To-Action can be saved in a more complex graphic font. But in the case of body text, it is much better to use simple, readable fonts.

You should ask yourself:

What font on my site will be the best to read? What affects the readability of the text
Take a look at the list below

Factors affecting the readability of the text on the page:

Inter-letter lights

Most fonts are well-designed in this aspect. As the primary font, you should choose the universal variant (not - for example -narrow).

Leading

Too small leading will make reading difficult. Ideally, the line spacing should be at least 120% letter case (150% is often considered optimal).

Space Between Paragraphs

Even more excellent readability, use slightly longer spacing between paragraphs.

Text alignment

Too much text in one line and also small margins can effectively discourage reading. The Golden Rule speaks of 50-60 characters in verse as an ideal.

Contrast

Font should be of such color that it stands out against the background on which it is presented. Both too low and too high contrast will make reading difficult.

Size

The font size indicates the importance of a given element and allows you to divide the text into readable sections. Optimal font sizes for individual elements:
  • Titles: 30 - 70,
  • Subheadings: 22 - 30,
  • Plain text: 16 - 20

Italic, bold, and underlined.

Best used these effects sparingly. Underlining is rarely used on web pages. Bold emphasizes the importance of the items, increasing their visibility. Italics are great for foreign language expressions and quotes.

When the elements mentioned above are not correctly matched, reading your website's content will tire the user. Then he will leave her very quickly, without even getting acquainted with the offer!

Did you like this article? See also:

8 Golden Rules Of Typography. UX-Guide

51+ Best Fonts For Your Website!

7 reliable ways to write a captivating title [+EXAMPLES]

Conclusion

Let us remind you what - step by step - should be done when choosing a font for a website:

 

  1. Define the nature of your brand. The font is to express the personality of your brand and match the style of your audience.
  2. Define the purpose of the texts on your website.
  3. Check that the font has all the necessary characters.
  4. Check that the font is appropriately licensed.
  5. Choose Primary, Secondary, and (if necessary) Accent Font. 
  6. Skillfully choose the fonts on your website. 
  7. Don't forget about legibility.
Suppose you make your choice according to the process described in this article. In that case, you will indeed be satisfied, and you will quickly notice the better statistics achieved by your website!

Ready to build your own website?

Don't worry, we'll help you! We can also do it for you!

Start right now
banner image

Create your own professional website

Start right now
1
Banner of the European Union donation

The support of small and medium enterprises in the promotion of product brands - Go to Brand from the Intelligent Development Operational Program 2014-2020,

co-financed by the European Regional Development Fund.