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 |
Button
By default, the .btn class uses the following typography styles (14px, medium weight, 1.0 line-height).
| Name | Font family | Size | Line height | Letter spacing | Weight |
|---|---|---|---|---|---|
| button | Inter | 14 | 1.0 | 0 em | Medium |
Link
By default, the .btn.btn-link class uses the following typography styles (14px, regular weight, 1.4 line-height).
| Name | Font family | Size | Line height | Letter spacing | Weight |
|---|---|---|---|---|---|
| link-sm | Inter | 14 | 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.
Additional examples
The following examples are also used by our Playwright CSS property assertion tests.
Anchors
Default anchor link styling.
Visit the example link for more information.
Horizontal rule variants
Standard, disabled, dotted, and fancy dotted horizontal rules.
Inline divider
A flex-based divider with centred text.
Lead paragraph and code
Lead text and inline code element styling.
This is a lead paragraph with larger introductory text.
Inline code element within a paragraph.
Lists
Unordered, ordered, and definition list styling.
- Unordered list item one
- Unordered list item two
- Ordered list item one
- Ordered list item two
- Definition term
- Definition description for the term above.
Text direction
Right-to-left and left-to-right direction classes.
This text flows right-to-left.
This text flows left-to-right.