Applying the type system

The following examples demonstrate how Spectrum's typography system works in practice. Learn how to combine type styles to create clear visual hierarchy, improve readability, and organize information across different interface layouts.

Adobe Clean Spectrum VF graphic showing an overlapping outlined "e" and solid "a" letterform on a blue-to-purple gradient background.

Typography examples

The following are some general examples to show how the Spectrum 2 typography system all comes together, and how type styles can be used together to create visual hierarchy.

Card example with numbered callouts: 1) "Card title" labeled as the Title style, and 2) "Card description" labeled as the Body style, over a colorful gradient image.

Card

In this card example, Title and Body text styles are used together to establish a clear visual hierarchy, helping users quickly identify the primary content while keeping supporting information easy to scan.

  1. Title S
    The card title uses the Title style to establish the primary focus of the card. It provides strong visual emphasis, making it easy for users to quickly identify and scan content across multiple cards.
  2. Body XS
    The supporting description uses the Body style because it provides additional context without competing with the title. Its lighter weight and smaller size reinforce the content hierarchy while maintaining readability. The body text is presented in gray-700 to further distinguish it as secondary information and keep attention on the primary title.
Dark "Featured project" page section for "Dreams from Oostende" with numbered callouts labeling the eyebrow text, heading, body paragraph, byline, and button group.

Page section

Spectrum's type scale creates a clear visual hierarchy that naturally guides the eye through the page. By assigning each type style a distinct role, Spectrum organizes information into predictable patterns that make content easier to scan and understand.

  1. Title M
  2. Heading XXL
  3. Body M
  4. Body S
  5. Component M, used in a button group

Mobile browsing

The same typography principles scale across screen sizes. On native mobile platforms, Spectrum preserves a clear visual hierarchy by adapting type styles to smaller layouts while maintaining consistent relationships between headings, supporting content, and actions.

  1. Heading L
  2. Title L
  3. Body XS
  4. Body S
  5. Monospace number / Body XXS

Usage guidelines

All-caps

All-caps styles are not recommended for usage within UI components because it does not support accessibility requirements

An all-caps style can still be used sparingly and strategically in use cases where longform content is the primary experience (like a blog post or a marketing website). All-caps text brings a heavier, punctuated feel to letterforms and adds visual impact to single words or short, standalone phrases.

Button labeled "EXPORT VIDEO" in all-caps text, shown as a don't example.

Use Spectrum font sizes

Choose from Spectrum's defined font sizes. By using unique font sizes, you risk upsetting the hierarchy and balance of typography in your product.

Text reading "Spectrum delivers what's needed, when it's needed." labeled with a custom value of 17 px instead of a Spectrum font size token, shown as a don't example.
Text reading "Spectrum delivers what's needed, when it's needed." labeled with the token font-size-200, shown as a do example.

Respect capitalization rules

Use sentence case for all UX content. For more on capitalization guidelines, go to Grammar and mechanics.

Form with a "Create audience" button, an "Email address" field, and a "Contact preference" dropdown listing "Phone call," "Email address," and "Text message" in sentence case, shown as a do example.

Use tabular numbers for numerical data

Numbers within components should be tabular with lining figures. In tables, numbers should be right aligned to make numerical data easier to read and compare. This is used, for example, in tables, time stamps, and bar loaders. This is supported by Adobe Clean (via the Monospace uppercase option in Figma, the OpenType panel in Illustrator, or the CSS font feature settings). For iOS and Android, use the Spectrum Monospace numbers type styles.

Table with a "Count" column showing right-aligned tabular numbers 2, 5, 10, 12, and 25, with a bolded total of 324, shown as a do example.

Don't let paragraph widths get too thin

Paragraphs of text that are too long are difficult to follow, and paragraphs of text that are too thin are difficult to read. Ideally, blocks of text should be roughly 70 characters wide. Be sure to keep them at least between 50 and 120 characters wide.

Narrow column of the "Collaborative" paragraph broken into many short lines, illustrating a paragraph width that is too thin, shown as a don't example.

Keep content short and to the point

Keep paragraphs concise. Some users with cognitive disabilities (and even those who don't) can have a very difficult time reading and comprehending large blocks of text.

Moderate-width column of the "Collaborative" paragraph with comfortably readable line lengths, shown as a do example.

Don't fully-justify text

Do not use fully-justified blocks of text. This adds trapped white space within paragraphs, which makes it harder to read, especially for those with cognitive disabilities or dyslexia. Right alignment (left rag) is also discouraged for paragraphs of text.

The "Collaborative" paragraph shown fully justified with uneven word spacing on a pink background, shown as a don't example.