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
Micro (value: 0.85)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Flat (value: 1)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Fine (value: 1.2)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Standard (value: 1.4)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Loose (value: 1.7)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
Usage
| Utility Class | CSS Custom Property |
|---|---|
.leading-micro
|
var(--leading-micro)
|
.leading-flat
|
var(--leading-flat)
|
.leading-fine
|
var(--leading-fine)
|
.leading-standard
|
var(--leading-standard)
|
.leading-loose
|
var(--leading-loose)
|
Weights
Regular (400)
Medium (500)
Bold (700)
Black (900)
Usage
| Utility Class | CSS Custom Property |
|---|---|
.font-regular
|
var(--font-regular)
|
.font-medium
|
var(--font-medium)
|
.font-bold
|
var(--font-bold)
|
.font-black
|
var(--font-black)
|
Fonts
Base
System fonts for body copy and globally set text - uses a sensible system font stack to make the site speedy - https://systemfontstack.com/
Heading
Font for headings
Mono
Monospace font for code samples etc
Usage
| Utility Class | CSS Custom Property |
|---|---|
.font-base
|
var(--font-base)
|
.font-heading
|
var(--font-heading)
|
.font-mono
|
var(--font-mono)
|