How to choose a font for the site

The font on a website is just as much a design element as color and shape. Well-chosen fonts for headlines and body text make reading easier and more comfortable. They also influence the overall impression of the website, which directly affects whether the user stays or leaves.

How People Read on the Internet

The study “How People Read on the Internet,” published by the American company Nielsen Norman Group in 2020, indicates that people prefer to scan pages with their eyes before deciding to read the text carefully. Scanning occurs according to different patterns, but almost always, the reader’s gaze glides over the headlines.

Visitors who access a website from mobile devices are more likely to read everything from start to finish. From laptops and computers, users prefer to consume information in the most concise form: tables, infographics, diagrams, lists. But regardless of which device a person chooses for surfing the internet, they will never bother trying to decipher an unreadable font.

Types of Fonts for Websites

Before moving on to font combination choices, you need to know what options are available. Fonts are divided into handwritten and printed based on the type of script. Handwritten fonts have an original look, and some are personalized (e.g., Kafka, Picasso, Cézanne fonts). Designers use them for headlines and logos. They are not suitable as a primary text font because they make reading and comprehension difficult. This is where printed fonts take over. They are divided into three groups:

1. Serif Fonts. They facilitate the reading of print publications by visually outlining lines. But in web design, they tend to complicate perception and distract the reader’s attention. The main purpose of such fonts is to be used in logos, to highlight headlines, and to emphasize important information on the page.
2. Sans-Serif Fonts. Neutral fonts without serifs. They are suitable for headlines, paragraphs, and body text.
3. Decorative Fonts. They look original and vibrant. These fonts are perfect for youth-oriented websites and any theme related to creativity. However, they should be used with caution: text written in a decorative font is difficult to read. They are most commonly used for creating logos and highlighting headlines.

Which Fonts Are Trending in the 2020s?

In website design, designers use fonts collected in the Google Fonts collection.

• The collection is extensive and includes only high-quality, free fonts.
• They integrate seamlessly during layout — it’s easy to connect the library and pull in any font.
• The Google Fonts library supports various content sorting methods.

Google Fonts offers fonts for Latin, Cyrillic, hieroglyphic scripts, Hebrew, and Arabic. It’s convenient to find what you need using filters, and you can select the top options with one click by choosing to sort by popularity.

The ranking of the most popular Google Fonts in the early 2020s looks like this:

1. Roboto. It’s easy to read even in small sizes and works well paired with other Cyrillic fonts from Google Fonts.
   
Roboto was the foundation for the development of the “Business Site” web studio’s e-commerce store “World of Glue.”
2. Open Sans. Another universal font for long texts and headlines. It reads well in any size, down to the smallest, and is suitable for banners, presentations, and advertising creatives.
3. Montserrat. A neat font in an urban style, ideal for advertising use. Its strong point is readability. It also looks impressive enough to be used in headlines.

You may have noticed that all the top fonts are sans-serif. It used to be believed that sans-serif fonts were hard to read, especially when it came to long texts printed with them. But in the 2020s, serif fonts are becoming less common in the web space, giving way to simpler sans-serifs.

Font Character and Mood

When discussing fonts, standard characteristics like typeface, weight, clarity, and size are usually mentioned. But each font is, first and foremost, a character. Here are some interesting facts to support this:

• Humorous sketches set in the Times typeface were found funny by 10% more readers than when set in Arial.
• Text printed in Baskerville, compared to the same text printed in Comic Sans, was deemed more convincing.

Depending on the message you want to convey, you should choose the appropriate font. For example, a bold font with sharp outlines sets the tone for facts, important information, and sensational news. Fonts with soft lines and rounded shapes evoke pleasant and light emotions, making them suitable for corresponding themes.

If this pairing combines typefaces that conflict with each other, the reader’s focus will be on the fonts themselves, not the content of the page. For example, if the headline is set in Franklin Gothic (elegant, solid, masculine style) and the body text in Souvenir (frivolous, playful), the result will be a conflicting combination that disrupts the article’s harmonious perception. However, replacing the headline font with Futura Bold completely changes the picture: these two fonts complement each other thanks to similar elements and do not create unnecessary tension.

The Impact of Fonts on Conversion and SEO: Analysis and Examples

Fonts play a much more significant role in how a website is perceived than it might seem at first glance. The right font choice not only enhances the visual appeal of a website but also directly impacts key metrics such as conversion, time spent on the page, and even search engine optimization (SEO promotion). Let’s explore how fonts can affect these indicators.

1. Impact on Conversion
   Readability and ease of perception are among the main factors influencing website conversion. Studies show that users make decisions more quickly on websites where the text is easy to read and visually appealing.
   For example, A/B testing on an e-commerce site might show that a simple switch from one font to another, more readable one, can increase conversion by 10-20%. The reason is that users find it easier to digest the information, locate the products they need, and navigate the site more effortlessly.

   Additionally, there is a direct correlation between text readability and users’ trust in a website. Fonts associated with professionalism and reliability (e.g., serif fonts for legal sites or sans-serif fonts for tech companies) can enhance brand perception and, as a result, increase conversion.



