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: 600;
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. However, subdued can be used for standalone content when it represents a non-actionable or otherwise unimportant state, such as 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, Segoe UI, Roboto, 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, Segoe UI,
Roboto, 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;
}Resources
Mobile type scale
Both iOS and Android native apps use a different type scale than the web and mobile web. This native typescale is loaded into the app and is slightly different across these platforms. It uses the small screen scale as a starting point and completes it with additional styles to support the specifics of each platform.
Using the native type scale when designing for mobile native guarantees that the experience and its UI components will be crafted at the correct screen aspect ratio, ensuring a more accessible experience.
Do
- Refer to the platforms’ native font scales when designing experiences for native apps
- Refer to the small screen scale when designing experiences for mobile browsers
- Use the platform-specific component library
Mobile variable font sizes
Variable font sizes are one of the most common accessibility features enabled on mobile. It lets your audience increase or decrease the size of text in use on their mobile device. Once set, all apps installed will consume the new values and the font sizes will be adjusted accordingly.
Variable font sizes usually have a major impact on the UI components as the content width and height can be shifted by up to 20%. This is particularly important for the information located near the screen fold.
Do
- Use the native font scale
- Keep in mind that all UI elements containing text will be affected
- Explore additional content height width, truncation, and line wraps