Typography
Averta, a limited size scale, two weights, and composed text styles that alias those primitives.
Primitive font tokens are shared. Text styles compose size, weight, and line height. Larger styles step up from mobile to desktop through the Responsiveness aliases.
Font family
| Token | CSS | Value |
|---|---|---|
font.family | --font-family | Averta |
Averta is the specified family. If the webfont is not installed, the site falls back to the loaded sans stack.
Weights
| Token | Value | Example |
|---|---|---|
font.weight.regular | 400 | regular |
font.weight.semi-bold | 600 | semi-bold |
Size scale
| Token | Value | Sample |
|---|---|---|
font.size.xs | 12px | Ag |
font.size.sm | 14px | Ag |
font.size.md | 16px | Ag |
font.size.lg | 18px | Ag |
font.size.xl | 20px | Ag |
font.size.2xl | 22px | Ag |
font.size.3xl | 24px | Ag |
font.size.4xl | 26px | Ag |
font.size.5xl | 28px | Ag |
font.size.6xl | 34px | Ag |
font.size.7xl | 42px | Ag |
font.size.8xl | 48px | Ag |
font.size.9xl | 62px | Ag |
font.size.10xl | 78px | Ag |
Line height
| Token | Value |
|---|---|
font.lineHeight.xs | 1 |
font.lineHeight.sm | 1.1 |
font.lineHeight.md | 1.15 |
font.lineHeight.lg | 1.25 |
font.lineHeight.xl | 1.35 |
font.lineHeight.2xl | 1.4 |
font.lineHeight.3xl | 1.5 |
Letter spacing is 0% on the source text styles. There is no separate letter-spacing token.
Composed styles
Each style uses primitive size, weight, and line-height tokens. Desktop sizes follow the Figma Responsiveness aliases.
Headings/Display-smsemi-bold · size 8xl / desktop 9xl · line-height md · letter-spacing 0%The quick brown fox jumps over the lazy dog.
Headings/H1semi-bold · size 6xl / desktop 7xl · line-height md · letter-spacing 0%The quick brown fox jumps over the lazy dog.
Headings/H2semi-bold · size 4xl / desktop 5xl · line-height lg · letter-spacing 0%The quick brown fox jumps over the lazy dog.
Headings/H3semi-bold · size 3xl / desktop 4xl · line-height lg · letter-spacing 0%The quick brown fox jumps over the lazy dog.
Body/body-lgregular · size md / desktop lg · line-height 2xl · letter-spacing 0%The quick brown fox jumps over the lazy dog.
Body/body-smregular · size sm / desktop md · line-height 2xl · letter-spacing 0%The quick brown fox jumps over the lazy dog.
Caption/caption-smregular · size xs / desktop xs · line-height 3xl · letter-spacing 0%The quick brown fox jumps over the lazy dog.