Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Page Properties

Component type

n/a

Document status

Status
colourYellowGreen
titleIN REVIEWREADY

Design source (in Figma)

Typography tokens

Author

Julia Boyarshchikova (Deactivated)

Responsible

Julia Boyarshchikova (Deactivated)

...

Typography helps us create hierarchies, organize information, and guide our users through pages. The Typography component makes it easy to apply a default set of font weights and sizes within your website.

...

Anatomy

The text font family, sizing, everything is delivered through design tokens.

...

  • Right aligned, centered, justified text.

  • Break the words.

  • Leave short words hanging.

  • Include big indents on single lines.

  • Over extended words.

  • All caps are difficult to read, they make the reading speed slower than title or sentence case.

...

Accessibility

A few rules to follow for an accessible typography:

  • Color. Provide enough contrast between text and its background.

  • Font size. Use relative units to accommodate the user's settings.

  • Heading hierarchy. Don't skip heading levels. In order to solve this problem, you need to separate the semantics from the style.