Applying semantic labels for hierarchical text styles

Once you’ve defined your type role (Display, Heading, Subheading, Body, Caption, Label), the next step is to apply type scales using semantic labels such as XL, L, M, and S. These labels indicate different size variations within each category, allowing for a more granular control over your typographic hierarchy. By assigning these size-based semantic labels to your text elements, you ensure that each component reflects its relative importance and role within the overall layout, while also offering flexibility in visual emphasis.

For instance, within the Display category, you might have:

• Display-XL: For the most impactful, attention-grabbing text. Think of the main title on your page.
• Display-L: For slightly less prominent display text.

Similarly, within the Heading category, you could have:

• Heading-L: For primary section titles.
• Heading-M: For slightly less important headings.

And for Body text:

• Body-M: For your standard paragraph text.
• Body-S: For smaller body text variations.

This systematic approach not only reinforces consistency across your design by using a defined set of sizes but also streamlines the implementation process for designers and developers.

Here’s a detailed process for setting up semantic typography tokens in Figma:

1. Create the semantic type category

Start by defining a semantic type category to house all typography-related variables. This category should include predefined responsive breakpoints for desktop, tablet, and mobile, as modes ensuring typography scales seamlessly across different devices.

2. Define the font name variable

Within the semantic type category, add a string variable for the font family. This variable should reference your primitive token for the font name and should be applied across all breakpoints.

3. Organize by type role

Define a type role group. This group categorizes text styles based on their function, such as:

• Display (for large, attention-grabbing text)
• Heading (for section titles)
• Subheading (for secondary headings)
• Body (for main content text)
• Caption & Label (for small text elements like footnotes and form labels)

4. Establish type scales within each type role

Inside each type role, create a sub-group for different type scales, such as:

• XL (Extra Large)
• L (Large)
• M (Medium)
• S (Small)

These sub-groups set up a clear type scale hierarchy, providing a flexible and consistent framework for typography usage within your design system.

5. Set up variables for typographic properties

For each type scale (XL, L, M, S), define the following key typographic variables using your primitive tokens:

• Font Weight: Assign predefined values such as Regular, Medium, Bold.
• Font Size: Set scalable font sizes appropriate for each type role.
• Line Height: Define line heights optimized for readability based on font size.
• Letter Tracking (Spacing): Adjust spacing for improved legibility based on type scale and case.

By referencing primitive tokens, these variables ensure consistency and flexibility while maintaining design system integrity.

After setting up your semantic typography tokens in Figma and defining the core typographic variables, the next step is to bring these elements to life by applying them to your text styles.

This guide outlines how to apply semantic tokens to your typography styles, using “Heading XL” as an example. The process ensures that your text styles are both consistent and adaptable across various breakpoints (Web, Tablet, Mobile).

Begin by creating a type scale reference that outlines the various type scale you need , we would be using XL. (Note: The initial sizes and values can be arbitrary, as they will be updated later.)

Update the names of each text style to match the semantic token convention defined in Figma. For example, rename the style to “Heading/XL/BOLD.” This semantic naming links the text style to its function (e.g., headings, subheadings) , scale and font weight.

Utilizing a plugin like “Styler” allows us to generate figma text styles based on our renamed elements.

By selecting each style and running the plugin, we create the initial text styles for “Heading XL.”

Right now, the Heading XL style doesn’t have the correct font sizes, weight, tracking or line heights. To fix this, I rearranged the order to prioritize the Bold variant, then clicked on “Edit Style” to update the settings.

Currently, the values for font weight, size, line height, and letter spacing appear arbitrary. To standardize these, we’ll apply the predefined structure. First, update the font family to match the semantic type token. Click on the variable icon (the settings icon) to access the field where you can make this change.

Next, we update the font weight. An efficient method is to copy the text style name from the layers panel and paste it into the token search field. This approach eliminates the need to manually scan through tokens, streamlining the process.

After selecting the Bold weight, you can apply the same process to adjust the font size, line height, and letter spacing by choosing their corresponding semantic tokens.

Once the Bold variant has been updated, we apply the same process for the remaining font weights, medium and regular. Initially, we set arbitrary values, but after applying the semantic tokens, the values have been adjusted accurately. The updated styles now perfectly reflect our intended design.

Next, we need to adapt the typography style for our breakpoints , web, tablet, and mobile. To achieve this, we apply variable mode to the typography style. Since we’ve already established breakpoints using semantic tokens and created distinct modes for each, this approach allows for seamless switching and consistent typography across all devices.

With the new settings in place, you can now switch between desktop, tablet, and mobile modes. Next, duplicate the typography scale twice — one copy for Tablet and one for Mobile — and apply the variable mode for each. The image below illustrates this process.

Now, for Heading XL, I can easily switch between Web, Tablet, and Mobile modes. The benefit of this approach is that it consolidates the Heading XL style into a single category within the text styles, rather than creating separate categories for each breakpoint. This streamlined method makes toggling between breakpoints quick and efficient.