1. Jun 2022Design

Good typography is invisible: how to improve readability

The term readability in Slovak includes font and text attributes, which in English can be conveniently distinguished by two terms - legibility and readability. These two terms may seem to mean the same thing, and people really do confuse them, but they do describe two different things.

Aneta StašikováProduct Designer

Legibility describes the reader's ability to recognize and distinguish individual characters - so it is the readability of the font.

Readability describes how comfortable, fast and efficient reading itself is. This can be influenced by the choice of font, its size, color, typographic adjustment - so it is the readability of the text.

Whether it's font readability or text readability, the following lines will help you get the best results.

Character distinguishability

Serif fonts usually have sufficiently distinguishable characters due to serifs, but in the case of sans-serif fonts this can be a problem that can significantly affect readability. The test is used to quickly check the resolution of characters: Il1 (Ivona losos 1). If all characters are easily distinguishable, readability should not be an issue.

Openness of character shapes

When reading the text, we perceive not only the characters, but also the space around them and inside them. Fonts whose characters are more open are easier for the human eye to read.

Character contrast

Contrast, or even shading, is the difference in the thickness of the strokes within the character, most often between the vertical and horizontal strokes. Character contrast defines the position of the font on the readability / appearance scale.

Low or neutral contrast is better for reading long text (so-called body text), because the text has a calmer texture, which is less tiring for the reader's eye. . On the other hand, high contrast is more expressive and requires attention, it creates emotions and is therefore especially suitable for headlines.

Lowercase vs. Uppercase

Let's look at how people read first. People don't read character by character, but they scan the whole line with their eyes, they perceive individual words as complex symbols with a certain shape. Thanks to the shape variability of lowercases, especially their upper and lower draw, each word has a unique shape. The words in uppercase letters act as monolithic blocks. That's why lowercase is easier to read.

The difference between reading uppercase and lowercase words

‍

Line length

Surveys show that the ideal length should be between 40-60 characters per line. When reading short lines, the reader has to go from the end to the beginning of the line too often and quickly, which can be tiring. In contrast, if the lines are too long, the reader may get lost on the way from the end to the beginning of the next line.

Paragraph alignment

For better readability, it is advisable to align the paragraph to the left. This avoids creating large spaces between words (so-called rivers), which disrupt the visual rhythm of the text and impair readability.

Letter spacing

The space between the individual characters of the words has a great influence on the readability of the text. Generally, the smaller the font size, the larger the space between the characters. We must also take into account the font type, line size, font color, background or whether the text is written in lower case or capital letters. However, uppercase letters usually require larger spaces.

Kerning

Kerning is an optical correction of the inter-character space for specific pairs of characters, the most common pairs are, for example, VA, LT or KO. Every professional font should contain a kerning created directly by its designer, so the font user does not have to deal with it at all. If the font does not contain kerning, it is possible in graphics applications to select the option to adjust the kerning automatically using the optical kerning option, or to set it manually.

Line height

Line height is the distance between the lines of consecutive lines. The recommended line spacing for body text is 120 - 160% of the font size.

The smaller the font size, the larger the line spacing should be - the smaller the font will have more space and will be easier to read.

Vertical rhythm

Row height is closely related to the concept of vertical rhythm. Vertical rhythm is the maintenance of consistency of vertical gaps between individual elements. This applies not only to the text, but to all objects on the page.

In a digital environment, we can often encounter the expression of font size in px, ie pixels. However, it is necessary to distinguish between a physical pixel, which represents the physical display point in the display, and a logical pixel, which represents the displayed display point, independent of the number of physical pixels that actually display it. The logical pixel is defined as 1/96 inch (ie 3 pt represents 4 px), and we use this as a px in CSS.

‍

Typographic triangle

It was created by typographer and web designer Matej Latin to create the perfect paragraph. It shows an equilateral triangle, which is a perfect picture of how line height, line length and font size should work in visual harmony. We recommend that you play this game, in which you test your feelings for these three attributes. :)