text styling

differet types of text separation

  1. linebreaks
  2. paragraphs
  3. blocks
  4. structure

linebreaks

Linebreaks should be controlled by the design framework and not the text structure.

Always check the text readability as one consecuetive block and adjust if necessary.

example 02

Acceptable solution without using linebreaks


example 01

Example how NOT to do it using linebreaks

paragraphs

Paragraphs are sopposed to be used sparingly.

They should emphasise, increase readability & improve text structure.

example 03

Compromise, in case the content demands this level of seperation

blocks

All of those examples are each in themselves a block.

They could be strung together consecutively with swapped colomn positions.

example 04

Separation example of indipendant blocks of content

structure

A good example for the right prioritisation of information are the product main text boxes. Here, precision and additional information always come after the main product text. One exception are Warning notifications that should always appear at the end of the main text.

example 05

Example structure of main product text hierarchy


example 05

Example structure of main product text WITH warning