Typography

Typography establishes visual hierarchy, improves scannability, and reinforces brand voice. Consistent application creates predictable reading patterns and supports accessibility across devices and user preferences.

Introduction

Follow these guidelines to create legible and visually balanced hierarchy for typography. Use in conjunction with our design system tokens for consistent and accessible experiences.

Brand fonts

Aperçu Std.

Aperçu Std. is our workhorse, used in headlines, product names, and all key messaging and body copy. It’s straightforward and easy to read.

Rooney

Rooney is used for sub-heads to provide visual texture. It has an authentic, conversational quality that integrates well with our logos.

Styles and Tokens

Text styles and typography tokens are made up of specific font values, including but limited to font family, font size, and line height.

Where text styles appear in design and Figma, typography tokens are used in code.

Incorporate our heading, body, label, and other typography tokens in all designs. Each includes pre-optimized line height and letter spacing scaled to its font size, and integrates seamlessly with our spacing and color foundations.

Building typography decisions into tokens ensures consistency today and enables full theme switching.

Hierarchy

Proper heading hierarchy is critical for both visual structure and accessibility. Screen readers and search engines rely on semantic heading order to understand content relationships.

Rules

• Use exactly one h1 per page — typically the page title or primary heading. Never use multiple h1s or apply it to subsections.
• Descend sequentially: h1 → h2 → h3 → h2. Do not skip levels (e.g., no jumping from h1 to h3).
• Use subheaders when you need lighter visual weight without advancing the semantic level (e.g., subheader 1 could be a visual alternative to h2 while keeping the underlying element as h3 or lower). Do not replace true headings entirely with subheaders.
• Never choose a heading style purely for size or appearance — always base it on document structure. Do not overuse lower levels for body emphasis or visual emphasis alone.

Type Scale

All styles use defined tokens for size, weight, line height, and letter spacing. Apply them directly — never create custom text styles.

Headers

Headers come in a range of sizes for different hierarchical levels:

• header 1 — primary page title or most prominent heading on a view.
• header 2 — major section headings needing strong visual separation.
• header 3 — subsection headings for organizing detailed content.
• header 4 — minor or tertiary headings in dense or compact layouts.

Subheaders

Subheaders provide lighter visual alternatives to semantic headers while preserving document structure:

• subheader 1 — major section headings with lighter visual weight.
• subheader 2 — subsection headings with lighter visual weight.
• subheader 3 — minor headings for dense or compact layouts.

Body

Body styles are used for primary and supporting paragraph text:

• Small — captions, helper text, or secondary information (use for low-prominence supporting text; never for primary content).
• Medium (default) — primary paragraphs and main content (default for readable body copy; avoid overusing small for main text).

Label

Label styles provide bold emphasis for form controls and inline text:

• Small — default form labels or inline bold text (avoid for long paragraphs).
• Medium — standard form labels and bold emphasis (avoid for long paragraphs).

Links

Link styles ensure clear interactive affordance in text:

• Small Underline — inline links in small or dense text (provides clear affordance in compact copy; do not use no-underline unless intentional).
• Small No Underline — subtle links where underline would distract (e.g., metadata; use sparingly).
• Medium Underline (default) — standard interactive links in body text (primary for interactive text; do not use no-underline unless intentional).
• Medium No Underline — links in headers or navigation (for clean appearance in prominent areas).

Special

Special styles are reserved for low-prominence or decorative text:

• Description — footnotes or tertiary metadata (lowest-prominence supporting info; never for primary content).
• Overline XSmall — small uppercase labels or dividers (for compact section markers; avoid for readable body text).
• Overline Small — uppercase section dividers or labels (for slightly larger emphasis; do not overuse for general emphasis).

Examples

This section shows each utility class with a simple preview and its related typography tokens.

Preview	Name	Font Weight	Font Size
Aa	Header 1	700	48px
Aa	Header 2	700	32px
Aa	Header 3	700	24px
Aa	Header 4	700	20px
Aa	Subheader 1	700	20px
Aa	Subheader 2	700	16px
Aa	Subheader 3	700	14px
Aa	Body Default	400	16px
Aa	Body Small	400	14px
Aa	Label	500	14px
Aa	Overline 1	700	16px
Aa	Overline 2	700	14px
Aa	Overline 3	700	12px

Accessibility

• Preserve semantic heading structure for screen reader navigation.
• Ensure ≥4.5:1 contrast for text against background.
• Use relative units in tokens to respect user font preferences.
• Distinguish links with underline or other non-color cues.
• Avoid justified text — left-aligned is most readable.

For more details, visit WCAG Guidelines.