Typography

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.

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.

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.

Respect capitalization rules#

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

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

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.

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.

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.

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.

Define appropriate heading levels#

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

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

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.

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.