Spectrum

Version 5.1.0

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.

Table of contents#

Typefaces
Typography components
Font sizes
Text formatting
Line height
Usage guidelines
Fallback fonts
Changelog

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.

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.

Size	Desktop scale	Mobile scale
font-size-50	11 px	13 px
font-size-75	12 px	15 px
font-size-100	14 px (base size)	17 px (base size)
font-size-200	16 px	19 px
font-size-300	18 px	22 px
font-size-400	20 px	24 px
font-size-500	22 px	27 px
font-size-600	25 px	31 px
font-size-700	28 px	34 px
font-size-800	32 px	39 px
font-size-900	36 px	44 px
font-size-1000	40 px	49 px
font-size-1100	45 px	55 px
font-size-1200	50 px	62 px
font-size-1300	60 px	70 px

Text formatting#

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

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.

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.

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.

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).

Line height#

Heading and detail#

Heading and detail use a 1.3× multiplier for Latin, Arabic, and Hebrew scripts. Han scripts (Simplified Chinese, Traditional Chinese, Japanese, and Korean) use a 1.5× multiplier to ensure readability. This applies to all Spectrum fonts as well as their fallback fonts.

Key examples showing the line height for body text and code. The first example in English has a 1.5x multiplier for its line height. The second example in English has a 1.5x multiplier for its line height. Both code examples read <div class=”spectrum-Button-spectrum-Button—Primary”>/* This is sample code */. The third example in Simplified Chinese uses a 1.7x multiplier. The body text examples read “Icons that depict horizontal movement, e.g., back icon) should be mirrored to follow the flow of the right-to-left interface.” with the first example in English and the second example in Simplified Chinese. The fourth example in Simplified Chinese uses a 1.7x multiplier. Code example reads <div class=”spectrum-Button-spectrum-Button—Primary”> and “this is sample code” in Chinese.

Body and code#

Body and code use a 1.5× multiplier for Latin, Arabic, and Hebrew scripts. Han scripts (Simplified Chinese, Traditional Chinese, Japanese, and Korean) use a 1.7× multiplier to ensure readability. This applies to all Spectrum fonts as well as their fallback fonts.

Component#

Text within components uses a 1.3× multiplier for Latin, Arabic, and Hebrew scripts. Han scripts (Simplified Chinese, Traditional Chinese, Japanese, and Korean) use a 1.5× multiplier to ensure readability. This applies to all Spectrum fonts as well as their fallback fonts.

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.

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.

Typeface	Fallback fonts (listed by priority)
Adobe Clean	Source Sans Pro, San Francisco, Roboto, Segoe UI, Trebuchet MS, Lucida Grande
Adobe Clean Serif	Source Serif Pro, Georgia
Source Code Pro	Monaco
Adobe Clean Japanese	Source 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 Korean	Source Han Korean, Malgun Gothic, Apple Gothic

Changelog#

Date	Number	Notes
Sep 15, 2020	5.1.0	Added component line height
Dec 03, 2019	5.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 19, 2019	5.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)

Palette

Object styles