Web Interface Handbook / Typography


01 Little tweaks and tricks

Nothing improves a design, like adding little details, accents, and variety to text and content in general. Fine work on the small pieces of the text makes your work incredible and eye-catching.

Little tweaks and tricks make the text appealing to read or scan.

02 Line spacing

Line spacing is the distance between the baseline of one line and the other line. The well-adjusted line spacing makes texts readable and scannable.

The proper line spacing affects the readability. If this value is too small or vice versa, too large, the text is difficult to read.

Properly chosen line spacing makes the text more readable.

Line spacing is measured relative to the font size as a percentage or number ratio. Usually, comfortable values for text are between 1.3 and 1.7. For headings from 1.1 to 1.4.

The value of line spacing is a specific ratio to the text size.

03 The choice of line spacing is a subjective

One of the proper choice factors is the subjective feeling of reading comfort. There are no strict rules in this aspect. Compare texts with different line spacing, read, and understand which value allows you to do it most comfortably.

Test and read texts with different line spacing to see which one is more comfortable.

04 The choice of line spacing depends on the font params

The higher the font's x-height, the more line spacing may be needed. For example, Source Sans Pro has a small x-height, while Libre Baskerville has a higher one.

Different fonts have different height characteristics.

For typefaces with high x-height, it is quite reasonable to increase the line spacing slightly for comfortable reading. And for fonts with low x-height, on the contrary, decrease it a little.

Depending on the font parameters, you may need to decrease or increase the line spacing.

05 The choice of line spacing depends on the line length

The shorter the line or column of text, the smaller the line spacing can be. If the short text in the narrow column has line spacing with a large value makes the lines fall off each other.

This is especially true for headings because of their boldness. And if the heading is two lines, then with a high line spacing the second string will always fall off and seem to belong to something else.

The value of line spacing depends solely on the length of the line and how long or short the text is. And for headings it also depends on boldness. And it doesn't depend on the size of the text at all.

06 Selecting line spacing for small text

The rules remain the same for small text. The choice of line spacing still depends on subjective feeling, font params, and line length. So there is no point in small text specially to reduce or increase the line spacing.

Different text size, but the same line spacing value.

Don't make it hard on yourself. You don't need to build complicated systems and line spacing dependencies on text size. Usually, it's just one value for any size.

07 Line length

Line length affects readability. As a rule, 60-80 characters per line is ideal for long texts with Latin letters (English, Spanish, for example).

Choosing the optimal line length increases readability.

The choice of line length depends on the content and how and what kind of information you want to give. The shorter the line length, the faster the information will be read. Conversely, a longer line implies thoughtful and relaxed reading.

The long line reads thoughtfully from beginning to end, the short line scans and reads quickly.

08 Line length and font size

The larger the font size, the longer the line length can be. Small text is less easy to read in a wide column. Conversely, the large text is readable even if the line is long enough.

The longer the line, the larger the font can be.

Headings have their own rules and have little to do with line length. The larger the heading size, the smaller the line spacing should be.

Headings have their own rules for line spacing and other parameters regardless of line length.

09 The first column must be larger than the second

If the last text column is more than the first, it always raises questions and looks strange. This arrangement of the text columns is not familiar, and the text looks jagged and inconsistent. It's still better to put the column with the longer text first.

This only works for text columns. It doesn't matter for other modules, like cards, or images blocks. If a photo with a low height is in the first column, that's fine.