Font Stack
We use native fonts for all in-product experiences. This ensures that our interface has a high performance and great legibility across all operating systems.
Sans Serif
We use the default sans-serif system font for most text. You can apply it by using the font-body class.
| OS | Font Family |
|---|---|
| Windows | Segoe UI |
| MacOS | SF Pro Text SF Pro Display |
| Chrome OS | Roboto |
| Ubuntu | Ubuntu |
Monospace
We use monospace font to display code. You can apply it by using the font-mono class.
| OS | Font Family |
|---|---|
| Windows | Segoe UI Mono Consolas Courier |
| MacOS | SF Mono Regular SF Mono Menlo |
| Chrome OS | Roboto Mono |
| Ubuntu | Ubuntu Monospace |
Usage
Default Attributes
We use the following default attributes for all texts in the product:
| Attributes | Class | Value |
|---|---|---|
| Font-family | font-body | system-ui |
| Font-size | text-sm | 14px |
| Font-weight | font-normal | 400 |
| Line-height | leading-normal | 150% |
Font Family
The default font-family within the product is font-body. We use font-mono to display code.
This is the system-ui font
This is the monospace font
<p class="font-body">This is the system-ui font</p>
<p class="font-mono">This is the monospace font</p>Font size
The default font-size within the product is text-sm. For headings we use our custom c-heading component, see here.
This is text-2xl
This is text-xl
This is text-lg
This is text-base
This is text-sm
This is text-ms
This is text-xs
<p class="text-2xl">This is text-2xl</p>
<p class="text-xl">This is text-xl</p>
<p class="text-lg">This is text-lg</p>
<p class="text-base">This is text-base</p>
<p class="text-sm">This is text-sm</p>
<p class="text-ms">This is text-ms</p>
<p class="text-xs">This is text-xs</p>Font-weight
The default font-weight within the product is font-normal. For bold text we use font-semibold and font-bold, and in some rare occasions also font-medium.
This is normal text
This is medium text
This is semibold text
This is bold text
<p class="font-normal">This is normal text</p>
<p class="font-medium">This is medium text</p>
<p class="font-semibold">This is semibold text</p>
<p class="font-bold">This is bold text</p>