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.