Building a Basic Typography Token Set: A Must-Have for Every Design System
Oct 24, 2024
In the world of design systems, consistency is key. As product designers, we often face the challenge of ensuring visual consistency across platforms and scaling our designs efficiently. That’s where design tokens come into play. Design tokens allow us to codify design decisions and bridge the gap between designers and developers. One of the most essential tokens in any design system is typography.
In this article, I’ll walk you through setting up a basic typography token set—something that should be a default in every design system—and explain why these tokens matter for your product’s scalability and design consistency.
Before we start, here is an interesting article by Sam Gordashko on Font Families and Font Weights.
What are Typography Tokens And Why They Matter
Typography tokens are a subset of design tokens specifically used to define text styles like font family, size, weight, line height, and letter spacing. They ensure that typography remains consistent across platforms, whether you’re designing for web, mobile, or other interfaces.
Instead of manually adjusting text styles in every design file or codebase, typography tokens allow designers and developers to reference a single source of truth. This makes it easy to scale typography across an entire product and update it quickly when needed.
Consistency: Typography tokens ensure the same text styles are applied across platforms, ensuring that users have a consistent visual experience.
Scalability: As your product grows, it becomes easier to maintain and update typography globally rather than changing it in multiple places.
Collaboration: By defining typography tokens, both designers and developers work from the same foundation, reducing ambiguity and miscommunication.
Setting Up The Required Tokens
Here’s a guide to creating a basic typography token set. These tokens are created using Tokens Studio, which should integrates seamlessly into your design workflow if you are not using Figma's Variables.
How to create Tokens using Tokens Studio — this will help you visually understand what the code below does.
Font Family Tokens
Lets define your primary and secondary font families. You can adjust these based on your brand’s style guide. In this sample I used Sans and Serif, but you can easily change that primary and secondary if that matches your design system better.
Font Size Tokens
Lets establish a modular scale for your font sizes to create a harmonious typography system that adapts well to different screen sizes. I have attached a small sample of the sizes. In your font size tokens you want to add as many sizes as possible to future-proof your system.
You can use webtools like Nate Baldwin's — Proportio.app to get better Type scales.
Font Weight Tokens
When you are defining font weights I recommend including all possible weights. Again to future-proof your system in case the company decides to change typeface that might support a different. Using these tokens will make it easier to adjust weights across the board.
Line Height Tokens
Creating line height tokens will ensure optimal readability, especially for body text and headlines.
There is great tool to determine to finetune your line height if you would want to do that. It is can be found at www.thegoodlineheight.com.
Letter Spacing Tokens
Spacing between characters can greatly affect readability, especially at smaller sizes.
Total Typography Token String
Here are all the typography tokens that you could put on your Global tokens or if you for example have typeface specific design system, you can put this in your "typeface" token set.
Lets Use This With The Typography Token
Now these are a wide variety of tokens. So lets use the Typography token and combine all the previously created tokens into one power house! More information about the Typography tokens can be found here.
The Typography Token lets you link to all the previously created tokens, so that you only have to worry about making changes on a single token level.
Download the file here
You can download the Figma file below and use the Tokens Studio plugin to copy the JSON data into your own project file. Or use the GitHub link to directly download the entire file that you can import into your design using Tokens Studio.
Community file here
Download the JSON file and import into Tokens Studio using Tools in the bottom right and selecting "Load from file/folder or preset".
Then select "Choose file" and select the JSON you downloaded.
If you want more about these types of tokens or if there is a different way you would want the blog post to be written or stronger visual aid, please let me know. I will do my best to make the adjustments even if it means including screenshots of how it looks like in Tokens Studio.