Skip to contentShopify logoPolaris

Typography

Typography helps establish hierarchy and communicate important content by creating clear visual patterns.

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.


An illustration of letters constructed from lego blocks

Working with typography

A series of three illustrations representing the principles make it readable, make it adaptable, reinforce the message

1. Make it scannable

Keep related text aligned and closer together to create visual groupings. For most languages, the the majority of text should be left-aligned.

2. Adjust text based on device size and distance from the merchant

Because small screens are often at an arm's distance, we can decrease the size of larger headings and increase the size of important body text.

3. Create visual hierarchy

Pair font weight, size, and color together to create hierarchy. Use a lighter color or font-size to de-emphasize secondary content.


Essentials for designing with type

When designing with type, we can use a combination of font size, weight, color, and space to ensure a strong hierarchy and scannability of a page. By understanding the fundamentals, you’ll be able to better apply type to the UI.

Using the bounding box

The bounding box is the vertical height of the text and is defined by the text’s line-height. The value of the line-height is critical to make sure text aligns to the 4px grid. Refer to individual type styles for specified heights.

An image showing how the bounding box applies to text elements

Using the baseline

The baseline is the imaginary line that letters rest on. Align text horizontally to the baseline for a simple clean look.

An image showing the baseline and how it applies to text elements

There are situations where it makes sense to have multiple text sizes on a single line to establish hierarchy of elements. Aligning to the text’s baseline instead of center gives a more harmonious look.

An example of aligning text elements to the baseline

Line length

Line length describes the width of the content. For longer body text, the recommended line length is between 40 to 60 characters.

A diagram showing the ideal line length for text

Color

Color can be used to add contrast and reinforce the hierarchy between text.

For example, one way to distinguish between a title and a subtitle is to apply --p-text-color to the title, and --p-text-subdued to the subtitle. Using a lighter color for secondary information provides contrast between the text and helps reinforce hierarchy even when the text is the same size and weight.

An image showing how you can use color to add hierarchy within text elements

Space

We can help merchants navigate the UI by grouping related information together. One way to do this is to use space to create relationships between elements on a page.

Ambiguous spacing can cause confusion and make it hard to understand the content.

An image of showing how to use space to create hierachy and relationships between text elements


Font sizes

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


Display styles

PageHeading

PageHeading is reserved for the title of a screen.

An interface showing the title of a page before its contents

Display

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

An empty state and a modal with large display 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.

Two interface cards with headings

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

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

Caption

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

A line chart with small, caption-sized labels


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:

Example
-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:

Example
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

Do

  • 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

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