Typography
Typography is a system of fonts used to provide a clear hierarchy, organize information, and to assist users during the product journey.
Headings
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.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
Heading level 7
<h1 class="heading-level-1">Heading level 1</h1>
<h2 class="heading-level-2">Heading level 2</h2>
<h3 class="heading-level-3">Heading level 3</h3>
<h4 class="heading-level-4">Heading level 4</h4>
<h5 class="heading-level-5">Heading level 5</h5>
<h6 class="heading-level-6">Heading level 6</h6>
<h6 class="heading-level-7">Heading level 7</h6>
Eyebrow Headings
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.
EYEBROW HEADING level 1
EYEBROW HEADING level 2
EYEBROW HEADING level 3
<h4 class="eyebrow-heading-1">EYEBROW HEADING level 1</h4>
<h5 class="eyebrow-heading-2">EYEBROW HEADING level 2</h5>
<h6 class="eyebrow-heading-3">EYEBROW HEADING level 3</h6>
Paragraphs
For body texts, there are two font sizes (14px, 16px) and two weights (400 and 600). Underline is mostly used for links.
Body text level 1 SemiBold
Body text level 1 Regular
Body text level 2 SemiBold
Body text level 2 Regular
Body text level 2 Underline
Link text Underline
<p class="u-bold">Body text level 1 SemiBold</p>
<p>Body text level 1 Regular</p>
<p class="u-bold">Body text level 2 SemiBold</p>
<p>Body text level 2 Regular</p>
<p style="text-decoration: underline">Body text level 2 Underline</p>
<a class="link">Link text Underline</a>
Code
Code text style is used for code snippets or inline code.
Code level 1
<code class="inline-code">Code level 1</code>
Best Practice
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.
Do
Use Underline text style for inline links as it guarantees link visibility when scanning text.
Don't
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.