Typography
Typography can help create clear hierarchies, conveys the appropriate sentiment to assist our users through each stage of their journey.
Typefaces
Wave is using IBM Plex Sans as its typeface for all text — headings, subheadings, and body text.
Headings scale#
Heading Giga
Type
gigaFont
'IBM Plex Sans'Size
51pxLine height
72px1.411765
Heading Alpha
Type
alphaFont
'IBM Plex Sans'Size
38pxLine height
48px1.263158
Heading Beta
Type
betaFont
'IBM Plex Sans'Size
28pxLine height
48px1.714286
Heading Gamma
Type
gammaFont
'IBM Plex Sans'Size
21pxLine height
32px1.52381
Heading Delta
Type
deltaFont
'IBM Plex Sans'Size
19pxLine height
24px1.263158
Heading Epsilon
Type
epsilonFont
'IBM Plex Sans'Size
16pxLine height
24px1.5
Heading Zeta
Type
zetaFont
'IBM Plex Sans'Size
14pxLine height
24px1.714286
Body text sizes#
Body Epsilon
Type
epsilonFont
'IBM Plex Sans'Size
16pxLine height
24px1.5rem
Body Zeta
Type
zetaFont
'IBM Plex Sans'Size
14pxLine height
20px1.25rem
Body Eta
Type
etaFont
'IBM Plex Sans'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: