This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
210
How-to 11 min read September 10, 2019

How to choose fonts and colors for a website

To create a stylish website design, you need a basic knowledge of color theory and the art of typography. When choosing colors and fonts, you should pay attention to the associations that they traditionally evoke among users.

How to choose fonts depending on the website subject

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:
Sans serif fonts
For children's and entertainment portals, it is worth using more interesting, thinner and fantasy fonts that will appeal to a younger audience:
Fonts for entertainment portals
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:
Serif fonts
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.

How to choose a font

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.

Examples of fonts in graphic design

1
Craft fonts

Fonts on your website are a part of your brand; think about your brand first, define its properties and qualities.

  • In this example, you can see a package of ice cream where the producer wants to highlight the naturalness of their product. Fonts with imitation of embossed letters, calligraphy, something hand-made, home-made, warm in the atmosphere are excellent for this purpose:
Craft Fonts on Ice Cream Packaging
  • here's a similar font:
Craft Font
2
Handwritten fonts

Brand fonts which imitate handwriting are perceived as kind, open-hearted, and responsive; in this example, you can see the dog food:
Handwritten font on packaging.
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.

Adlery Pro Font
Amatic SC Font
You can see other free fonts for a website on the special Google portal or its analogs.
3
Serif

Serif fonts are great if you want to show commitment to tradition and company stability. These fonts animate the brand with a combination of vibrant graphics or colors:
Serif Fonts
Barrels Font
Font Merriweather
4
Sans Serif

Openness, transparency, flexibility — all these things can be reflected via an expressive sans-serif font. A font with bold and combined with emotional live photos gives a sense of brand openness:
Sans Serif Fonts
  • among paid ones, there is a modern font Gilroy:
Gilroy Font
  • among free fonts, there is Open Sans with a variety of typefaces:
Open Sans Font

Where to look for professional fonts

1
3
On myfonts.com, you can find either paid or free fonts. Keep in mind that only certain typefaces can be free. When choosing a font online, be sure to read the terms of use and check if the elements and languages you need are available.

How typography can help emphasize important information

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:
The graphical selection page conversion elements
  • change the color or size of a font.

How to use spaces in the text

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.
Line spacing too long
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.
Line spacing too small
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.
Correct line spacing
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.

How to choose colors for a website

Online services for selecting the color scheme of a website

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:
Create color scheme at colorscheme.ru
Also in the service, you can view already created popular color schemes:
Preview of the site with the selected color scheme
  • palettegenerator.com. This service has a different principle for selecting color combinations: you need to upload a picture with your favorite shades:
Color scheme generator palettegenerator.com
After adding the image, you can adjust the number of colors in the final scheme, leaving from two to ten colors:
Choosing a color scheme at palettegenerator.com

Psychology of the website color perception

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.:
An example of a site decorated in red and white
  • orange is also often used for calls to action, as it is associated with enthusiasm, adventure, and creativity:
An example of a site in orange and black
  • yellow provokes ambivalent associations. On the one hand, it is sunlight, warmth, happiness, and optimism, and on the other, yellow is associated with deception and warning in people's minds. Small yellow color accents, harmoniously combined with the rest of the design, will create a positive impression of the site:
An example of a site in yellow and black
  • the green color is associated with nature, a healthy lifestyle, and finances. This color will be most appropriate for websites related to pharmaceuticals, agricultural products, ecology, fitness or landscape design:
An example of a site decorated in green and white
  • light blue color causes a sense of harmony, serenity, and tranquility. The use of this color on the website forms a trusting relationship with the brand. Here's an example of the use of blue color for the conversion elements in an online store:
An example of a site decorated in white and blue
  • the blue color is considered noble and status as it emphasizes strength and freedom. Below is the use case for color highlighting the most important menu items with blue:
Example website designed in blue
  • purple is associated with luxury, wisdom, the beauty industry, and premium goods. In this example, the menu and conversion buttons are highlighted in purple:
An example site designed in purple
  • pink means femininity, playfulness, and unconditional love in color psychology. It is preferred to use purple on websites with the female audience:
Example site, decorated in pink
  • in Western culture, white color is associated with purity and innocence, kindness and humility. This is the most popular color for commercial websites. The combination of white background and the black font is the best option for readability of the text:
Example site, decorated in white
  • black is also popular in or commercial subjects. It evokes associations with power, mysticism, and elegance. For websites with a dark background, choose white graphic elements and a font:
Example website designed in black

Regulation on the use of colors and fonts on the website

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.

Conclusion

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.

This article is a part of Serpstat's Checklist tool
Checklist at Serpstat
Checklist is a ready-to-do list that helps to keep reporting of the work progress on a specific project. The tool contains templates with an extensive list of project development parameters where you can also add your own items and plans.
Try Checklist now

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits