Version 5.0.1

Typography

Typography is an important part of a design system that brings consistency across experiences and platforms. Good typography rules help present content clearly and efficiently.

Typefaces#


Spectrum uses the typefaces Adobe Clean, Adobe Clean Serif, Adobe Clean Han, and Source Code Pro. These are available for download on the Fonts page.

Text examples illustrating typefaces Adobe Clean, Adobe Clean Serif, Adobe Clean Han, and Source Code Pro.Text examples illustrating typefaces Adobe Clean, Adobe Clean Serif, Adobe Clean Han, and Source Code Pro.

Typography components#


Heading#

Heading is used to create various levels of typographic hierarchies.

View the Heading typography component

Key example of heading XXL with text Hello world.

Body#

Body is primarily used for Spectrum components and for blocks of text.

View the Body typography component

Key example of body M with text Spectrum is based on real-world situations

Detail#

Detail is used for disclosing extra information or smaller items in hierarchical relationships of text.

View the Detail typography component

Key example of Detail XL with text Our recommendations.

Code#

Code is used for text that represents code.

View the Code typography component

Key example of code S with text example of javascript alert code

Font sizes#


Spectrum ensures that different sizes of text can work together harmoniously, on both desktop and mobile. All font sizes have a ratio of 1.125, known as the major second type scale. This means that each size is multiplied or divided by 1.125 from the previous size, starting with the base size, and rounded. Custom text (any non-existing typography component) should use a font size from this list.

SizeDesktop ScaleMobile Scale
font-size-5011 px13 px
font-size-7512 px15 px
font-size-10014 px (base size)17 px (base size)
font-size-20016 px19 px
font-size-30018 px22 px
font-size-40020 px24 px
font-size-50022 px27 px
font-size-60025 px31 px
font-size-70028 px34 px
font-size-80032 px39 px
font-size-90036 px44 px
font-size-100040 px49 px
font-size-110045 px55 px
font-size-120050 px62 px
font-size-130060 px70 px

Text formatting#


Text formatting can be used to visually add clarity and adjust voice or meaning.

Key examples showing correct usage of bold text. Button labeled continue, bold. Text Go to Your work, where Your work is bolded.

Bold#

Bold is used to add hierarchy within a sentence or to call attention, for example, in buttons and toasts. It’s also used to directly refer to the names of UI elements in running text.

Key example showing correct usage of italic. Text field labeled Email address with italic placeholder text abc@adobe.com

Italic#

Italic is used only for placeholder (“ghost”) text and image captions. Note that this does not apply to Adobe Clean Han because CJK languages should not be italicized.

Key example showing correct usage of underlines. Text with inline link See Privacy Policy for more details. Privacy Policy is underlined link.

Underline#

Underline is used only for text links (either hover state or default state, depending on the style of the link) and should never be used as a mechanism for adding emphasis.

Key example of strong text emphasizing the term sensitive information

Strong#

Strong can be used for placing importance on part of a sentence, rendering the text as a heavier font weight. This is for semantic formatting, when it’s intended to add a tone that conveys importance.

Key example of emphasized text. Text I love drawing with Photoshop brushes with love emphasized

Emphasis#

Emphasis can be used for placing emphasis on part of a sentence, rendering the text as italic (or heavier weight, in CJK languages).

Usage guidelines#


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.

Key example showing correct usage of type scale. Title text using font-size-300.
Key example showing incorrect usage of type scale. Title text using font size 21 pixels.

Use and adjust mobile font sizes#

When using font-size-400 on desktop scale, also use font-size-400 on mobile scale. Some instances don't call for a larger mobile font size, so you can specify font-size-100 to be used for your mobile designs instead. It’s acceptable to do this, but it should be done intentionally and sparingly; for example, a large page heading on desktop can become a smaller heading on mobile in order to keep the paragraph width easy to follow.

Key example showing correct usage of adjusting font size on mobile. Desktop scale font size 400 enlarges physical size on mobile scale as font size 400. Desktop scale font size 400 can be reassigned font size 200 on mobile scale for text size to decrease physical size.

Don't use underlines for adding emphasis#

Underlines are reserved for text links only. They should not be used as a way for adding emphasis to words.

Key example showing incorrect usage of underlines. Sentence stating "Please do not close this window while rendering" with do not close underlined for emphasis.

Respect capitalization rules#

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

Key example showing correct usage of capitalization. Button labeled create audience with first word capitalized. Text field labeled email address with first word capitalized, placeholder text abc@email.com in all lowercase. Dropdown labeled contact preference with first word capitalized, placeholder text select your preference with first word capitalized, options phone call, email address, text message all with first word capitalized.

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 OpenType panel in Illustrator or the CSS font feature settings).

Key example showing correct usage of tabular numbers. Column of numbers 8,746 39,111 21,358 shown with tabular lining.

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.

Key example showing incorrect usage of paragraph width at 23 characters wide.

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.

Key example showing correct usage of paragraph width at 44 characters wide.

Don't use indentation#

Paragraphs of text should not be indented. Spectrum offers specific margins to use between paragraphs as a way to separate blocks of text, which makes indentation unnecessary.

Key example showing incorrect usage of indentation. First lines of each paragraph indented.

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.

Key example showing incorrect usage of justification. Paragraph example fully-justified.

Define appropriate heading levels#

Headings and details can be assigned a heading level that is independent of typography component, size, weight, or other properties.

Key example illustrating correct usage of defining heading levels. Heading text 'welcome' with heading level h1 and subheading 'introduction' with heading level h2.

Deviating from use of font size options#

Sometimes the size options of Spectrum typography components aren’t suitable for specific scenarios (e.g., XL heading). In these situations, it’s OK to deviate from the size options by specifying a font size from our list (e.g., font-size-800).

Key example illustrating correct usage of font size to define text size when typography component size option is insufficient; text shown with font-size 700.

Typography component pairing#

Heading, body, detail, and code typography components can be paired together in order to create balanced relationships while enforcing hierarchy of content. By default, this can be done by using typography components with the same size.

Relationships may sometimes need to be more or less pronounced, so in those use cases, it’s acceptable to combine your own selection of sizes as long as you’re maintaining consistent hierarchy.

Key example illustrating correct usage of typography component pairing. Heading size L with detail size L and body size L.

Use defined fallback fonts#

Fallback fonts should be used in instances where a system can’t support Adobe Clean, or as a safeguard for your experience in the case where a user’s device fails to render Adobe clean.

Key example illustrating correct usage of fallback fonts; text shown with fallback font Source Sans Pro.

Fallback fonts#


In instances where Spectrum’s typefaces might fail to load properly, there are defined fallback fonts that have been selected based on operating system consistency and similar anatomical relationships.

TypefaceFallback fonts (listed by priority)
Adobe CleanSource Sans Pro, San Francisco, Roboto, Segoe UI, Trebuchet MS, Lucida Grande
Adobe Clean SerifSource Serif Pro, Georgia
Source Code ProMonaco
Adobe Clean JapaneseSource Han Japanese, Yu Gothic, \30E1 \30A4 \30EA \30AA, \30D2 \30E9 \30AE \30CE \89D2 \30B4 Pro W3, Hiragino Kaku Gothic Pro W3, Osaka, \FF2D \FF33 \FF30 \30B4 \30B7 \30C3 \30AF, MS PGothic
Adobe Clean Chinese (Traditional)Source Han Traditional, MingLiu, Heiti TC Light
Adobe Clean Chinese (Simplified)Source Han Simplified C, SimSun, Heiti SC Light
Adobe Clean KoreanSource Han Korean, Malgun Gothic, Apple Gothic

Changelog#


DateNumberNotes
Dec 02, 20195.0.1
  • Released "character styles" as individually versioned Typography components (Heading, Body, Detail, Code)
  • Added options for script, weight and classification
  • Updated to use t-shirt sizing
  • Added larger size options
Apr 18, 20195.0.0
  • This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)
  • Added fallback fonts for Adobe Clean Han (Japanese, Traditional Chinese, Simplified Chinese, and Korean)