Typography
Sizes
Text sizes follow a fluid scale, meaning that text scales based on the size of the viewport and follows a sizing ratio.
Base (min: 16px / max: 16px)
Size 0 (min: 12px / max: 14px)
Size 1 (min: 16px / max: 18px)
Size 2 (min: 18px / max: 20px)
Size 3 (min: 20px / max: 28px)
Size 4 (min: 24px / max: 36px)
Size 5 (min: 28px / max: 48px)
Size 6 (min: 36px / max: 60px)
Usage
| Utility Class | Sass function |
|---|---|
.text-base
|
get-size('base') |
.text-size-0
|
get-size('size-0') |
.text-size-1
|
get-size('size-1') |
.text-size-2
|
get-size('size-2') |
.text-size-3
|
get-size('size-3') |
.text-size-4
|
get-size('size-4') |
.text-size-5
|
get-size('size-5') |
.text-size-6
|
get-size('size-6') |
Fonts
Base
System fonts - main content.
Brand
Google Sans - headings.
Mono
Code samples etc.
Usage
| Utility Class | Sass mixin |
|---|---|
.font-base
|
@include apply-utility('font', 'base') |
.font-brand
|
@include apply-utility('font', 'brand') |
.font-mono
|
@include apply-utility('font', 'mono') |