10 rules of typography in interfaces

Google s Roboto headset.

Make sure the headset you choose reads well on small screens. Try to avoid handwritten typefaces like Vivaldi. Despite their beauty, these fonts are very difficult to read.

Vivaldi s font will be very difficult to read on a small screen.

Rule # 5. Use a font with clearly distinguishable characters

Some fonts make it difficult to read similar letters, especially such as “i” or “L” (as in the example below). The same problem can be caused by too close arrangement of letters to each other. For example, “r” and “n”, when written very closely, resemble the letter “m”. Therefore, when choosing a font, be sure to test it in different contexts to make sure it doesn t cause problems for users.

Rule # 6. CAPS is not always good

Text written in capital letters only is suitable only for those cases where it does not require a long reading (for example, abbreviations or logos). But where it is necessary to concentrate, this technique is best not used. As Miles Tinker pointed out in his work Ligibility of Print, text written in capital letters only significantly slows down reading compared to the same text written in lower case letters.

Rule # 7. Don t minimize line spacing

Typography uses a term to refer to the spacing between lines of text – leading or line spacing. By increasing the spacing, you increase the vertical space between lines of text, thereby improving readability, but reducing the amount of text you can fit on your screen. Typically, for easy readability, line spacing should be 30% larger than the characters themselves.

Correct leading improves readability. Image from Microsoft.

As Dmitry Fadeev notes, the correct use of spaces between paragraphs by 20% improves reading comprehension and helps the user to more easily “digest” the text, which is not overloaded with unnecessary details.

Left: Lines in the text are packed very tightly.
Right: Correct use of leading improves readability.

Rule # 8. Make sure you are using sufficient contrasting colors

Do not use the same or similar color for text and its background. The clearer the text, the easier it is to perceive and read. The W3C Worldwide recommends the following contrast ratio:

• For text with small print, the contrast ratio between the text and its background must be at least 4.5: 1
• For text with large print (font 14 bold / 18 bold and above), the ratio of contrasts between the text and its background must be at least 3: 1

The contrast ratio of the text and its background does not meet the recommendations, therefore it is difficult to read

The contrast ratio of the text of its background meets the recommendations, so it is easy to read

Color blindness is a very common condition, especially among men (8% of men cannot distinguish colors). Therefore, it is recommended to use additional tools besides color to highlight important information. Also, try not to use red and green in writing text – with color blindness, a person most often does not distinguish between them.

Rule # 10. Don t use flashing text

Flashing or flickering text can trigger an attack in sensitive individuals. In addition, such text is more likely to cause irritation than interest for most users.

Conclusion

Typography is very important. The correct design of the site will bring a sense of freshness and completeness to it. Conversely, misusing typography will only confuse your users. Design your sites to be readable, understandable, and legible.

The challenge of typography is
emphasize content favorably

…

Typography should emphasize content in a beneficial way, without creating additional cognitive load for the user.

Source: contented