Typography Tokens
Typography is utilitarian in nature and the goal of it is to help create a clear visual hierarchy, enhance legibility along with emphasising consistency in brand identity through the user interface.
Font Family
The default font stack is designed to be simple and highly available on as many devices as possible.
| Token | Value | Example |
|---|---|---|
--hds-font-sans |
‘Inter’, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Segoe UI Symbol’ | The quick brown fox jumped over the lazy dog. |
--hds-font-serif |
Georgia, ‘Times New Roman’, serif | The quick brown fox jumped over the lazy dog. |
--hds-font-mono |
SFMono-Regular, Consolas, ‘Liberation Mono’, Menlo, monospace; | The quick brown fox jumped over the lazy dog. |
--hds-font-content |
‘Rubik’, sans-serif; | 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 15px font size.
| Token | Value | Example |
|---|---|---|
--hds-font-size-body-x-small |
0.6rem (9px) | Aa |
--hds-font-size-body-small |
0.8rem (12px) | Aa |
--hds-font-size-bodycopy |
0.933rem; (14px) | Aa |
--hds-font-size-base |
1rem; (15px) | Aa |
--hds-font-size-body-medium |
1.067rem (16px) | Aa |
--hds-font-size-body-large |
1.2rem (18px) | Aa |
--hds-font-size-body-x-large |
1.4rem (21px) | Aa |
--hds-font-size-body-2x-large |
1.6rem (24px) | Aa |
--hds-font-size-body-3x-large |
2rem (30px) | Aa |
--hds-font-size-body-4x-large |
2.533rem (38px) | 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-medium |
500 | The quick brown fox jumped over the lazy dog. |
--sl-font-weight-semibold |
600 | 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. |
HUB24 semantic classes
| --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.
| | 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.
| | 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.
| | 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.
| | 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.
|
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.