Overview
Our typography presets help create a consistent visual hierarchy across products, making interfaces easy to scan and read. They are based on foundational typography tokens that define key properties, including:
- Font family: Specifies the typeface used across products. We use Inter for its clean and readable design.
- Font size: Determines the size of the text, scaled proportionally for each brand and product.
- Font weight: Controls the thickness of the characters, ranging from light to semi-bold.
- Line height: Sets the vertical spacing between lines of text to enhance readability.
- Letter spacing: Adjusts the horizontal space between characters for optical balance.
These foundational tokens are combined into single design tokens that form our presets, Title, Body, and Highlight, ready to use by product teams.
Typography presets
Each of our presets corresponds to a particular role in the UI, defined by the text’s purpose, length, and importance. From page-level titles to fine-print details, understanding when and how to use them helps create designs that are readable, accessible, and visually balanced.
Title
Titles define the primary headings and subheadings across the UI, creating a clear structure. They guide users by visually distinguishing sections and subsections with font size and weight variations.
Used for: Page titles, subtitles, sections, and headings in general.
|
Token |
Usage |
|---|---|
|
title.large-strong |
Main page titles. Should be assigned as h1. |
|
title.large |
Subtitles paired with the main title, also used in previous levels on Breadcrumbs. |
|
title.medium-strong |
Section titles within a page or layout. |
|
title.medium |
Supporting text below a section title. |
|
title.small-strong |
Subsection titles or less emphasis headings. |
|
title.small |
Supporting text for the title.small-strong. |
Best practices
- Use title.large-strong only once on a page, to represent the page title.
- Headings should always use the strong variant. Use regular variants alongside their corresponding strong variants to provide additional information, such as subtitles.
- Assign heading tags (<h1>, <h2>, etc.) appropriately for accessibility.
- Avoid overusing titles to maintain clear and meaningful emphasis on the page.
Body
Body text is the default preset used across components and screens. It is typically applied to paragraphs, articles, descriptions, labels, and other textual elements that convey information to users, ensuring a cohesive and user-friendly experience.
Used for: Paragraphs, descriptions, labels, supporting information.
|
Token |
Usage |
|---|---|
|
body.large |
Prominent or important descriptions (e.g., summary at the top of a screen). |
|
body.large-strong |
Composition titles, such as in Cards. Also used in the majority of buttons and large links. It can be used to add emphasis to important points in a paragraph. |
|
body.medium |
Default text style used in various scenarios. It appears in longer texts, such as paragraphs and descriptions, as well as components like form placeholders, helper text and dropdown items. |
|
body.medium-strong |
Used for component titles like Alerts and Modals, as well as for emphasized text, such as in Form labels and table columns. Also applies to small Buttons. |
|
body.small |
Composition subtitles, such as in Cards. Descriptions, less prominent information. |
|
body.small-strong |
Subsection titles or less emphasis headings. Also used in smaller components, such as Tooltips. |
|
body.extraSmall |
Used for less prominent content, like legal text. |
|
body.extraSmall-strong |
Used in smaller components, such as Badge, or to add emphasis paired with body.extraSmall. |
Best practices
- Use body.medium as the default for most paragraph content.
- Use body.strong sparingly to highlight important points or key concepts without overwhelming the reader.
- Avoid mixing too many weights and sizes in one paragraph to maintain readability.
- Consider localization needs, ensuring spacing works with longer text expansions.
Highlight
Highlighting text emphasizes important, brief pieces of information such as data points, pricing, or key messages.
Used for: Keywords, short text requiring emphasis, data numbers.
|
Token |
Usage |
|---|---|
|
highlight.large |
Highlights short values, such as numbers in dashboards. |
|
highlight.medium |
Similar to highlight.Large, but used for longer values or less prominent numbers, such as when numbers appear repeatedly in DataViz Cards. |
|
highlight.small |
For adding emphasis in smaller, like totals in lists. |
Best practices
- Use sparingly to maintain impact and prevent visual clutter.
- Ensure sufficient contrast with surrounding text for readability.
- Keep consistency in color and weight usage throughout the product.
- Don’t use Highlights presets as headings or titles.
Accessibility Considerations
- Always assign semantic HTML heading tags to support screen readers.
- Allow for text resizing without breaking the layout.