Typography

Typefaces

Aa—Aa

Inter Display

Aa—Aa

Geist Mono

Aa—Aa

Sentient

Inter Display

This is our workhorse typeface we use across our website, Docs and web apps. Its clean geometric design and optimized display features make text highly legible at all sizes. This translates quite well to on-screen performance, where the content draws attention than the letterforms themselves.

Geist Mono

Being an API platform means a heavy reliance on code snippets, and reference documentation, where show outweighs tell. Geist Mono is designed by Vercel specifically for code editors and terminals, performing brilliantly at low font sizes, and at displaying dense hieroglyphic symbols that is code.

Sentient

We also needed a sombre typeface that reflected our discreet pragmatism when it comes to our long-term vision, but also wasn't about blind dogma. Hence, Sentient. A contemporary serif with enough personality to mirror us—both grave and just flippant enough at the same time.

Type scale

We employ a custom type scale to proportionally graduate the body and heading sizes. We start with a base font size of 0.96em for body font.

The heading sizes are calculated using a power function—



let rootSize       = 0.96
let multiplierBase = 1.18
    
// H1 = ~3.6em / ~56px 
rootSize * Math.pow(multiplierBase, 8)}em
    
// H2 = ~2.6em / ~40px
rootSize * Math.pow(multiplierBase, 6)}em
    
// H3 = ~1.86em / ~28.5px
rootSize * Math.pow(multiplierBase, 4)}em
    
// H4 = ~1.58em / ~24.2px
rootSize * Math.pow(multiplierBase, 3)}em
    
// H5 = ~1.33em / ~20.5px
rootSize * Math.pow(multiplierBase, 2)}em
    
// H6 = ~1.13em / ~17.3px
rootSize * Math.pow(multiplierBase, 1)}em
    
// Body text 0.96em / ~15.36px
rootSize

Using this calculation, the scale outputs —

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body text

Here, both rootSize and multiplierBase can be customised in the theme file.

Weights

To keep it simple, we use just two weights per typeface. Avoid Light, Thin and other variations lower than Regular on the weight scale.

Inter Display Regular 400
Inter Display SemiBold 600
Geist Mono Regular 400
Geist Mono Bold 600
Sentient Regular 400
Sentient Bold 600

Sizing

Keep the number of sized headings on any given page to a minimum. Try and avoid too many nested content sections.

H2
H4
Para

For most purposes, h2, h4 and p elements should suffice.