Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Typography in Design System

Typography is one of the core components in any design system. In typical print-based typography guidelines, we often see brands listing levels of typography with example texts, specifying sizing, line height (which is also called leading in typography), character spacing (which is called tracking in typography) and font weights, meaning whether the font should be light, regular, medium, bold etc.

In a design system, these are still very much relevant as part of the guidelines, but we need a little more because now we are talking about an entire digital design ecosystem.

In this lesson, we will use Shopify’s design system Polaris as an example and see how they created typography guidelines.

Overview

Much like other design systems, Shopify started with a “principles” section outlining the overall guidelines of typography. It was very simple and straight to the point.

Integrate Code with Type Levels

The next section is about font sizes, which all typography guidelines should include. The way Shopify formatted this section is a bit unique and perhaps more developer friendly. Instead of using numbers and showing how large it is visually like in most traditional print-based brand guides, the Polaris system used css properties like “font-size” “line-height” and “font-weight” to show the numbers. Even if someone doesn’t read code, this is straight forward enough to understand while being very developer friendly.

The design system then went on to specify some critical formatting conventions, such as underline should only be added for hyperlinks and not as an emphasis; bolded text should be used sparingly and only when needed for strong emphasis.

The guidelines went on to describe the different levels of typography and what they are used for with visual examples in the “display styles” section.

Font Stack

One unique aspect about this typography guideline is the mentioning of “font stacks”. It is a technology that uses the system default font of each operating system to ensure users have a native experience that fits in perfectly with their device.

Mobile Typography

The guideline wraps up with some general instructions for developers about mobile typography consideration.

From this case study, we can see that typography guidelines in design systems are generally more granular about how typography should appear on different operating systems and devices than traditional print-based guidelines, but the basics are similar – designer should specify specifications of typography based on the levels of headings and body text, with visual examples and code snippets if possible.

Scroll to Top