Typography
Typography can help create clear hierarchies, conveys the appropriate sentiment to assist our users through each stage of their journey.
Overview
Typefaces#
Wave is using two typefaces: FK Display and Source Sans Pro.
The first is used for all headings until the size 21, and the second is used for subheadings and body text.
Headings scale#
Heading Giga
Type
gigaFont
'FK Display'Size
51pxLine height
72px1.411765
Heading Alpha
Type
alphaFont
'FK Display'Size
38pxLine height
48px1.263158
Heading Beta
Type
betaFont
'FK Display'Size
28pxLine height
48px1.714286
Heading Gamma
Type
gammaFont
'FK Display'Size
21pxLine height
32px1.52381
Heading Delta
Type
deltaFont
'FK Display'Size
19pxLine height
24px1.263158
Heading Epsilon
Type
epsilonFont
'Source Sans Pro'Size
16pxLine height
24px1.5
Heading Zeta
Type
zetaFont
'Source Sans Pro'Size
14pxLine height
24px1.714286
Body text sizes#
Body Epsilon
Type
epsilonFont
'Source Sans Pro'Size
16pxLine height
24px1.5rem
Body Zeta
Type
zetaFont
'Source Sans Pro'Size
14pxLine height
20px1.25rem
Body Eta
Type
etaFont
'Source Sans Pro'Size
12pxLine height
18px1.125rem
Usage#
Wave provides a variety of tokens controlling the text content styles like font size, line height, etc. They are exposed through one of the following typography components: