Typography Tokens
Typography tokens are used to maintain a consistent set of font styles throughout your app.
Font Family
The default font stack is designed to be simple and highly available on as many devices as possible.
| Token | Value | Example |
|---|---|---|
--sl-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. |
--sl-font-serif |
Georgia, ‘Times New Roman’, serif | The quick brown fox jumped over the lazy dog. |
--sl-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 |
|---|---|---|
--sl-font-size-2x-small |
0.625rem (10px) | Aa |
--sl-font-size-x-small |
0.75rem (12px) | Aa |
--sl-font-size-small |
0.875rem (14px) | Aa |
--sl-font-size-medium |
1rem (16px) | Aa |
--sl-font-size-large |
1.25rem (20px) | Aa |
--sl-font-size-x-large |
1.5rem (24px) | Aa |
--sl-font-size-2x-large |
2.25rem (36px) | Aa |
--sl-font-size-3x-large |
3rem (48px) | Aa |
--sl-font-size-4x-large |
4.5rem (72px) | Aa |
Font Weight
| Token | Value | Example |
|---|---|---|
--sl-font-weight-light |
300 | The quick brown fox jumped over the lazy dog. |
--sl-font-weight-normal |
400 | The quick brown fox jumped over the lazy dog. |
--sl-font-weight-semibold |
500 | The quick brown fox jumped over the lazy dog. |
--sl-font-weight-bold |
700 | The quick brown fox jumped over the lazy dog. |
Letter Spacing
| Token | Value | Example |
|---|---|---|
--sl-letter-spacing-denser |
-0.03em | The quick brown fox jumped over the lazy dog. |
--sl-letter-spacing-dense |
-0.015em | The quick brown fox jumped over the lazy dog. |
--sl-letter-spacing-normal |
normal | The quick brown fox jumped over the lazy dog. |
--sl-letter-spacing-loose |
0.075em | The quick brown fox jumped over the lazy dog. |
--sl-letter-spacing-looser |
0.15em | The quick brown fox jumped over the lazy dog. |
Line Height
| Token | Value | Example |
|---|---|---|
--sl-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. |
--sl-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. |
--sl-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. |
--sl-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. |
--sl-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. |