6 tips for the correct use of typography on the web

This content is part of the Sitelicon editorial archive. It retains the information available on the date of publication; the conditions, tools and requirements of the platforms may have changed.

Context

The good use of typography when designing a web is fundamental. If the content is not readable or not properly structured, it is not for anything else. Reading text on a screen is often a more tedious task than reading on paper, so it is important to take care of this aspect. There are a number of rules that can help us to set up the texts of a web in a correct, fluid and attractive way.

• Large enough size

Not to the tiny font size! There was a time when we were trying to show a lot of information in the least possible space at all costs, especially to avoid scroll, but luckily, this should no longer be so. The font size must be large enough to be readable in a comfortable way on any screen. No matter how much space it takes.

In addition, it is good to establish a well-marked hierarchy, using the size to differentiate titles, subtitles, paragraphs, etc. Don’t be afraid to use large font sizes.

http: / / www.contrabase.com / wp-content / uploads / 2015 / 10 / typogratia02.jpg

• Interlining / blank spaces

Vertical space is almost as important or more than the font size. For the reading to be comfortable, it is important that the lines are not too close, but not too separate from each other. More or less, the interlining size of a paragraph should be 120-160% of the font size used. Smaller letter sizes need a proportionally larger interlining than larger letter sizes.

http: / / www.contrabase.com / wp-content / uploads / 2015 / 10 / typogratia03.jpg

• Contrast

A text with a background-like color may be difficult to read. A text with too much contrast may also be uncomfortable, especially in clear texts on dark backgrounds. It is necessary to establish an appropriate contrast to facilitate reading and to avoid problems of accessibility. In the face of doubt, it is best to go to the recommendations that give us the [W3C guides] (http: / / www.w3.org / TR / AERT # color-contrast http: / / www.w3.org / TR / WCAG20 / # visual-audio- contrast)

There are Internet tools that can help us confirm whether the color choice we have made meets the standards.

• Best short lines

About 65 characters per line is the measure that is considered ideal for a paragraph to be comfortable. Although we read faster if the lines are longer, we prefer short lines. This is subject to the text amount, the letter type and size, the device size, and other variables, but 65 characters is the average measure generally accepted to read comfortably on a computer screen. On mobile, the size of the lines is much smaller, and the 39 characters used in the narrow columns of the paper press have been accepted as standard average measure.

http: / / www.contrabase.com / wp-content / uploads / 2015 / 10 / typogratia04.jpg

• Do not use complete or focused justification

The right justification for a paragraph, except for exceptions, is not the centered or complete justification. In our culture, the sense of reading is left to right and the most comfortable thing is to find that each line always starts at the same point. The focused text, in long paragraphs, is therefore inadequate for its irregularity. In the texts with complete justification, the space between words is not consistent, we can find words lines very together and others with very separate words, therefore it is not comfortable for reading. The justification on the left is the most appropriate for texts on the Internet.

http: / / www.contrabase.com / wp-content / uploads / 2015 / 10 / typogratia05.jpg

• Typographic choice

It minimizes the number of different typographs on your web. One or two are enough. It is advisable to choose typographs designed for the web, current and optimized for reading on screen. There is a wide variety of typographs, it is important to choose the right one for each case: it is not the same a title as the body of an article. Do not abuse decorative typographs. It is also necessary to ensure that the chosen typography includes all the characters that we will need: numerals, symbols, the letter…

http: / / www.contrabase.com / wp-content / uploads / 2015 / 10 / typografia06.jpg

Conclusion

Typography is an element that must be taken care of a lot in order to make beautiful and harmonious designs, but above all, **[usable] (http: / / www.contrabase.com / diseno-web / diseneno-para-the-user /)**especially knowing that these designs are going to be seen from very different device screens, from desktop screens, to mobile phones. With this small guide it will be easier to know if the design of our texts is appropriate.