Typeface
Sizes
Please use the naming for sizes from the first column. We are in the process of deprecating our naming from the second column to better align with the design team.
| size | size (deprecated) | font size rem | line height | font size px | line height px |
|---|---|---|---|---|---|
body-sm | small | 0.75rem | 1.5 | 12px | 18px |
body-md | medium | 0.875rem | 1.6 | 14px | 22px |
body-lg | large | 1.125rem | 1.45 | 18px | 26px |
heading-sm | xlarge | 1.5rem | 1.35 | 24px | 32px |
heading-md | xxlarge | 2rem | 1.2 | 32px | 38px |
heading-lg | xxxlarge | 3rem | 1.15 | 48px | 55px |
Weights
| name | value |
|---|---|
book | 400 |
bold | 700 |
Semantic variants
Most text use cases can be covered by a specific variant.
| variant | size | font weight | usage |
|---|---|---|---|
mainTitle | heading-md | medium | used for the main title in a view, this variant should be used only once per view |
title | body-lg | bold | used for titles |
body | body-md | book | used for body text |
Color
Use body color as default text color. Use bodyDimmed color to de-emphasize text.
Line length
To improve legability, limit paragraph lines to 50 characters. Use CSS ch unit: <Container maxWidth="50ch">.