Modern design systems like the ones we develop at ITDO benefit from the use of typographic tokens :
1. Primitive tokens
They define basic properties such as:
2. Nomenclature
To scale well, we use a clear structure:
Semantic tokens: typography with intention
Unlike primitive tokens, semantic tokens provide context and meaning. For example:
Heading/L/Bold represents a c level contact list highlighted section, without depending on specific values.
The use of semantic tokens in typography provides several key advantages that impact both the design and development of digital products.
First, they allow for quick and efficient global updates . By working with centralized styles, any changes to a token are automatically applied to all elements that use it, saving time and reducing errors.
Additionally, they ensure consistent visual consistency across multiple platforms , from mobile apps to web interfaces, maintaining a unified experience regardless of the device or environment.
They also offer great flexibility to customize the design to your brand identity without compromising the system's core structure. This makes it easy to adapt products to different visual lines or audiences without having to redesign everything from scratch.
Finally, semantic tokens create a common language between designers and developers, improving communication between teams and streamlining the transfer of design to code with greater accuracy and less ambiguity.
Key components of a semantic typographic token
A semantic typographic token is not simply a set of values; it's a structured unit that defines how a typographic style should behave in different contexts within the design system. Below, we break down its main components:
Base Font: This is the primary font used in the system, such as Inter , Satoshi , or any other typeface family that represents the brand's voice. This value remains constant to ensure visual consistency throughout the product.
Size: It is preferably expressed in relative units such as rems , which allows the typography to be scaled according to user preferences or browser settings, thus improving accessibility.
Tracking (character spacing): This value regulates the horizontal separation between letters, which has a direct impact on legibility. Adjusting it correctly allows you to optimize titles in all-caps, dense blocks of text, or decorative styles.
Line height: Defines the vertical space between lines of text. In well-designed systems, it's calculated based on the font size, using ratios such as 1.14 for headings and 1.5 for body text. This provides visual balance and improves the reading experience.
Font Weight: Sets the density or thickness of the typographic stroke, with options such as Regular , Medium , or Bold . The appropriate weight helps structure the information hierarchy and clearly highlight key elements.
Each of these elements contributes to building a flexible, accessible typographic base that is perfectly aligned with the needs of the digital product.