Overview

Our proportionate typographic scale offers an effective heading hierarchy. The use of bold weight has been limited to Headings and Buttons to help guide the experience.

We use a 16px base size with a 1.125 – Major Second modular scale, rounded to whole values. Here's a simplified view:

Related content

---

How to use

Headings

We use headings to separate sections of content. When introducing an important concept, we usually introduce a heading to let people know the topic changes, which helps with readability, scannability, and accessibility.

Related content

Heading 1

Heading 1 is the largest text on the screen, reserved for the Top Navigation Bar, which acts as the page title describing the overall page content (coming soon).

There should only be one Heading 1 per page.

Headings 2, 3, 4, and 5

Afterward, you can organize the subsections using Heading 2, Heading 3, Heading 4, and Heading 5.

Since a web app differs from a traditional content page, we've decoupled the styles from their corresponding HTML heading elements to provide design flexibility. However, it is advisable to avoid skipping heading levels and follow a sequential hierarchical structure as much as possible. The more predictable your content structure is, the more likely people will find the information they want.

Ideally, every time you introduce a new topic, use a Heading 2. You can then divide the Heading 2 topic into subsections with Heading 3 level headings, and so on.

Kicker

A Kicker is an introduction to a heading that makes it easier to scan. It’s usually only a word or two, maybe slightly longer. It can also be used as a type of section heading in places where the space is compromised, like tables. It comes in uppercase to distinguish it from the rest of the headings.

Body text

The body sizes for content, come in three sizes that depend on their importance.

Related content

Lead

The lead content is larger than the default and summarizes or emphasizes the most significant points. They are typically used only at the beginning of the content.

Default

The standard body size for content.

Caption

Captions are smaller than the default and are rarely used alone. They give descriptive details or metadata following a more significant element.

Links

Following our Foundations first principle, we’ve decided to keep links underlined by default for usability and accessibility. Otherwise, link text must have at least 3:1 contrast with surrounding body text and present a non-color indicator (typically underline) on mouse hover and keyboard focus.

Text color

We use color following our purposeful, gentle, and inclusive principles adapted to the product context to reinforce hierarchy and guide the experience by highlighting the most relevant information.

Related content

These are the color tokens for text on the Default theme:

And on the Inverted theme:

---

Quality checklist

This element passes the following requirements described in our Component lifecycle.

---

Acknowledgments

1. Heading structure and accessibility