Typography

Shopify admin provides a constrained, purposeful set of typographic styles. These styles map as much as possible to functional roles so you know when each can be used.

By consistently tying typographic styles to appropriate functions in the interface, we create a clear visual pattern for merchants to follow while they’re interacting with our product.


Type scale

The typographic scale is designed to keep the number of separate styles to the minimum that works for the Shopify admin.

Make commerce better for everyone.

Display x-large

font-size: 42px;
line-height: 44px;
font-weight: 500;

Make commerce better for everyone.

Display large

font-size: 28px;
line-height: 32px;
font-weight: 500;

Make commerce better for everyone.

Display regular

font-size: 26px;
line-height: 32px;
font-weight: 400;

Make commerce better for everyone.

Display small

font-size: 20px;
line-height: 24px;
font-weight: 400;

Make commerce better for everyone.

Heading

font-size: 16px;
line-height: 24px;
font-weight: 500;

Make commerce better for everyone.

Subheading

font-size: 12px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;

Make commerce better for everyone.

Body

font-size: 14px;
line-height: 20px;
font-weight: 400;

Make commerce better for everyone.

Caption

font-size: 12px;
line-height: 16px;
font-weight: 400;

Additional emphasis

The styles defined in the typographic scale are the primary way to communicate visual hierarchy in text. However, additional emphasis and de-emphasis may be necessary to illuminate smaller-scale relationships.

Strong

Strong styles should be used to provide additional emphasis in body text only.

Subdued

Subdued styles can be used across the type scale to de-emphasize content.


Display styles

Display styles make a bold visual statement. Use them to create impact when the main goal is visual storytelling. For example, use Display to convince or reassure a merchant such as in marketing content (like sell pages) or to capture attention in onboarding scenarios.

Title

Title is reserved for the title of a screen and the titles of Modal dialogs.

Do

Use titles in the header bar

Don’t

Use titles for modals

Heading

Heading should always be used for titles of top-level sections of a screen. If the sections of a screen are represented by cards, each card’s title should use the Heading style.

Do

Use headings for titling top-level sections of a screen.

Diagram of using the heading style for titling top-level sections of a screen

Don’t

Use other styles for top-level sections.

Diagram of using other styles for top-level sections

Subheading

If a top-level section of a screen has subsections, use the Subheading style for titling those subsections. Subheading should never appear as the first element in a card. Don’t use this style for elements that aren’t titles for whole sections of content.

Do

Use subheadings for titling subsections.

Diagram of using subheadings for titling subsections

Don’t

Use subheadings for table-headers, content, and labels for data or inputs.

Diagram of using subheadings for table-headers, content, and labels for data or inputs

Caption

Caption is used to provide details in situations where content is compact and space is tight. A common use case is in Data Visualization.

Do

Use caption for labelling data visualization. Diagram of using captions to label graphs and other data content


Emphasis styles

To communicate content hierarchy, use the core typographic scale first. Once the main hierarchy is established, if two pieces of text of the same style have different positions in the content hierarchy, the Subdued style may be used to de-emphasize one of them. Subdued content isn’t unimportant or superfluous, but rather makes room for the eye to orient itself and focus on core content.

Do

Use subdued with any text style. Larger type styles

Do

Use subdued with any text style. Smaller type styles

In general, avoid using the subdued on its own, when not contrasting with other text from the same part of the type scale. There are exceptions: subdued may be used for standalone content when it represents a non-actionable or otherwise unimportant state of something, i.e. when the normal content is absent.

Do

Use subdued for supplementing Body content, as help_text does for text inputs.

.

Don’t

Use subdued when content hierarchy is already established using the type scale.


Resources