Typography
Inter type scale, line heights and weights.
Typeface
Inter, loaded only on the design system pages. Code samples use the system monospace font, so nothing extra downloads.
Inter is made for screens and stays readable at small sizes. It's open source and has tabular numerals, so figures line up in tables.
Type scale
Body text is 14/20. Sizes from 20 up are headings and have tighter line heights.
| Sample | Size / line height | Token |
|---|---|---|
| Quarterly risk summary | 11px / 16px | text-ds-11 |
| Quarterly risk summary | 12px / 16px | text-ds-12 |
| Quarterly risk summary | 13px / 18px | text-ds-13 |
| Quarterly risk summary | 14px / 20px | text-ds-14 |
| Quarterly risk summary | 16px / 24px | text-ds-16 |
| Quarterly risk summary | 18px / 24px | text-ds-18 |
| Quarterly risk summary | 20px / 26px | text-ds-20 |
| Quarterly risk summary | 24px / 30px | text-ds-24 |
| Quarterly risk summary | 32px / 38px | text-ds-32 |
Weights
| Sample | Weight | Token |
|---|---|---|
| Quarterly risk summary | 400 (Regular) | font-ds-400 |
| Quarterly risk summary | 500 (Medium) | font-ds-500 |
| Quarterly risk summary | 600 (Semibold) | font-ds-600 |
Numbers in data
Use tabular numerals for numbers that line up in columns. Each digit then has the same width. Add the tabular-nums class.
| Proportional | Tabular |
|---|---|
| 1,111.11 | 1,111.11 |
| 8,888.88 | 8,888.88 |
Guidance
Body text is 14/20, regular. Field labels are 13. Badges and captions are 12, and 11 is only for the AI label. Use 16 for longer reading, 18 and 20 for section headings, and 32 for page titles. Weights: 400 for text, 500 for labels and buttons, 600 for headings.