How to Choose Typography for a Perfect Website Design

1. Use the Minimum Number of Fonts

When using more than three different fonts, your website loses its structure and looks unprofessional. Remember that overuse of font size and style can mess up any markup. In general, keep the number of fonts to a minimum (two are more than enough, often one is enough) and stick to using the same fonts throughout the website.

If you choose to work with more than one font, make sure the font families match letter width. Take a look at the example below. The combination of Georgia and Verdana (left) share common characteristics that blend harmoniously with each other. Take the Baskerville and Impact combination (right) for comparison. "Heavy" Impact overwhelms its "notch" partner.

2. Try to Use the Standard Fonts

But what could go wrong? This method has one serious problem - users are used to standard fonts and read text written in such fonts faster.

Usually, the best solution is to use system fonts. An exception may be the need to stick to some type of font that the client has set: for example, for branding or to create something memorable. Remember that good typography affects the reading of the text, not the visual perception of the type.

3. Limit Line Length

The correct number of characters on one line is the key to the ease of reading your text. When choosing the text's width, you should focus not on your design but on the clarity and legibility of the writing. If you want your reader to be comfortable, each line should be no more than 60 characters.

If the line is too short, the eyes must change focus frequently, slowing the reading pace.

If the line is too long, the reader's eyes, on the contrary, have to focus on the written for a long time. For mobile devices, stick to a range of 30-40 characters per line. In web design, you can achieve the required number of names by reducing text boxes' width using em or pixels.

4. Choose Typefaces that Read Properly in Any Size

Users visit your website from different devices, which, accordingly, differ in size and resolution. Most user interfaces use text elements of various sizes (copy buttons, field labels, section headers, etc.). Choose a typeface that looks good and remains readable at any size. Make sure the headset you choose is comfortable to read on small screens. Try not to use cursive fonts as they look pretty. They can be challenging to understand.

5. Use Fonts with Crisp Letters

Many typefaces are designed so that it is sometimes effortless to confuse similar letters, especially the Latin "I" and "L."In some, the letters are so close to each other that the combination of "r" and "n" can be mistaken for the letter "m."

Therefore, when choosing a font, test it in different contexts. This way, you can make sure that the typeface doesn't make the reader understand the text.

6. Avoid Caps

Text written in caps or capital letters alone is suitable for a situation where the user is not involved in the reading process (for example, in abbreviations or logos). But in other cases, don't rape your readers with text in capital letters.

7. Do Not Keep the Line Spacing to Minimum

There is a particular term for the spacing between lines - leading (or line spacing) in typography. By increasing the leading, you increase the vertical space between lines, thereby improving the readability of text on the screen.

According to the rules, to ensure the readability of the text, the leading should be about 30% more than the height of the character. The correct distance between paragraphs increases reading comprehension by 20%. The designer's ability to work with white space allows users to assimilate the text's content in its entirety without missing out on any details.

8. Make Sure the Color Contrast is Okay

When you have chosen the color scheme, you need to give your text readable to real users and preferably on several different devices. If, during testing, some difficulties with text recognition are revealed, then you can be sure that in the future, many users may face the same problem in the future.

9. Try Need to Use the Green or Red Color in the Text

Color blindness is a fairly common phenomenon, especially among men (8% of the male population is color blind). Therefore, in addition to color, it is advisable to use some other signs to highlight important information. Also, try not to resort to red and green colors, as these are the colors most often not recognized by color blind people.

10. Try Not to Use Flickering Text

Information that blinks or flickers can cause discomfort in susceptible users. Besides discomfort, it can also irritate many readers as it distracts them from the reading process.

Able to Attract Guests and Keep on the Page

Bright fonts of large size attract. It is desirable to use an unusual color scheme and correctly position the text on the portal. For example, on the pages of an online store, texts call for action to purchase goods, provide information about discounts and goods receipt, promotions, and presentations.

On the news portal, the central place on the page should be occupied by an actual and fresh article. Large texts correspond to advertising signs of the night city, urging to look at them, read information, and get acquainted with services.

Arouses Positive Emotions in Website Visitors

When writing one phrase in small and large print, the visitor will pay attention to the massive letters and prefer to use the services of an attractive portal.

If you write the correct inviting text, you can influence the emotional state of the visitor. The guest will return to the site and become a regular user. A loud slogan alludes to the website owner's identity to pique the interest of visitors and make them linger.

Highlight the Main

The banner blindness effect is known when users skim the page and do not dwell on essential details. Big headlines or advertising slogans written in bright letters help to highlight the main thing and get the desired effect from the site visitor. Smaller headlines show less relevant information.