Typography

As one of the basic elements of the interface, using the default styles, size and colors help bring informations effectively and contribute at making a feeling of quality for the app.

  • Avoid write all capitalized text as it can be harder to read and be considered as accronyms by assistive technologies
  • Avoid abbreviations as it can non understand by non english-native users. And don't use <abbr> elements as it's poorly accessible.
  • Don't vary font weight depending of an actionable element's state (hover or focus) as it can produce unwanted text wrap and potentially even layout shift

Examples

Title Display

Title 1

Title 2

Title 3

Text large

Text body size

Text small

Text tiny