How to choose fonts and colors for a website

As scientific research proves, fonts affect the assessment of printed information. Also, experiments confirm that optimal website fonts may vary depending on the website subject to arouse relevant associations among readers.

Traditional sans-serif fonts, for example, Verdana or Aria, are suitable for a corporate website as they are associated with a strict business style:

For children's and entertainment portals, it is worth using more interesting, thinner and fantasy fonts that will appeal to a younger audience:

For academic papers, Serif fonts are more suitable. An experiment conducted in 2015 showed that readers perceive scientific texts written in such fonts more favorably:

The reader's perception of the text, in addition to the font and its size, is influenced by color, typeface, spaces between characters and line spacing, and column information. The main thing is that the text is legible, easy to read both on a computer and on portable devices.

When choosing a font for a site, you should follow these guidelines:

• use no more than four fonts on one page;
  
• use sans-serif fonts for main text as serifs make reading difficult on the screen;
  
• use serif fonts in the printed texts since readers associate them with reliability and respectability;
  
• use the Monospace family fonts for program code examples, instructions, or typewritten text;
  
• using custom fonts, such as Script and Fantasy, to design headlines and accents to attract attention;
  
• for headings and calls to action use larger font sizes than plain text.
  

These fonts are also good for children's brands as well as for any brands where it is important to express care and responsiveness.

These alternative fonts set the informal style well.

• paid font Adlery Pro:

You can see other free fonts for a website on the special Google portal or its analogs.

Various methods are used to attract the user's attention to a specific text:

• change the typeface — highlighting in bold or italics;
  
• coloring individual information blocks or conversion elements:
  

When designing a text, you need to pay attention to the correct use of spaces. Let's consider the rules of correct spacing on examples.

Bad. When shifts between the lines are too huge, and this solution is not justified by anything, the text is simply inconvenient to read, it is very stretched vertically, and users need to scroll the page again.

Bad. Too little distance between the lines confuses the reader, it is difficult for them to understand where the next line begins in the text; as a result, your beautiful text may simply not be read due to this small detail about the distance.

Good. Text lines are at a sufficient distance from each other; the information is nice to read. Follow a simple formula: line spacing should be 10 points larger than the size of the text itself.

Use only one text column on a mobile version.

When creating a design, you need to choose the right color scheme for a website, which will match the corporate identity of the company and correspond to the subject of the project.

You can use the following online services to select a color scheme:

• color.adobe.com uses a color wheel based on which various combinations of shades are generated:

Also in the service, you can view already created popular color schemes:

After adding the image, you can adjust the number of colors in the final scheme, leaving from two to ten colors:

In addition to the rules of colorization, when creating a website, web designers and marketers apply knowledge in the field of psychology of color perception.

According to this theory, each color has its own sphere of application, causing certain feelings and associations. It is important to remember that these statements are only true for European and American cultures, and in other countries, there may be a completely different attitude to these colors.

Let's consider the basic shades and their signs from the point of view of psychology, which help determine which colors to choose for the site:

• the red color is used to attract attention. Traditionally, this color is associated with energy, activity, passion, and danger. On websites, this color is often used to focus on transaction and call-to-action buttons.:
  

After selecting the font, colors, and other typographic parameters, it is necessary to fix these values in the regulation in order to ensure a uniform stylistic design of the website.

This document will allow each page of the project to look like an organic component of the whole, without breaking out of a single picture and not making the user feel that they are redirected to another resource.

With a large number of employees with access to website administration, a clear regulation is the best option for ensuring coordinated actions when adding new text content to the project.

Typography opens up great opportunities for website design, allowing you to set the necessary semantic accents and set the desired mood of the users. When formatting the text, you need to follow these principles:

• choose fonts and their combinations that will look natural together and match the subject of the website;
  
• monitor readability and legibility of the text;
  
• set inter-character and line spacing for easy reading;
  
• emphasize content with a color that will evoke the right associations and visually match the corporate identity of the company.