Typography Tokens
Typography tokens are used to maintain a consistent set of font styles throughout your app.
Font Family
HDS provides three font families for consistent typography:
| Token | Value | Example |
|---|---|---|
--terra-font-family--inter |
‘Inter’, sans-serif | The quick brown fox jumped over the lazy dog. |
--terra-font-family--public-sans |
‘Public Sans’, sans-serif | The quick brown fox jumped over the lazy dog. |
--terra-font-family--dm-mono |
‘DM Mono’, 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 |
|---|---|---|
--terra-font-size-2x-small |
0.625rem (10px) | Aa |
--terra-font-size-x-small |
0.75rem (12px) | Aa |
--terra-font-size-small |
0.875rem (14px) | Aa |
--terra-font-size-medium |
1rem (16px) | Aa |
--terra-font-size-large |
1.25rem (20px) | Aa |
--terra-font-size-x-large |
1.5rem (24px) | Aa |
--terra-font-size-2x-large |
2.25rem (36px) | Aa |
--terra-font-size-3x-large |
3rem (48px) | Aa |
--terra-font-size-4x-large |
4.5rem (72px) | Aa |
Font Weight
| Token | Value | Example |
|---|---|---|
--terra-font-weight-light |
300 | The quick brown fox jumped over the lazy dog. |
--terra-font-weight-normal |
400 | The quick brown fox jumped over the lazy dog. |
--terra-font-weight-semibold |
600 | The quick brown fox jumped over the lazy dog. |
--terra-font-weight-bold |
700 | The quick brown fox jumped over the lazy dog. |
Letter Spacing
| Token | Value | Example |
|---|---|---|
--terra-letter-spacing-denser |
-0.03em | The quick brown fox jumped over the lazy dog. |
--terra-letter-spacing-dense |
-0.015em | The quick brown fox jumped over the lazy dog. |
--terra-letter-spacing-normal |
normal | The quick brown fox jumped over the lazy dog. |
--terra-letter-spacing-loose |
0.075em | The quick brown fox jumped over the lazy dog. |
--terra-letter-spacing-looser |
0.15em | The quick brown fox jumped over the lazy dog. |
Line Height
| Token | Value | Example |
|---|---|---|
--terra-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. |
--terra-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. |
--terra-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. |
--terra-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. |
--terra-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. |