Typography
CSS variables and their values for text presentation.
Interface typography
For use in UI elements, like buttons, lists, tables, etc. This typography does not include vertical spacing or change size based on container size.
Token | Font | Size (default) | Weight | Line height |
|---|---|---|---|---|
cv-typography-body1 | Inter | 16px | 400 | 24px |
cv-typography-body2 | Inter | 14px | 400 | 20px |
cv-typography-button | Inter | 14px | 500 | 16px |
cv-typography-caption | Inter | 12px | 400 | 16px |
cv-typography-code | Roboto Mono | 12px | 400 | 20px |
cv-typography-subtitle1 | Inter | 16px | 500 | 28px |
cv-typography-subtitle2 | Inter | 14px | 500 | 22px |
cv-typography-overline | Inter | 10px | 400 | 16px |
Headline styles
Token | Size (default) | Size (small) | Weight |
|---|---|---|---|
cv-typography-headline1 | 96px | 48px | 300 |
cv-typography-headline2 | 60px | 34px | 300 |
cv-typography-headline3 | 48px | 24px | 400 |
cv-typography-headline4 | 34px | 20px | 400 |
cv-typography-headline5 | 24px | 16px | 400 |
cv-typography-headline6 | 20px | 14px | 500 |
Article typography
For use in long-form content like articles, rather than in UI interface items like buttons or tables. These styles grow or shrink based on their container so that, for example, you have smaller text on a phone where large headers don't make sense.
Token | Size (default) | Size (small) | Weight |
|---|---|---|---|
cv-typography-headline1-article | 48px | 24px | 400 |
cv-typography-headline2-article | 34px | 20px | 400 |
cv-typography-headline3-article | 24px | 16px | 400 |
cv-typography-headline4-article | 20px | 14px | 500 |
cv-typography-headline5-article | 16px | 14px | 500 |
cv-typography-headline6-article | 14px | 12px | 500 |