Skip to contentShopify logoPolaris

Typography

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

Typography defines hierarchy

Typography plays a crucial role in defining hierarchy within design. Variable weights convey different levels of importance, where bolder weights indicate greater significance.

Good type positioning also establishes visual prominence and emphasizes key information.

A series of cards in the admin, each introduced by a bold heading and medium weight body typography
A card with different levels of type presented in different weights, sizes and positions
Do

Use a combination of weight, size, color and positioning to define hierarchy.

The same card as before, but only using color to style all type elements
Don't

Rely only on color to define hierarchy.

Typography defines purpose

Polaris assigns meaning to type based on its usage. Mono is used for code; tabular number stylesets are employed for numbers and currency amounts; and typescales are designed with UI design in mind.

A variety of cards, one showing a list of prices neatly aligned, another one showing monospace type for code, and another one showing type and icon pairings
Different currency amounts in the Shopify admin, all using tabular numbers
Do

Consistently style similar or repeating type in the UI.

A list of products with an “add product” button that is style like a link
Don't

Repurpose or reinterpret known patterns in typography, especially when it comes to interactions.

    On this page