Description
- The Typography component provides a consistent and flexible system for managing text styles across your design.
- It includes multiple heading and body text options to accommodate various content hierarchies.
- With theme support for large screens and small screens, and light and dark modes, this helps ensure readability and brand alignment across different contexts.
- For consistency and ease of use, the Typography component consumes global font tokens. See more information on using font tokens.
Anatomy
Heading
Paragraph
Text block
Saved data
Responsiveness
We offer 2 sets of font tokens: Static and Fluid.
- Static continues our traditional approach of having one typography set that does not scale across screen sizes. This set is still used by our existing products where responsive typography might break pre-existing layouts.
- Fluid is a responsive approach we want to move towards. Based on CSS clamp values that scale between different sized viewports, this approach:
- improves readability on smaller screens without overwhelming the layout
- maintains hierarchy and proportions across breakpoints
- scales flexibly without manually overriding styles
Read more about the fluid approach in our foundations documentation
Color mode
Light
Dark
Saved data examples
Used in tiles and cards, such as for displaying payment information
Used for general pages, such as invoice pages
Used for general pages, such as a client detail list preview
Text block examples
- You can use text blocks in message bubbles, release notes, or any other component or pattern that requires medium to long form text.
- It's an ideal component to use for text elements that require different levels of hierarchy.
AI insights bubble in Copilot
AI response bubble in Copilot
Release notes