6 min read
|
Saved February 14, 2026
|
Copied!
Do you care about this?
This article explains how to create a proportional typographic scale using design tokens. It covers the concept of a typographic scale, the types of design tokens needed, and how to implement them for consistent font sizing in UI design.
If you do, here's more
A proportional typographic scale organizes font sizes using consistent mathematical ratios. Design tokens help establish these scales effectively. Instead of random font size selections, using a structured hierarchy creates visual contrast and aids in forming a cohesive design language. This approach not only enhances readability but also supports the transition from design to code, facilitating a more scalable design system.
To build a proportional typographic scale, begin with a base font size, typically around 15 pixels for most interfaces. The scale is created by multiplying this base size by a chosen ratio, which can range from 1.067 to 1.618, depending on the desired impact. For example, using a multiplier of 1.333 (the perfect fourth) strikes a balance between subtlety and prominence. Each subsequent font size is calculated using this ratio, resulting in a series of sizes that maintain visual harmony.
In practical application, design tokens play a crucial role in managing these font sizes. The article provides a starter kit template that includes eleven design tokens, which can be exported in a JSON format for use in development. The tokens include basic numbers, font size values, and composite tokens that group related styles. This structured approach simplifies typography management, making it easier to ensure consistency across different design elements. For instance, font size tokens are created by referencing and calculating values from previous sizes, ensuring a logical progression through the scale.
Questions about this article
No questions yet.