2. Impact on Time Spent on the Page
   Fonts directly influence how long a user stays on a page. Research shows that if the text on a website is hard to read (e.g., due to small font size, low contrast, or overly decorative fonts), users are more likely to leave the site within the first few seconds. Conversely, a well-chosen font that is easy to read and harmonizes with the overall website design captures users’ attention and encourages further interaction with the content.

   Time spent on a page is one of the key factors in search engine ranking. The longer a user stays on a website, the more likely they are to find the information they need, which in turn can lead to conversion.

   For example, switching from a hard-to-read font to a clearer and simpler one can increase time on page by 20-30%, directly improving behavioral metrics and, consequently, the site’s ranking in search results.



3. Impact on SEO
   Fonts affect SEO primarily through behavioral factors. Google and other search engines take into account metrics like time on page, bounce rate, and the number of page views per user. All these metrics can improve with the use of easy-to-read fonts.
   For example, if a site has a high bounce rate (users leave the site immediately after the page loads), this may signal to search engines that the content is of low quality, leading to a drop in rankings.

   Moreover, fonts can impact the site’s loading speed, which is an important ranking factor in Google.

   Some decorative or non-standard fonts can significantly increase the page load time due to the large file sizes or the need to connect to external libraries.

   To avoid this, it’s important to use web-optimized fonts like those found in Google Fonts, which are specifically designed for fast loading and minimal impact on site performance.

Examples and Statistics

• A/B Tests: Companies conducting A/B tests often find that changing fonts significantly impacts key metrics. For example, one well-known company increased conversion by 14% simply by replacing a decorative font with a simpler, more readable one. This confirms the hypothesis that users are more likely to complete target actions on a site when the font doesn’t distract them from the main content.



• Research by Nielsen Norman Group: Studies have shown that using fonts with high contrast and clear lines enhances text readability and improves user engagement metrics, ultimately leading to higher time on site and conversion rates.
• Google Data: Google’s research notes that websites with well-optimized fonts and high loading speeds gain an advantage in search rankings compared to competitors using complex and heavy fonts.

Finding the Right Font Combinations for Your Website

Approximately 90% of users consciously do not pay attention to the font used on a website. However, if these same people are asked to describe pages with deliberately mismatched font pairs or unreadable fonts, respondents note that it is unpleasant, difficult, and uninteresting to read the text. Meanwhile, the same texts, but printed in stylish and easy-to-read fonts, they read willingly.

For the average user, the key factors are perception: how harmoniously the font fits into the design, how easily it is perceived, whether it is comfortable to read, and whether the accents on the page are placed correctly to help navigate through the abundance of information.

The designer’s task is to work through all these factors while adhering to the website’s thematic dress code.

Tips from designers for choosing the right fonts for your website

• Do not use more than 3 fonts on a website. More than that will distract visitors. Additionally, loading multiple fonts takes more time, and even fractions of a second in load speed delay can negatively impact SEO performance and user loyalty.
• Ensure readability. If the text isn’t readable, nothing else matters—just change the font. To prevent users from leaving the page within the first few seconds after landing, it’s crucial to ensure that the text content is easy to read and the correct parameters are chosen: color contrast, size, typeface, etc.
• Use typography logically. This involves using different typefaces or the same font with different weights, sizes, and styles. However, there should be logic in the choice—headlines shouldn’t be smaller than subheadings, and the body text shouldn’t blend into the background. This helps the visitor navigate the page.
• Pay attention to font pairings and change them at the first sign of doubt. Classic options include: serif + sans-serif, pairing fonts of different classes, contrasting font weights in headlines and body text, pairing fonts of varying tones, and bright + neutral combinations. To assess the harmony of typography, you can use the “peripheral vision” method: direct your gaze to the left or right of the text to perceive the overall picture without reading the text.

Useful Tools for Working with Fonts

Choose the right font combinations for your website using online services:

• Google Type: a large number of font pairs curated by designers.
• Type Genius: input your main font and get a matching pair.
• Font Combinator: a simple-to-use service that allows you to choose both the typeface and font style for headlines and body text from harmonizing options.
• Font Pair: select a font pair based on chosen filter characteristics and download them to your computer.
• The Art of Mixing Typefaces — a cheat sheet on font compatibility for web designers.

To select suitable fonts by eye, you need visual experience and good taste. There’s no way around it, we’ve checked. Therefore, if you don’t want to delve into the nuances of typography in design, delegate these issues to our designers.

Order a prototype, design, redesign, or the full cycle of turnkey website development from professionals at “Business Site.” Fill out the application form, we will call you back, consult you, draft, and send a personalized commercial offer with attractive terms.