Typography is a crucial foundation of user interface design. Consistent typography ensures readability, hierarchy, and a polished look for your product. There are 3 components to display text:

Heading is used for titles and subtitles.
Text is used for body copy.
CustomText is used for unique text styles not covered by the previous components.

These components are designed to maintain visual consistency throughout the suite of apps. Heading and Text offer a set of semantic variants to convey meaning and hierarchy, while CustomText is a flexible component that can be used to create any kind of text style. Make sure to refer to the UX Writing guidelines when writing text for your product.

Our typography documentation can also be found in the Figma library

Type Scale

The type scale is designed to address most UI scenarios. Include only what’s relevant to your design. Avoid incorporating all levels on a single page.

Headings

Style	Variant	Usage
Heading 1	`heading-1`	Exclusively for page titles. It should only appear once on each page
Heading 2	`heading-2`	Typically used for headings or main section titles that group and introduce a set of related information. It can also be used for mid-emphasis numbers, numbers in card/tile
Heading 3	`heading-3`	Commonly used for subsection titles or to break down information within larger sections
Heading 4	`heading-4`	Sub-level heading style, offering further subdivision and organization, particularly when dealing with dense content

Body text

Style	Variant	Usage
Display 1	`display-1`	Use this style for critical numerical data, such as currency values and share counts. Avoid using this style repeatedly
Display 2	`display-2`	This style is for secondary critical numbers
Body 1	`body-1`	Use for small tile/card titles, such as FAQ card titles and banner titles. It is not intended for use within paragraphs
Body 2	`body-2`	Use this style to highlight key information within the body text
Body 3	`body-3`	Primary text style for paragraphs and descriptions
Small 1	`small-1`	Used for bubbles and tags
Small 2	`small-2`	Use this style for smaller, supportive/helper text that accompanies primary content, such as captions, labels, copyright, or chart legends

Best Practices

Casing

Headings should use title case (see exception on UX Writing guidelines)
Body and small text should use sentence case
Display text should use title case when applicable

Line length

For legibility, to avoid narrow or wide paragraphs, the advised minimum width is 220px, and 927px for the maximum width.

Color

Headings don't use color to convey meaning. However, some body text variants offer semantic color options.

Type Pairing

Heading 1

Heading 2

We want you to be empowered when raising a new round of financing. Use our aggregated market data on early-stage companies to better understand what post-money valuation you should be raising. To begin, use the filters below to customize the view to fit your needs. (Body 3)

Small

Utilize the appropriate type level to establish a clear hierarchy.

Don't

Avoid using Small 1 & 2 as headings.

Heading 1

Heading 2

Utilize the appropriate type level to establish a clear hierarchy.

Small

Don't

Avoid using Small 1 & 2 as headings.

Monospace typographical treatment

Monospace

A monospace typographical treatment comes in handy when dealing with IDs, tokens, unique identifiers, 2FA codes, and other computer-like pieces of text that are not strictly speaking computer code, but are similar. In the example below, notice the following:

“User ID” is a sequence of 8 numbers. Numbers are tabular by default when within tables, thus no additional type treatment is required. It remains as pure text.
“Commit hash” is an 8-character long sequence of letters and numbers, and benefits from a monospaced typographical treatment, so that its width remains the same regardless of which characters are included in the code.
“Access token” is a very long sequence of numbers separated by commas, but without spaces. It needs monospace treatment to allow for text to wrap.

User ID	Commit hash	Name and access token	Email
12345678	mm08g5p0	Luca Cantini 12345678,12345678,12345678,12345678,12345678	luca.awards(AT)hacker.com
98765432	i8fds913	Gilmar Lira 12345678,12345678,12345678,12345678,12345678	g(AT)grumpy.gg

Accessibility Standards

There are legal standards (such as Section 508 of the U.S. Rehabilitation Act) which apply to typography.
The WWW Consortium maintains the Web Content Accessibility Guidelines (WCAG) which provide a more web-specific guidance for ensuring products are accessible to more people.

Some, but not all, of the WCAG sections related to typography are: