Design Systems: How to create a scalable typography stack

Typography is one of the key fundamentals of a design system. Alongside color and spacing, a solid approach to typography will help to establish the building blocks of a system on which patterns and components are composed.

A typography stack (or typographic hierarchy) is quite simply a collection of typestyles. Each style specifies values for a shared set of typography-related settings like font size and weight.

With a well-constructed stack, you can rest assured that the content in experiences that consume your design system is aligned and that any patterns composed with the foundations of the system meet your various quality indicators.

There are countless ways to approach establishing a typography stack and there isn’t a one-size-fits-all solution. Instead of proposing one, I’m going to walk you through how my team created a flexible, supportive, and accessible hierarchy.

Baseline against your design system

My advice is to start by looking at the bigger picture. What is your design system trying to achieve? Maybe your goal is to align or to speed up production. Taking a moment to recap on your end goal will allow you to understand exactly what you need from the stack.

These were our goals:

• Align teams — Create a harmonious user experience by standardizing the visual language.
• Future-proof— The design system will mature as more internal teams become adopters. With more adopters, we will discover more use cases to support
• Ease adoption —A good consumer experience is critical to adoption. The design system must act as a supportive colleague, with helpful solutions and practical advice.
• Ecosystem-wide support —Our potential consumer base is a diverse mix of rich…