Member-only story
Design system typography
How to make a tokenized typography system, for your design system.
Typography is a foundational aspect of both marketing and product design. It not only conveys textual content but also sets the tone, enhances readability, and reinforces brand identity.
In design systems, typography serves three distinct purposes:
- It helps establish clear visual hierarchies in your designs.
- It enhances text legibility and readability.
- It allows you express your brand identity consistently, in Product & Marketing designs, so everything you create looks “on brand.”
This guide will walk you through the essentials of designing a robust typography system, including the selection of typefaces, the creation of typography tokens, and the application of these tokens in UI.
Prerequisites
Before setting up the typography system for your design system, ensure you have the following foundational elements in place:
A Spacing Scale
This is the most foundational element of a design system, critical for maintaining uniformity across components and layouts.
We’ll use this to define our sizing scale, which will then be used to determine the font sizes that makeup your type scale.
Further reading
- How to define a spacing scale for your design system by Felix Oginni
- Spacing — Foundations — Atlassian Design System
- Wise Design on Spacing
- Material Design on spacing
- Carbon Design System on Spacing
A Sizing Scale
The spacing scale should be used to define your sizing scale, which will be applied to your type scale, component sizing, imagery, and iconography. By basing your sizing scale on your spacing scale, you ensure visual harmony and consistency with your brand throughout UI, product, and marketing.
Further reading
