How does the designer quickly improve the readability of the page text?

Text can be beautiful, simple, wild, interesting, exciting, and many other kinds. It can inspire emotions and help users understand the message you are trying to convey. There are many kinds of fonts, but one thing is common-it must be readable.

This is a factor that is often forgotten. Designers put too much information into too small a space or choose fonts that look better than readability. But the point is: if the font is unreadable, your design will not be fully effective.

Although a bit sensational, it is almost universal. You ask: "What are those fonts as art elements?" Unreadable fonts do work in this type of design, but are limited to text that is readable.

In the narrow space to reflect the readability

FastCompany

Typographica

Medium

What makes text readable? It is actually a result of a number of factors, including the length of the line, line spacing, font style, outer and inner margins, and color and contrast.

Each element affects the ease with which the screen reads. Each of these elements is something that the designer can manipulate. Remember, the elements discussed in this article refer to the text in the body of the Web site, where the readability of the text can be said to be the primary consideration. (The standard for other text is relatively loose, as long as the body part is highly readable.) )

Line length: The number of characters per line plays a major role in the overall readability. If the text passages are very wide, it is scary and difficult to read. Similarly, each line of text is too short, it will bring pressure to the reader's eyes, causing confusion.

Leading: spacing between lines of text is equally important. Look at this article, if each line of text is glued to the next two lines, you can't understand these sentences.

Font style: The style of the font can also affect readability. Concise serif fonts and sans serif fonts are the most readable and easy to navigate, while those gorgeous calligraphy and novelty fonts are the hardest to decipher.

Outside and inside margins: As with line spacing, the space between the elements and between them also affects the user reading the text itself.

Color vs. Contrast: Text color is also important for the corresponding background. If you write green text on a green background, it's hard to read. The designer chooses a dark background with a light character, or a light background with a dark character, for a reason. Contrast makes the characters easy to read.

Readability on different screens

How do you create the most readable text? If it's body text, there are some basic guidelines that specify the number of words per line--each device is different--to help create the best readability.

Where do we start? The best line length helps you to determine the size of the text paragraph. You can do this: determine the width of the body part--it can usually be assumed to be divided into three sizes of desktops, tablets, and mobile phones. Then resize the text to an ideal line of words.

While there are other factors at work, these guidelines are a good starting point.

Desktop: 55 to 75 English characters per line, including spaces; the ideal state is 65 characters per line

Mobile devices: 35 to 50 characters per line

Combining the best single words with the perfect line spacing improves readability. Typically, line spacing is best defined as a percentage of the body font size, or it can be defined as a fixed value or EM.

Desktop: 1.5 times times the font size

Mobile device: 1.75 to twice times the font size

If you want to find a tool to simplify all of this work, try the Golden Scale text counter.

Other tips for readability

To create readable typography, text outside the body is also very relevant. Using headings, unordered lists, extra spacing between paragraphs, and colors also improves overall readability (headings help you navigate the entire site).

Consider using the following elements to improve the text level and create a more complete, more readable web design. Remember to "design" these elements into a unique font, font size, and color, and maintain consistency in the body.

Title

Link

Bold or italic characters

Unordered or ordered lists

Image elements, such as photos

Description text

Reference text

Mix line and sans serif fonts in individual elements

10 easy to read fonts

No text that discusses readability does not recommend fonts. Here are 10 types of highly readable-and quite popular-fonts that you can choose to set up for your site. (self-owned ladder)

Sans serif fonts

Open Sans

Lato

Exo

Nobile

Droid Sans

Serif font

Arvo

Old Standard TT

Abril FatFace

Vollkorn

Josefin Slab

Readability List

Now that you have a good idea and decide what fonts and styles to use in your next design project, are you sure you can combine them in a completely readable way? Here is a list of the fonts you plan to design.

Is the main part of the font size big enough? Does it achieve the best length on each device?

Is there enough space between each line of text?

Is there enough space between the text and the page boundaries and other elements?

Body text color and background contrast strong enough?

Is there any extra space between each new paragraph?

are headings and other elements different from body text?

Do you use other elements (no sequence tables, bold characters, etc.) to break down large pieces of text?

Does the body text use a readable font (it is recommended that you choose a line or sans serif font)?

Conclusion

Readability is a vital part of the design. If you can't read and understand what's on the page, it's completely irrelevant and unimportant to the user.

How do you plan for readability in a design project? Do you have any other skills to succeed? Share it with us in the comments.

Want to use a good font? You have to read its character first!