Typography

Font stacks

You can control the typeface of text using the font family utilities.

Font-sans

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

Type weights

Satoshi Light

Satoshi Regular

Satoshi Medium

Satoshi Bold

Satoshi Black

Satoshi Light Italic

Satoshi Regular Italic

Satoshi Medium Italic

Satoshi Bold Italic

Satoshi Black Italic

Font-mono

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

Type weights

SF Mono Regular

SF Mono Bold

SF Mono Reg. Italic

SF Mono Bold Italic

Get access to our font pack in the downloads section.

Font

Use these transforms to set the font weight:

Example

Variant

Transform

Aa

Satoshi Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'

Variant:

Light

Transform:

isLight

<H4 isLight>Aa</H4>

Aa

Satoshi Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'

Variant:

default

Transform:

None (default)

<H4>Aa</H4>

Aa

Satoshi Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'

Variant:

Medium

Transform:

isMedium

<H4 isMedium>Aa</H4>

Aa

Satoshi Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'

Variant:

Bold

Transform:

isBold

<H4 isBold>Aa</H4>

Aa

Satoshi Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'

Variant:

ExtraBold

Transform:

isExtraBold

<H4 isExtraBold>Aa</H4>

Aa

Satoshi Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'

Variant:

Heavy

Transform:

isHeavy

<H4 isHeavy>Aa</H4>