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 |
---|---|
regular | 400 |
medium | 500 |
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">
.