Typography tokens
Typography tokens are used to maintain a consistent set of font styles throughout your app.
Font family
The default font family is the system font family of the user's device. This is the most performant and is generally a font family of high quality. This way, the text looks native to the user. Using the system font family is recommended in most situations unless the branding requires a specific font for the body text.
| Token | Value | Example |
|---|---|---|
--gr-font-family |
-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | The quick brown fox jumps over the lazy dog. |
Font size
| Token | Value | Example |
|---|---|---|
--gr-font-size-xx-small |
0.625rem (10px) | Aa |
--gr-font-size-x-small |
0.75rem (12px) | Aa |
--gr-font-size-small |
0.875rem (14px) | Aa |
--gr-font-size-medium |
1rem (16px) | Aa |
--gr-font-size-large |
1.25rem (20px) | Aa |
--gr-font-size-x-large |
1.5rem (24px) | Aa |
--gr-font-size-xx-large |
2.25rem (36px) | Aa |
--gr-font-size-xxx-large |
3rem (48px) | Aa |
--gr-font-size-xxxx-large |
4.5rem (72px) | Aa |
Font weight
| Token | Value | Example |
|---|---|---|
--gr-font-weight-thin |
100 | The quick brown fox jumps over the lazy dog. |
--gr-font-weight-extra-light |
200 | The quick brown fox jumps over the lazy dog. |
--gr-font-weight-light |
300 | The quick brown fox jumps over the lazy dog. |
--gr-font-weight-normal |
400 | The quick brown fox jumps over the lazy dog. |
--gr-font-weight-medium |
500 | The quick brown fox jumps over the lazy dog. |
--gr-font-weight-semi-bold |
600 | The quick brown fox jumps over the lazy dog. |
--gr-font-weight-bold |
700 | The quick brown fox jumps over the lazy dog. |
--gr-font-weight-extra-bold |
800 | The quick brown fox jumps over the lazy dog. |
--gr-font-weight-black |
900 | The quick brown fox jumps over the lazy dog. |
Letter spacing
Also called "tracking".
| Token | Value | Example |
|---|---|---|
--gr-letter-spacing-dense |
-0.015em | The quick brown fox jumps over the lazy dog. |
--gr-letter-spacing-normal |
normal | The quick brown fox jumps over the lazy dog. |
--gr-letter-spacing-loose |
0.075em | The quick brown fox jumps over the lazy dog. |
Line height
Also called "leading".
| Token | Value | Example |
|---|---|---|
--gr-line-height-dense |
1.4 | The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. |
--gr-line-height-normal |
1.8 | The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. |
--gr-line-height-loose |
2.2 | The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. |