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.

Working with typography

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.

Using the baseline

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

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.

Line length

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

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.

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.

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.

Display

Display is for titling various interface elements, such as empty states and 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.

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

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.

• 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