Typography

Our approach to managing text styles is to establish a predictable, scalable, and accessible typographic hierarchy across all products and platforms. We treat typography as a foundational design token.

We use Inter as our primary typeface for all web applications. Inter is a variable font, which means different weights (Regular, Medium, Semibold) are all contained within the same font file. The variable font file adapts to the weight specified in your CSS, providing optimal performance and flexibility.


Inter Variable Font Files:
Regular, Medium, Semibold - Inter-VariableFont.ttf
Italic - Inter-Italic-VariableFont.ttf

Headings

By default, <h1> uses .heading-xl, <h2> uses .heading-lg, <h3> uses .heading-md, and <h4> uses .heading-sm styles. You can override these by applying the heading classes directly (e.g., <h1 class="heading-sm">) or use them on any element for consistent typography.

Name Font family Size Line height Letter spacing Weight

heading-xl

 Inter 29 1.0 0 em Semibold

heading-lg

 Inter 20 1.2 0 em Semibold

heading-md

 Inter 16 1.2 0 em Semibold

heading-sm

 Inter 14 1.2 0 em Semibold

Body

By default, the <body> element uses .body-sm styles (14px, regular weight, 1.4 line-height). Use the classes .body-md, .body-sm, .body-sm-bold, and .body-xs for body text with consistent sizing and weight. These classes can be applied to any element including headings to override their default styles.

Name Font family Size Line height Letter spacing Weight

body-md

 Inter 16 1.4 0 em Regular

body-sm

 Inter 14 1.4 0 em Regular

body-sm-bold

 Inter 14 1.4 0 em Semibold

body-xs

 Inter 11 1.4 0 em Regular

Inline text elements

Styling for common inline HTML5 elements.

<mark></mark> You can use the mark tag to highlight text.

<del></del> This line of text is meant to have a line through it.

<s></s> This line of text is meant to have a line through it.

<ins></ins> This line of text is meant to be underlined.

<u></u> This line of text is meant to be underlined.

<small></small> This line of text is meant to be smaller (12px).

<strong></strong> This line of text is meant to be bold.

<em></em> This line of text is meant to be italic.