Foundation

Typography

Text styles from Figma and the tokens that define them.

Brand Fonts

Aa

Zilla Slab

Google Fonts

Bold
DownloadGoogle Fonts
Aa

Open Sans

Google Fonts

RegularMediumSemiBoldBold
DownloadGoogle Fonts

Heading

StylePropertiesTokenPreview
Hero Title
Zilla Slab
72px · Bold
Line height 110%
sg-font-size-12
The quick brown fox
H1
Zilla Slab
48px · Bold
Line height 120%
sg-font-size-11
The quick brown fox
H2
Zilla Slab
40px · Bold
Line height 120%
sg-font-size-10
The quick brown fox
H3
Zilla Slab
32px · Bold
Line height 120%
sg-font-size-8
The quick brown fox
H4
Zilla Slab
24px · Bold
Line height 120%
sg-font-size-6
The quick brown fox
H5
Zilla Slab
20px · Bold
Line height 120%
sg-font-size-5
The quick brown fox
H6
Zilla Slab
16px · Bold
Line height 120%
sg-font-size-3
The quick brown fox

Label

StylePropertiesTokenPreview
Active/Regular
Open Sans
16px · Bold
Line height 110%
sg-font-size-3
The quick brown fox
Default/Regular
Open Sans
16px · Medium
Line height 110%
sg-font-size-3
The quick brown fox
Active/Small
Open Sans
14px · Bold
Line height 110%
sg-font-size-2
The quick brown fox
Default/Small
Open Sans
14px · Medium
Line height 110%
sg-font-size-2
The quick brown fox
Tag
Open Sans
11px · SemiBold
Line height 110%
sg-font-size-0
The quick brown fox

Text

StylePropertiesTokenPreview
Large
Open Sans
18px · Regular
Line height 150%
sg-font-size-4
The quick brown fox
Link/Large
Open Sans
18px · SemiBold
Line height 150%
sg-font-size-4
The quick brown fox
Link/Regular
Open Sans
16px · SemiBold
Line height 150%
sg-font-size-3
The quick brown fox
Regular
Open Sans
16px · Regular
Line height 150%
sg-font-size-3
The quick brown fox
Link/Small
Open Sans
14px · SemiBold
Line height 150%
sg-font-size-2
The quick brown fox
Small
Open Sans
14px · Regular
Line height 150%
sg-font-size-2
The quick brown fox
Link/Tiny
Open Sans
12px · SemiBold
Line height 150%
sg-font-size-1
The quick brown fox
Tiny
Open Sans
12px · Regular
Line height 150%
sg-font-size-1
The quick brown fox

Typography primitives

TokenValuePreview
sg-font-size-01.1remAa
sg-font-size-11.2remAa
sg-font-size-21.4remAa
sg-font-size-31.6remAa
sg-font-size-41.8remAa
sg-font-size-52remAa
sg-font-size-62.4remAa
sg-font-size-72.8remAa
sg-font-size-83.2remAa
sg-font-size-93.6remAa
sg-font-size-104remAa
sg-font-size-114.8remAa
sg-font-size-127.2remAa
sg-font-weight-regular400Aa
sg-font-weight-medium500Aa
sg-font-weight-semibold600Aa
sg-font-weight-bold700Aa
sg-brand-font-copyOpen SansAa
sg-brand-font-displayzilla slabAa