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.
Heading is used to create various levels of typographic hierarchies.
Body is primarily used for Spectrum components and for blocks of text.
Detail is used for disclosing extra information or smaller items in hierarchical relationships of text.
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 can be used to visually add clarity and adjust voice or meaning.
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 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.
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.
Emphasis can be used for placing emphasis on part of a sentence, rendering the text as italic (or heavier weight, in CJK languages).
Choose from Spectrum's defined font sizes. By using unique font sizes, you risk upsetting the hierarchy and balance of typography in your product.
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.
Underlines are reserved for text links only. They should not be used as a way for adding emphasis to words.
Use sentence case for all UX content. For more on capitalization guidelines, go to Grammar and mechanics.
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).
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.
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.
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.
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.
Headings and details can be assigned a heading level that is independent of typography component, size, weight, or other properties.
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).
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.
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|
|Dec 02, 2019||5.0.1|
|Apr 18, 2019||5.0.0|