Typography
Sizes
Text sizes follow a fluid scale, meaning that text scales based on the size of the viewport and follows a sizing ratio.
Step 000 (min: 11.85px / max: 12.5px)
Step 00 (min: 13.33px / max: 15px)
Step 0 (min: 15px / max: 18px)
Step 1 (min: 16.88px / max: 21.6px)
Step 2 (min: 18.98px / max: 25.92px)
Step 3 (min: 21.36px / max: 31.1px)
Step 4 (min: 24.03px / max: 37.32px)
Step 5 (min: 27.03px / max: 44.79px)
Step 6 (min: 30.41px / max: 53.75px)
Step 7 (min: 34.21px / max: 64.5px)
Step 8 (min: 38.49px / max: 77.4px)
Step 9 (min: 43.3px / max: 92.88px)
Step 10 (min: 48.5px / max: 111.45px)
Step 11 (min: 60.62px / max: 167.17px)
Step 12 (min: 60.62px / max: 230px)
Usage
| Utility Class | CSS Custom Property |
|---|---|
.text-step-000
|
var(--size-step-000)
|
.text-step-00
|
var(--size-step-00)
|
.text-step-0
|
var(--size-step-0)
|
.text-step-1
|
var(--size-step-1)
|
.text-step-2
|
var(--size-step-2)
|
.text-step-3
|
var(--size-step-3)
|
.text-step-4
|
var(--size-step-4)
|
.text-step-5
|
var(--size-step-5)
|
.text-step-6
|
var(--size-step-6)
|
.text-step-7
|
var(--size-step-7)
|
.text-step-8
|
var(--size-step-8)
|
.text-step-9
|
var(--size-step-9)
|
.text-step-10
|
var(--size-step-10)
|
.text-step-11
|
var(--size-step-11)
|
.text-step-12
|
var(--size-step-12)
|
Leading (line height)
| Item | CSS Custom Property |
|---|---|
Micro
|
var(--leading-micro)
|
Flat
|
var(--leading-flat)
|
Fine
|
var(--leading-fine)
|
Standard
|
var(--leading-standard)
|
Loose
|
var(--leading-loose)
|
Weights
| Item | CSS Custom Property |
|---|---|
Regular
|
var(--font-regular)
|
Medium
|
var(--font-medium)
|
Bold
|
var(--font-bold)
|
Black
|
var(--font-black)
|
Fonts
| Item | CSS Custom Property |
|---|---|
Base
|
var(--font-base)
|
Mono
|
var(--font-mono)
|