Typography
Design tokens are used to define each typographic property.
Font family
| Token | Value | Example |
|---|---|---|
| "GT Ultra Median", Skeena, ui-serif, serif | The quick brown fox jumps over the lazy dog. |
| system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif | A joyful zebra quickly sprints across the field, leaping over a lazy kangaroo. |
Font size
| Token | Value | Example |
|---|---|---|
| 3.5rem | The quick brown fox jumps over the lazy dog. |
| 2.875rem | The quick brown fox jumps over the lazy dog. |
| 2.25rem | The quick brown fox jumps over the lazy dog. |
| 1.75rem | The quick brown fox jumps over the lazy dog. |
| 1.375rem | The quick brown fox jumps over the lazy dog. |
| 1rem | The quick brown fox jumps over the lazy dog. |
| 0.875rem | The quick brown fox jumps over the lazy dog. |
| 0.8125rem | The quick brown fox jumps over the lazy dog. |
| Token | Value | Example |
|---|---|---|
| 2.625rem | The quick brown fox jumps over the lazy dog. |
| 1.875rem | The quick brown fox jumps over the lazy dog. |
| 1.75rem | The quick brown fox jumps over the lazy dog. |
| 1.5rem | The quick brown fox jumps over the lazy dog. |
| 1.25rem | The quick brown fox jumps over the lazy dog. |
| 1rem | The quick brown fox jumps over the lazy dog. |
| 0.875rem | The quick brown fox jumps over the lazy dog. |
| 0.8125rem | The quick brown fox jumps over the lazy dog. |
Font-weight
| Token | Value | Example |
|---|---|---|
| 600 | The sly black cat jumps over the lazy dog. |
| 400 | The sly black cat jumps over the lazy dog. |
| 300 | The sly black cat jumps over the lazy dog. |
Line Height
The line length affects the readability of a text. In order to be comfortable and accessible to all users we recommend to use a line lenght between 50-80 characters, including spaces, for body texts.
| Token | Value | Example |
|---|---|---|
| 1.1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia lacinia est ut elementum. Aenean dignissim augue non nulla rutrum volutpat. Vestibulum semper gravida nunc, sed interdum ligula sodales at. Pellentesque ut urna mattis, consequat lorem sed, viverra neque. Nulla eros ante, ... |
| 1.2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia lacinia est ut elementum. Aenean dignissim augue non nulla rutrum volutpat. Vestibulum semper gravida nunc, sed interdum ligula sodales at. Pellentesque ut urna mattis, consequat lorem sed, viverra neque. Nulla eros ante, ... |
| 1.5 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia lacinia est ut elementum. Aenean dignissim augue non nulla rutrum volutpat. Vestibulum semper gravida nunc, sed interdum ligula sodales at. Pellentesque ut urna mattis, consequat lorem sed, viverra neque. Nulla eros ante, ... |
| 1.7 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia lacinia est ut elementum. Aenean dignissim augue non nulla rutrum volutpat. Vestibulum semper gravida nunc, sed interdum ligula sodales at. Pellentesque ut urna mattis, consequat lorem sed, viverra neque. Nulla eros ante, ... |