Typeface
Sizes
| size | font size rem | line height | font size px | line height px |
|---|---|---|---|---|
small | 0.75rem | 1.5 | 12px | 18px |
medium | 0.875rem | 1.6 | 14px | 22px |
large | 1.125rem | 1.45 | 18px | 26px |
xlarge | 1.5rem | 1.35 | 24px | 32px |
xxlarge | 2rem | 1.2 | 32px | 38px |
xxxlarge | 3rem | 1.15 | 48px | 55px |
Weights
| name | value |
|---|---|
book | 400 |
medium | 500 |
bold | 700 |
black | 900 |
Semantic variants
Most of the text use cases can be covered by a specific variant.
| variant | size | fontWeight | usage
|-|-|-|-
| mainTitle | xxlarge | black | used for the main title in a view, this variant should be used only once per view
| title | large | bold | used for titles
| body | medium | normal | used for body text
Color
Use body color as default text color. Use bodyDimmed color to de-emphasize text.
Line length
To improme legability limit paragraph lines to 50 characters. Use CSS ch unit: <Container maxWidth="50ch">.