v32.1.1
Typography
Precise, consistent typography is essential for an interface which is almost entirely made of text
Typography is a crucial foundation of user interface design. Consistent typography ensures readability, hierarchy, and a polished look for your product. There are 3 components to display text:
- Heading is used for titles and subtitles.
- Text is used for body copy.
- CustomText is used for unique text styles not covered by the previous components.
These components are designed to maintain visual consistency throughout the suite of apps. Heading and Text offer a set of semantic variants to convey meaning and hierarchy, while CustomText is a flexible component that can be used to create any kind of text style. Make sure to refer to the UX Writing guidelines when writing text for your product.
Our typography documentation can also be found in the Figma library
Type Scale
The type scale is designed to address most UI scenarios. Include only what’s relevant to your design. Avoid incorporating all levels on a single page.
Headings
| Style | Variant | Usage |
|---|---|---|
Heading 1 | heading-1 | Exclusively for page titles. It should only appear once on each page |
Heading 2 | heading-2 | Typically used for headings or main section titles that group and introduce a set of related information. It can also be used for mid-emphasis numbers, numbers in card/tile |
Heading 3 | heading-3 | Commonly used for subsection titles or to break down information within larger sections |
Heading 4 | heading-4 | Sub-level heading style, offering further subdivision and organization, particularly when dealing with dense content |
Body text
| Style | Variant | Usage |
|---|---|---|
Display 1 | display-1 | Use this style for critical numerical data, such as currency values and share counts. Avoid using this style repeatedly |
Display 2 | display-2 | This style is for secondary critical numbers |
Body 1 | body-1 | Use for small tile/card titles, such as FAQ card titles and banner titles. It is not intended for use within paragraphs |
Body 2 | body-2 | Use this style to highlight key information within the body text |
Body 3 | body-3 | Primary text style for paragraphs and descriptions |
Small 1 | small-1 | Used for bubbles and tags |
Small 2 | small-2 | Use this style for smaller, supportive/helper text that accompanies primary content, such as captions, labels, copyright, or chart legends |
Best Practices
Casing
- Headings should use title case (see exception on UX Writing guidelines)
- Body and small text should use sentence case
- Display text should use title case when applicable
Line length
For legibility, to avoid narrow or wide paragraphs, the advised minimum width is 220px, and 927px for the maximum width.
Color
Headings don't use color to convey meaning. However, some body text variants offer semantic color options.
Type Pairing
Heading 1
Heading 2
We want you to be empowered when raising a new round of financing. Use our aggregated market data on early-stage companies to better understand what post-money valuation you should be raising. To begin, use the filters below to customize the view to fit your needs. (Body 3)
Small
We want you to be empowered when raising a new round of financing. Use our aggregated market data on early-stage companies to better understand what post-money valuation you should be raising. To begin, use the filters below to customize the view to fit your needs. (Body 3)
Do
Utilize the appropriate type level to establish a clear hierarchy.
Don't
Avoid using Small 1 & 2 as headings.
Heading 1
Heading 2
We want you to be empowered when raising a new round of financing. Use our aggregated market data on early-stage companies to better understand what post-money valuation you should be raising. To begin, use the filters below to customize the view to fit your needs. (Body 3)
Do
Utilize the appropriate type level to establish a clear hierarchy.
Small
We want you to be empowered when raising a new round of financing. Use our aggregated market data on early-stage companies to better understand what post-money valuation you should be raising. To begin, use the filters below to customize the view to fit your needs. (Body 3)
Don't
Avoid using Small 1 & 2 as headings.
Monospace typographical treatment
Monospace
A monospace typographical treatment comes in handy when dealing with IDs, tokens, unique identifiers, 2FA codes, and other computer-like pieces of text that are not strictly speaking computer code, but are similar. In the example below, notice the following:
- “User ID” is a sequence of 8 numbers. Numbers are tabular by default when within tables, thus no additional type treatment is required. It remains as pure text.
- “Commit hash” is an 8-character long sequence of letters and numbers, and benefits from a monospaced typographical treatment, so that its width remains the same regardless of which characters are included in the code.
- “Access token” is a very long sequence of numbers separated by commas, but without spaces. It needs
monospacetreatment to allow for text to wrap.
| User ID | Commit hash | Name and access token | |
|---|---|---|---|
| 12345678 | mm08g5p0 | Luca Cantini 12345678,12345678,12345678,12345678,12345678 | luca.awards(AT)hacker.com |
| 98765432 | i8fds913 | Gilmar Lira 12345678,12345678,12345678,12345678,12345678 | g(AT)grumpy.gg |
Accessibility Standards
- There are legal standards (such as Section 508 of the U.S. Rehabilitation Act) which apply to typography.
- The WWW Consortium maintains the Web Content Accessibility Guidelines (WCAG) which provide a more web-specific guidance for ensuring products are accessible to more people.
Some, but not all, of the WCAG sections related to typography are:
- WCAG Success Criterion 1.4.4 Resize text
- WCAG Success Criterion 1.4.5 Images of Text
- WCAG Success Criterion 1.4.9 Images of Text (No Exception)
- WCAG Success Criterion 1.4.8 Visual Presentation
- WCAG Success Criterion 1.4.12 Text Spacing
- WCAG Success Criterion 2.4.2 Page Titled
- WCAG Success Criterion 2.4.6 Headings and Labels
- WCAG Success Criterion 2.4.10 Section Headings
Is this page helpful?