Typography

Main application part that communicates with the user. We sort the information from big to small.

Simplify navigation

Build the hierarchy to allow the user to navigate and consume content with ease.

Do
Use font size and weight to emphasise hierarchy.
Don't
No emphasis, hard to navigate through the content.

Help them read your copy

Readable font size is imperative. Recommended size for reading is 16-17pt. Altough it may vary according to the font and device type.

Do
Readable without extra effort.
Don't
Small font, probably hard to read.

Font size: line height = 1:1.5

Font line height is proportional to its size. Recommended ratio for the paragraph is 1:1.5. Exception: headlines that need smaller height line, the ratio is approximately at 1:1.24.

Don't
Too tight
Do
Balanced 1:1.5 line spacing
Don't
Too wide

40-60 characters line length

It is good to keep the text line length around 40-60 characters. In areas with broader line lengt paragraphs may contain up to 120 characters. In this case, you need bigger line spacing.

20-40 characters when lines are shorter.

Don’t brake the rectangle

Text blocks must contain an optimal number of lines and balanced width. Imagine that you put the heading and text inside a rectangle.

Don't
Paragraphs are too wide compared to headline. Line length rule is not respected.
Do
Proper line length makes the paragraph look pulled together.
Don't
Don’t make the headlines too long. They take much space and are hard to read.
Do
Limit the line length for headlines. Perfect headline length is 6 words or less. Try to keep the main thing the main thing.