Skip to contentShopify logoPolaris

Typography → Using type

Typography is the art of arranging type in ways that provides innate hierarchy to UI.

Typesetting

Polaris uses line height and vertical alignment to set type in the UI.

Line height

Type in the admin is aligned on the 4px grid. For this reason, all line heights are multiples of the 4px base unit.

This ensures that bounding boxes, which are defined by line heights in web, are used to define how text is positioned in the UI.

A piece of text where line height is highlighted, aligned on the 4px grid

Vertical alignment

Vertical alignment is used on type where line height and padding on an element are not sufficient to fill the entire space. Careful consideration needs to be taken in order to strike visual balance.

Type being vertically aligned in a button, index table, etc.
A badge where the type and icon are different sizes, but are centered vertically to achieve symmetry
Do

Consider aligning type vertically when bounding boxes differ from one element to another.

A back arrow that is smaller than the following type, which is top aligned, making the UI feel unbalanced
Caution

Top aligning elements that are presented in-line, but have varying bounding box sizes, can create a feeling of a broken UI.

Hierarchy

Proper type hierarchy facilitates UI flow and rhythm when building for the Shopify admin.

Headings

Headings introduce new sections, and subsections in the admin. They initiate the visual rhythm of a page by defining the main use of each feature in the interface.

A series of cards using headings as an introduction

Headings are used in almost all cards as a way to identify the feature they contain.

A card containing a data table that is introduced by a small heading
Do

Use shorter headings. Headings don’t need to be larger than the content, especially if the content or component is complex.

A card with a heading that is the same size as the body type
Do

Use proper heading sizes. Headings should be equal or larger in size than the following text, unless they are used as a lede or kicker.

The title, description and media part of a product detail page, which does not have a heading
Do

Optimize the usage of headings. They might not be necessary if the content they are introducing is self-evident.

A page introduced with a heading in a normal font weight
Don't

Use a consistent weight in your headings.

Body

Body is used everywhere else in the admin. Buttons, inputs, paragraphs, navigation elements, etc. Any element that is part of the usable UI uses body type.

Body is often the same size as its leading heading, but will rarely be the same weight. Weight plays the role of pulling the merchant’s attention to specific parts of the UI, by complementing other design choices like color and positioning to reinforce the importance of the intended interaction.

A card with some body text elements that have the same weight as its introducing heading

Body can vary in weight a lot, and can even mimic the style of headings for a streamlined look.

A card with two different body sizes using two different colors to differentiate between the two
Do

Use different body type sizes and colors to create clear hierarchy in complex components.

A card with every element using the same body type size
Caution

Using the same body size everywhere can make it hard for merchants to identify key elements in components.

Formatting

Formatting modifies the appearance of type to enhance its readability, emphasize certain elements, or to convey specific meanings.

Text editor formatting toolbar

Underline

Text that is underlined can serve two purposes: linking to other pages, or offering additional contextual information through a tooltip or a popover.

Visual of a link in a footer of a page

Text links have a solid underline and use a distinct link color to differentiate them additionally from surrounding text.

A definition text in an analytics page explaining what the definition of “Total sales” is in a popover

Definition indicators have a dotted underline and only react on hover or touch without sending merchants to another section in the admin.

Lists

List elements are introduced with bullets, or more preferably, with icons that are related to the content they introduce.

A list of features offered by a Shopify Plan
Do

Use lists to share short, easily identifiable, and relevant bits of information, like specific features.

A list of tasks completed in a home card
Do

Use lists for task completion interfaces.

Tabular numbers

Tabular numbers are a feature that equalizes the widths of all numbers in type to make sure lists of numbers align with each other vertically. The Shopify admin uses tabular numbers every time currency or money amounts are presented.

Two columns made from multiple rows of numbers, one of which is non-tabular and misaligned vertically, and the other one using tabular numbers, which are neatly aligned with each other
An index table showing the inventory of multiple items in several rows
Do

Use tabular for numbers that repeat in tables to increase their scannability.

Larger currency number in a customer detail page
Do

Use tabular numbers for all currency amounts. This makes them easily discernible and visually constant everywhere in the admin.

A card that shows the total number of orders and total spend of a customer
Caution

For larger numbers, like in the case of the plans page, or any promotional or incentive visual where numbers are larger than the rest of the content, you can forgo tabular numbers.

An index table showing the value of several orders in a row, but the numbers are monospaced
Don't

Don’t use mono in lieu of tabular numbers to achieve a tabular number look.

Icons and symbols

In Polaris, type and icons are part of the same family. When used with type, icons inherit the color of the copy they are tied to.

A collection of components using icons and symbols close together, in the same shape or containers

Icons and symbols align with type when used outside of a component, and use the same text color as the accompanying text.

A badge using a micro icon
Do

Use micro icons for small body text, like in smaller badges. Use regular icons everywhere else.

A spot icon presenting an empty state for the search feature
Caution

Spot icons are not used in-line with type, nor are they considered to be part of typography.

    On this page