Typography Tokens
Typography tokens are used to maintain a consistent set of font styles throughout your app.
Typography tokens are a combination of font family, font size, font weight, letter spacing, and line height.
Font Family
The default font stack is designed to be simple and highly available on as many devices as possible.
| Token | Value | Example |
|---|---|---|
--dsds-font-sans | -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’ | The quick brown fox jumped over the lazy dog. |
--dsds-font-serif | Georgia, ‘Times New Roman’, serif | The quick brown fox jumped over the lazy dog. |
--dsds-font-mono | SFMono-Regular, Consolas, ‘Liberation Mono’, Menlo, monospace; | The quick brown fox jumped over the lazy dog. |
Font Size
Font sizes use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
| Token | Value | Example |
|---|---|---|
--dsds-font-size-2x-small | 0.625rem (10px) | Aa |
--dsds-font-size-x-small | 0.75rem (12px) | Aa |
--dsds-font-size-small | 0.875rem (14px) | Aa |
--dsds-font-size-medium | 1rem (16px) | Aa |
--dsds-font-size-large | 1.25rem (20px) | Aa |
--dsds-font-size-x-large | 1.5rem (24px) | Aa |
--dsds-font-size-2x-large | 2.25rem (36px) | Aa |
--dsds-font-size-3x-large | 3rem (48px) | Aa |
--dsds-font-size-4x-large | 4.5rem (72px) | Aa |
Font Weight
| Token | Value | Example |
|---|---|---|
--dsds-font-weight-light | 300 | The quick brown fox jumped over the lazy dog. |
--dsds-font-weight-normal | 400 | The quick brown fox jumped over the lazy dog. |
--dsds-font-weight-semibold | 500 | The quick brown fox jumped over the lazy dog. |
--dsds-font-weight-bold | 700 | The quick brown fox jumped over the lazy dog. |
Letter Spacing
| Token | Value | Example |
|---|---|---|
--dsds-letter-spacing-denser | -0.03em | The quick brown fox jumped over the lazy dog. |
--dsds-letter-spacing-dense | -0.015em | The quick brown fox jumped over the lazy dog. |
--dsds-letter-spacing-normal | normal | The quick brown fox jumped over the lazy dog. |
--dsds-letter-spacing-loose | 0.075em | The quick brown fox jumped over the lazy dog. |
--dsds-letter-spacing-looser | 0.15em | The quick brown fox jumped over the lazy dog. |
Line Height
| Token | Value | Example |
|---|---|---|
--dsds-line-height-denser | 1 | The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. |
--dsds-line-height-dense | 1.4 | The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. |
--dsds-line-height-normal | 1.8 | The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. |
--dsds-line-height-loose | 2.2 | The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. |
--dsds-line-height-looser | 2.6 | The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. |