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 medium
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.
Emphasis styles can be implemented using the text style component.
Strong
When in doubt, avoid the strong style.
Use bold sparingly and only where strong emphasis is required in body text. In interface copy, bold should be reserved to mark input merchants have provided. For example, use the strong style to mark merchants’ input in messages like “No results found for platypus plushie”.
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 merchants (as in marketing content such as 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
Don’t
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.
Don’t
Use 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.
Don’t
Use 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.
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.
Do
Use subdued with any text style.
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.
Font stack
The Shopify admin uses a font stack that adapts to the operating system it runs on, like Windows, iOS, or Android. For example:
- Apple devices will display San Francisco
- Android devices will display Roboto
- Devices running Windows will display Segoe UI
- Machines running Linux will display the default sans-serif font for any running distribution
The following font-stack ensures all browsers can load platform-specific fonts:
-apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serifUse the following CSS to load system fonts and set up browsers for legibility:
html {
/* Load system fonts */
font-family: -apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe
UI, Helvetica Neue, sans-serif;
/* Make type rendering look crisper */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Disable auto-enlargement of small text in Safari */
text-size-adjust: 100%;
/* Enable kerning and optional ligatures */
text-rendering: optimizeLegibility;
}
/**
* Form elements render using OS defaults,
* so font-family inheritance must be specifically declared
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
}
