Typography
This section provides a detailed overview of the typography design tokens used to define typographic properties within the Riverty design system.
These tokens control the font family, font size, font weight, and line height across various devices and contexts, ensuring a consistent and accessible experience for users.
Font Family
The font family defines the typeface used for different text elements, such as headings and body text. The Riverty design system includes specific tokens for setting font families.
| Token | Value | Example |
|---|---|---|
--r-font-family-heading | "GT Ultra Median", Skeena, ui-serif, serif | The quick brown fox jumps over the lazy dog. |
--r-font-family-text | 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
Font size tokens are available for both desktop and mobile devices to ensure optimal text scaling across different screen sizes. The tokens below represent sizes for desktop, while mobile-specific sizes can be referenced as needed.
| Token | Value | Example |
|---|---|---|
--r-font-size-900 | 56px | The quick brown fox jumps over the lazy dog. |
--r-font-size-800 | 46px | The quick brown fox jumps over the lazy dog. |
--r-font-size-700 | 36px | The quick brown fox jumps over the lazy dog. |
--r-font-size-600 | 28px | The quick brown fox jumps over the lazy dog. |
--r-font-size-500 | 22px | The quick brown fox jumps over the lazy dog. |
--r-font-size-400 | 16px | The quick brown fox jumps over the lazy dog. |
--r-font-size-300 | 14px | The quick brown fox jumps over the lazy dog. |
--r-font-size-200 | 13px | The quick brown fox jumps over the lazy dog. |
| Token | Value | Example |
|---|---|---|
--r-font-size-900 | 42px | The quick brown fox jumps over the lazy dog. |
--r-font-size-800 | 30px | The quick brown fox jumps over the lazy dog. |
--r-font-size-700 | 28px | The quick brown fox jumps over the lazy dog. |
--r-font-size-600 | 24px | The quick brown fox jumps over the lazy dog. |
--r-font-size-500 | 20px | The quick brown fox jumps over the lazy dog. |
--r-font-size-400 | 16px | The quick brown fox jumps over the lazy dog. |
--r-font-size-300 | 14px | The quick brown fox jumps over the lazy dog. |
--r-font-size-200 | 13px | The quick brown fox jumps over the lazy dog. |
Font Weight
Font weight tokens are used to define the thickness of the text, allowing for different levels of emphasis or hierarchy within the content.
| Token | Value | Example |
|---|---|---|
--r-font-weight-semibold | 600 | The sly black cat jumps over the lazy dog. |
--r-font-weight-regular | 400 | The sly black cat jumps over the lazy dog. |
--r-font-weight-light | 300 | The sly black cat jumps over the lazy dog. |
Line Height
Line height affects the readability and spacing of text blocks. The Riverty design system recommends a line length between 50-80 characters for body text to ensure accessibility and comfort for readers.
| Token | Value | Example |
|---|---|---|
--r-line-height-xs | 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, ... |
--r-line-height-s | 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, ... |
--r-line-height-m | 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, ... |
--r-line-height-l | 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, ... |
Best Practices
- Font Scaling: Ensure that font sizes adjust dynamically across devices by utilizing mobile-specific tokens where appropriate.
- Line Length: Keep line lengths within the recommended 50-80 characters for body text to enhance readability.
- Font Weights: Use font weights strategically to create a clear visual hierarchy, highlighting key information and maintaining a balance between headings and body text.
This structured typographic system ensures that content is accessible, readable, and visually aligned with the Riverty brand identity across all platforms.