Typography

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

  • Avoid writing all capitalized text as it can be harder to read and be considered as acronyms by assistive technologies
  • Avoid abbreviations as they could be not understood by non-English-native users. And don't use <abbr> elements as it's poorly accessible.
  • Don't vary font weight depending on 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