Versions Compared

Key

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

Introduction

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.

...

Usage

Do

  • Text usually is left aligned, but not for all languages.

  • In some cases you'll have to center or right aligned.

  • When setting left aligned typography it’s important to take care to balance the ragged edge of the text as effectively as possible. This improves legibility and the appearance of text.

  • Use the underline style to link text in the body to show when text is clickable.

Don’t do

  • 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:

...