Typography

Shopify admin provides a constrained, purposeful set of typographic styles. These styles map to functional roles so you know when to use what.

By tying typographic styles to specific functions in the interface, we create a clear visual pattern for merchants to follow while they interact with our product.

Principles

Style with purpose

A disciplined consistency with how you size and style type makes the whole admin more intuitive to use. Merchants who learn how to navigate one experience can apply that same knowledge to each new experience they come across.

Stay flexible

To make things accessible to audiences with different eyesight constraints, across different browsers, and different mobile devices, make sure to design in a way that works no matter what font size the merchant opts to use.

Font sizes

We use the typographic scale to communicate visual hierarchy in text.

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.

PageHeading

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

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.

Button

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

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;

Formatting

Along with the typographic scale, sometimes additional formatting is necessary to illuminate the distinction between smaller-scale relationships. Different formatting styles can be implemented using the text style component.

Diagram presenting text that is left aligned

Left aligned

By default, text is left aligned. Exceptions to this rule include text in tables, and the centered text we use in empty states.

Diagram presenting text that is emphasised by being bold

Strong

Use this style sparingly and only where strong emphasis is required. In interfaces, strong should be seldom used to enhance visual hierarchy.

Diagram presenting text that is underlined

Underline

Underline styles are exclusively for text links. Don’t use underline for things like adding emphasis to text within body copy.

Diagram presenting text that is subdued in a lighter gray color

Subdued

The subdued style lets you de-emphasize content, and you can use it across all font sizes. Mostly it should be used in contrast to other un-subdued text, vs. on its own. However you can use Subdued with standalone text that’s non-actionable or less important.

Display styles

An interface showing the title of a page before its contents

PageHeading

PageHeading is reserved for the title of a screen.

An empty state and a modal with large display headings

Display

Display is for titling various interface elements, such as empty states and modals.

Two interface cards with headings

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.

An interface card titled with a large heading text size followed by a smaller subheading

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. Only use with titles (vs. sections of content).

A line chart with small, caption-sized labels

Caption

Caption is for providing details in places where content is compact and space is tight, like when it comes to data visualization.

Font stack

We use a font stack that adapts to the operating system it runs on, like macOS, iOS, Windows, Android or Linux distributions.

A diagram showing a selection of default iOS, Mac, Windows, Android and Linux fonts

  • 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

This font-stack makes sure all browsers can load platform-specific fonts:

-apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif

Add this to your CSS to preload 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;

  /* Deactivate 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;
}

Mobile considerations

  • Refer to the platform’s 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

  • 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

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, then uses additional styles to support the specifics of each platform.

By using the native type scale as you design for mobile native, it guarantees that the experience and its UI components will be crafted at the correct screen aspect ratio, ensuring a more accessible experience.

Mobile variable font sizes

Variable font sizes are one of the most common accessibility features enabled on mobile. They let your audience increase or decrease the size of text on their mobile device. Once set, all apps installed will use the new values and the font sizes will be adjusted accordingly.

Variable font sizes usually have a major impact on the UI components, since the content width and height can be shifted by up to 20%. This is particularly important for the information located near the screen fold. For more information, read the foundational principles for mobile design.

Next
Illustrations