Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey.
To determine the size of the typography, we use a font scale. The font sizes fit well with the 4px grid. In order to preserve semantics, sizes are not directly matched with HTML tags.
Eyebrow headings are additional labels that can be used. Mostly used to support the main heading of a page or to provide additional context or orientation.
For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links.
Code text style is used for code snippets or inline code.
Eyebrow headings can be used to compliment headings or for subtle headers for lists.
We recommend the use of the Underline text style for inline links.
Use Underline text style for inline links as it guarantees link visibility when scanning text.
Do not use the Underline text style for text that is not linked. Underlines provide a strong perceived affordance of clickability, and users will be confused if underlined text doesn’t match this perception.