Typography
tip
These classes can be used on any element so feel free to mix and match!
Some elements have a selection of classes applied by default. See below for examples.
fonts​
The official futureproof fonts are avaliable through their own classes.
Note that the FK Screamer font should always be uppercased. The text-display class will handle this for you.
| name | used for | class | default on |
|---|---|---|---|
| FK Screamer | titles, accents | .text-display | h1, h2, h3 |
| Work Sans | body text, paragraphs | .text-body) | all other text |
| Work Sans Italic | internal facing content only | .italic) | - |
| SFMono Regular | code snippets | var(--ft-code) | - |
.text-display (FK Screamer)
.text-body (Work Sans)
.text-italic (Work Sans Italic)
<p class="text-display">.text-display (FK Screamer)</p>
<p class="text-body">.text-body (Work Sans)</p>
<p class="text-italic">.text-italic (Work Sans Italic)</p>
sizes​
Six preset font sizes are available through classes
<p class="huge">.huge</p>
<p class="xlarge">.xlarge</p>
<p class="large">.large</p>
<p class="medium">.medium</p>
<p class="small">.small</p>
<p class="tiny">.tiny</p>
weights​
3 preset font weights are available through classes
.regular
.bold
.xbold
<p class="regular">.regular</p>
<p class="bold">.bold</p>
<p class="xbold">.xbold</p>
h[*] defaults​
By default, h1, h2 & h3 elements are styled with the FK Screamer font and the huge, xlarge and large classes respectively.
By default, h4, h5 & h6 elements are styled with the Work Sans font with .xbold and the medium, small and tiny classes respectively.
This is a default h1
This is a default h2
This is a default h3
This is a default h3
This is a default h4
This is a default h5
<h1>This is a default h1</h1>
<h2>This is a default h2</h2>
<h3>This is a default h3</h3>
<h4>This is a default h3</h4>
<h5>This is a default h4</h5>
<h6>This is a default h5</h6>