Creating efficient, consistent, and flexible typography for digital platforms using modern design system principles.When designers no longer have to reinvent the wheel for every project, the entire process becomes much smoother and more efficient. This is the beauty of a design system, it makes the whole process smoother and faster. As weibel explains, beyond just saving time, its about working more effectively, keeping all the parts consistent, and making sure users have a clear and organized experience [1].User profile card showing that the consistent use of fonts contributes to a clear and organized user experience.At the heart of this approach is typography, which is how we make text look and feel. Its more than just selecting fonts; as Abhishek emphasizes, its about carefully arranging words so they are easy to read, visually appealing, and engaging to the reader [2]. It sets the tone for the overall design by creating harmony and consistency throughout every element of a digitalproduct.A strong typographic framework simplifies development and makes products easier to maintain. By integrating typography into a design system, teams can effortlessly scale designs across desktop, tablet, and mobile, ensuring a consistent visual language. As vinney notes, this is a key aspect[3,4].Key typographic principles in designsystemsEffective typography within a design system is guided by several key principles, including usability, clarity, and hierarchy.Usability: Usability in typography refers to how easily users can read and interact with text within a digital product According to abhishek, this is a key consideration in design systems [5]. When typography is well-designed, users can engage with content smoothly without distraction. For example, the Nielsen Norman Group emphasizes that factors such as clear font selection, appropriate sizing, balanced spacing, and strong contrast are crucial for reducing cognitive load and promoting smoother navigation.A design showcasing clear typography, demonstrating principles of readability and usability in presenting information.Clarity: Clarity in typography ensures that the textual content is communicated effectively and is easily understood. Achieving clarity involves selecting highly legible fonts with distinct letterforms, ensuring characters are easy to differentiate.Additionally, proper line spacing (leading) prevents text from appearing cramped, improving readability and reducing visual strain. By prioritizing clarity, typography improves both user experience and accessibility, making content more engaging and easier to navigate[6].A side-by-side comparison of legible and illegible typography, illustrating key factors for clarity such as font choice, spacing, and contrast.Hierarchy: Hierarchy is another critical typographic principle in design systems, playing a vital role in guiding users through information and highlighting key elements within the content. By implementing a clear typographic hierarchy, users can quickly scan content and understand the relative importance of different sections and pieces of information. To guide users effectively, this visual structure is achieved through deliberate variations in font size, weight, color, and the placement of text elements, a point also made by oliver in their discussion on font size in web design [7]. Design systems often employ a defined type scale to ensure a consistent and effective visual hierarchy across aproduct.A visual representation of how typographic hierarchy guides the readers eye to the most important information.Typography and accessibility in designsystemsDesigning for accessibility ensures that digital products accommodate users with disabilities, from mild impairments to severe limitations. However, accessibility guidelines dont cover every potential usability issue. For example, if a font choice makes text difficult to read, thats a usability problem rather than a strict accessibility violation. When users struggle with readability, assuming contrast isnt the issue, the challenge often lies in the legibility of the typeface or the clarity of the overall layout[8].Understanding typography readability and legibility is key to designing accessible interfaces. Readability refers to how easily words and sentences can be understood, while legibility focuses on the clarity of individual letterforms. Making intentional choices in these areas can significantly improve the reading experience for allusers.To ensure text remains accessible:Font Size: Body text should be at least 16px for comfortable reading, and text below 9pt should be avoided[9].Color Contrast: The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for small text and 3:1 for large text to support users with lowvision.Screenshot showing an episode card and a contrast checker confirming WCAG compliance.Spacing & Line Height: A line height of at least 1.5 times the font size and adequate spacing between letters and words improve readability, particularly for individuals with dyslexia or low vision[10].Text Resizing: Users should be able to scale text up to 200% without loss of content or functionality [11].Screen Reader Compatibility: Avoid embedding important text within images; instead, use actual text to ensure compatibility with assistive technologies.Establishing primitive tokens for typographyPrimitive tokens lay the groundwork for a cohesive typographic system by defining key properties like font family, weight, size, line height, and letter tracking. These core tokens ensure that typography remains consistent and scalable across diverse platforms and screen sizes, serving as the basis for more detailed semantictokens.To begin, a font family token specifies the primary typeface (for example, Satoshi or Helvetica). Next, tokens for font weight differentiate between various levels such as regular, medium, and bold, each represented by a specificvalue.Instead of using fixed font sizes, the system employs scalable font size tokens that allow text to adapt fluidly across different devices. Similarly, line height tokens preserve readability and visual balance, while letter tracking tokens manage the spacing between characters for optimal legibility.In Figma, you can set up this system by creating a collection called Primitive Type to house all these primitive tokens. Within this collection, organize categories as shown in the image below for a clear structure. Additionally, consider creating a central unit category that standardizes all unit values across the design system. This approach not only ensures consistency but also makes it easier to update and maintain typographic values throughout your projects.Figma screenshot of a Primitive Type table, illustrating the organization of core typographic tokensNaming conventions for typography tokensTypography token naming conventions are designed to be hierarchical and modular, ensuring that tokens remain clear, scalable, and adaptable across various platforms and screen sizes. Typically, the naming structure follows thisformat:[Category] / [Size] / [Style] / [Attribute]Examples of typography token naming conventions, demonstrating a hierarchical structure for clarity and scalability.Each component of this structure serves a distinctpurpose:Category (Type Role): Defines the texts purpose, such as Display, Heading, Body, orCaption.Size: Indicates the type scale, often using labels like XL, L, M, orS.Style: Specifies the text styling, such as Regular, Bold, or SemiBold.Attribute: Identifies the typography property being defined, such as weight, size, line height, or letterspacing.Understanding semantic typography tokensSemantic tokens in typography are design tokens that provide meaning and context to the fundamental typographic properties. They act as an abstraction layer over primitive tokens (which store raw values like font names or sizes), defining how and where these properties should be used within the design system[12]A visual representation of semantic typography tokens in a user interface.Why use semantic tokens in typography?Using semantic tokens offers several key advantages:Consistency Across Platforms: They ensure that typography remains consistent across different platforms like web, tablet, and mobile, providing a unified user experience.Effortless Updates: Updating typographic styles becomes seamless, as changes to a semantic token automatically apply to all elements using that token. For instance, modifying the font size for all Bold Heading Large elements only requires updating the Heading/L/Bold/Size semantictoken.Flexibility and Scalability: They make theming and customization easy, allowing typography to adapt to different brands or contexts without changing the corevaluesImproved Collaboration: By establishing a shared language between designers and developers, semantic tokens streamline the design-to-development handoffprocess.Key components of a semantic typography tokenA semantic typography token encapsulates several essential properties that define its visual appearance andusage:Screen Variants: Although not always explicitly included in the token name, tokens can be designed with different values for various devices (e.g., web, tablet, mobile). This ensures responsive typography that adapts seamlessly to different viewportsizes.Illustration of responsive design across laptop, tablet, and mobile phone.FreepikFont Name (Typeface): This specifies the font family to be used, ensuring consistency throughout the design system. For instance, a token might define INTER or OJUJU as the chosen typeface.Examples of different typefaces, such as INTER, OJUJU, and others, showcasing the options for a font name token in a designsystem.Size: The font size is defined using units such as pixels (px), rems, or ems. Relative units like rems are often preferred for accessibility, allowing users to adjust text size according to theirneeds.Examples of extra-large, large, medium, and small heading sizes, demonstrating different font sizeoptions.Letter Spacing (Tracking): This property sets the horizontal space between characters, typically expressed in em, percentage (%), or pixels (px). Proper letter spacing can significantly enhance readability, especially for headings or text in allcaps.Four examples of the word tracking with varying degrees of letter spacing, from tight towide.Line Height (Leading): Line height, or leading, is the breathing room for your text, it makes your content both easy to read and visually appealing.In our typography system, we use a smart ratio-based approach to determine line height. Depending on the type scale, we adjust the ratio: a tighter 1.14 ratio works well for larger text like displays and prominent headings, while a 1.5 ratio is ideal for smaller text like body copy and captions.Once calculated, these line heights are rounded to the nearest 4px. This step helps maintain a structured layout.For example:For a large heading with a 48px font at a 1.14 ratio, the line height comes out to roughly56px.For body text with a 16px font using a 1.5 ratio, the line height is24px.This flexible, ratio-driven approach lets us adjust line height based on text size and purpose, ensuring optimal readability and a balanced visual experience on alldevices.Examples of text with line height (leading), demonstrating how vertical spacing between lines affects readability.Weight: This defines the boldness of the font, with typical options including Regular, Medium, Bold, Semibold, etc. Font weight helps establish visual hierarchy and emphasizes important text elements.Examples of Light, Medium, and Bold fontweights.Establishing a typographic hierarchyBy defining distinct type role for different content levels, designers enable users to quickly understand the importance and relationships between various pieces of information. To achieve a clear hierarchy, start by categorizing your text into the following groups:Display: Large, attention-grabbing text used for key visuals or standout messaging.Headings: Primary titles that introduce major sections.Subheadings: Secondary titles that further break downcontent.Body: Main text for paragraphs and detailed information.Captions: Smaller text that supports images or supplementary content.Labels: Brief descriptors for form fields, buttons, andicons.A visual representation of how different content levels (Display, Headings, Subheadings, Body, Captions, Labels) are styled using varying font weights and sizes to create a clear typographic hierarchy and guide the readerseye.Applying semantic labels for hierarchical textstylesOnce youve 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 mighthave:Display-XL: For the most impactful, attention-grabbing text. Think of the main title on yourpage.Display-L: For slightly less prominent displaytext.Similarly, within the Heading category, you couldhave:Heading-L: For primary sectiontitles.Heading-M: For slightly less important headings.And for Bodytext: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.Establishing semantic typography tokens inFigmaHeres a detailed process for setting up semantic typography tokens inFigma:1. Create the semantic typecategoryStart 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.Screenshot of a figma menu with the Semantic Type category created and highlighted2. Define the font namevariableWithin 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.Screenshot showing a Family semantic type variable referencing the Satoshi primitive token for Desktop, Tablet, andMobile.3. Organize by typeroleDefine a type role group. This group categorizes text styles based on their function, suchas:Display (for large, attention-grabbing text)Heading (for sectiontitles)Subheading (for secondary headings)Body (for main contenttext)Caption & Label (for small text elements like footnotes and formlabels)Organizing semantic typography tokens by their typerole.4. Establish type scales within each typeroleInside each type role, create a sub-group for different type scales, suchas:XL (ExtraLarge)L (Large)M (Medium)S (Small)Establishing type scales within different type roles in a designsystem.These sub-groups set up a clear type scale hierarchy, providing a flexible and consistent framework for typography usage within your designsystem.5. Set up variables for typographic propertiesFor 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 typerole.Line Height: Define line heights optimized for readability based on fontsize.Letter Tracking (Spacing): Adjust spacing for improved legibility based on type scale andcase.Setting up typographic variables for a semantictokensBy 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 textstyles.Applying semantic tokens to typography stylesThis 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).Semantic token definition for HeadingXLBegin 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 updatedlater.)Heading XL type scale for thewebUpdate 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 fontweight.Renaming based on semantictokensUtilizing a plugin like Styler allows us to generate figma text styles based on our renamed elements.Figma screenshot showing the Styler plugin being used to generate text styles from renamed typography layersBy selecting each style and running the plugin, we create the initial text styles for HeadingXL.An image showing the result of using a plugin to generate textstyles.Right now, the Heading XL style doesnt 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.Figma screenshot showing the Edit text style modal for the Bold variant of Heading XL, where font properties like family, weight, size, and line height are beingupdated.Currently, the values for font weight, size, line height, and letter spacing appear arbitrary. To standardize these, well 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 thischange.Screenshot showing the font family dropdown menu in the Edit text style modal, with Satoshi selected to match the semantic typetoken.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 theprocess.Figma screenshot showing the search for Heading/XL/Bold and the Edit text style modal with the Weight set toBold.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 semantictokens.Figma screenshot showing the Edit text style modal for Heading XL Bold, with settings for font family (token), size, line height, and letterspacing.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 intendeddesign.A visual summary of the updated Heading XL typography style for theweb.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 weve already established breakpoints using semantic tokens and created distinct modes for each, this approach allows for seamless switching and consistent typography across alldevices.Figma screenshot of the breakpoint selection dropdown (Desktop, Tablet, Mobile) for the Heading XL text style, showing variablemode.With the new settings in place, you can now switch between desktop, tablet, and mobile modes. Next, duplicate the typography scale twiceone copy for Tablet and one for Mobileand apply the variable mode for each. The image below illustrates thisprocess.Heading XL typography style adapted for web, tablet, and mobile, showing the varying properties for each breakpoint.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.Text styles panel showing Heading/XL as a single category with Bold, Medium, and Regular weight variations.A strong typography system ensures consistency, scalability, and accessibility within a design system. By leveraging clear tokens, teams create a flexible foundation that adapts seamlessly to different screens and user needs. Prioritizing readability, hierarchy, and responsiveness not only enhances the user experience but also strengthens collaboration between design and development, making typography a cornerstone of both usability and visuallanguageReferences[1] Weibel, A. (2025, February 5). What is a Design System and How Does it Work? Salesforce. Retrieved from https://www.salesforce.com/blog/what-is-a-design-system/[2] Abhishek. (2021, October 7). Role of typography in design systems. Strate School of Design. Retrieved from https://strate.in/role-of-typography-in-design-systems/[3] Vinney, C. (2024, October 31). What is a design system and why is it useful? UX Design Institute. Retrieved from https://www.uxdesigninstitute.com/blog/what-is-a-design-system/[4] Understanding typography in design systems. (n.d.). Retrieved from https://www.qed42.com/insights/understanding-typography-in-design-systems[5] Abhishek. (2021, October 7). Role of typography in design systems. Strate School of Design. Retrieved from https://strate.in/role-of-typography-in-design-systems/[6] Establishing a Visual Language: Typography. (n.d.). Design Systems. Retrieved from https://www.neue.world/learn/design-system/establishing-a-visual-language-typography-a-detailed-discussion-on-choosing-and-using-typography-in-a-design-system[7] Oliver. (2021, September 21). Whats the right font size in web design? Pimp My Type. Retrieved from https://pimpmytype.com/font-size/[8] Typography and accessibility. (2023, January 10). The Interconnected. Retrieved from https://theinterconnected.net/kirabug/typography-and-accessibility/[9] TypographyMaterial Design 3. (n.d.). Material Design. Retrieved from https://m3.material.io/styles/typography/applying-type[10] Understanding success criterion 1.4.4: Resize text. (n.d.). W3C. Retrieved from https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html[11] Understanding variables, styles and tokens in design systems. (n.d.). Retrieved from https://figr.design/blog/figma-tokens-in-design-systems[12] Design tokenstokensfoundationsSAP digital design system. (n.d.). Retrieved from https://www.sap.com/design-system/digital/foundations/tokens/design-tokens/GlossaryBreakpoint: A specific screen width at which the layout and styling of a website or application adapt to provide an optimal viewing experience across different devices (e.g., desktop, tablet,mobile).Design System: A set of standards, reusable components, and guidelines that help teams design and develop digital products in a consistent and efficient way.Font Family: A group of related typefaces sharing similar design characteristicsFont Size: The size of the text, typically measured in pixels (px), ems, orrems.Font Weight: The degree of thickness or boldness of a typeface (e.g., Regular, Medium,Bold).Hierarchy (Typographic): The visual organization of text on a page to guide the reader and indicate the importance of different content sections.Letter Spacing (Tracking): The horizontal space between characters in a line oftext.Line Height (Leading): The vertical space between lines oftext.Primitive Tokens: Fundamental design tokens that store rawvaluesReadability: How easily words and sentences in a block of text can be understood.Relative Units (ems, rems): Units of measurement in web design that are relative to other values, allowing for scalability and accessibility.Scalability: The ability of a design system or its components to adapt and grow effectively as the product evolves and expands across different platforms and screensizes.Semantic Tokens: Design tokens that provide meaning and context to typographic properties.Text Styles: Predefined sets of typographic attributes (font family, size, weight, line height, letter spacing) that can be applied to text elements to ensure consistency.Type Scale: A defined set of font sizes used throughout a design system to establish visual hierarchy and consistency.Type Role: A categorization of text styles based on their function or purpose within the content (e.g., Display, Heading, Body, Caption,Label).Usability (in Typography): How easily users can read and interact with text within a digitalproduct.Variable Mode: A feature in design tools (like Figma) that allows for defining different sets of values for designtokens.WCAG (Web Content Accessibility Guidelines): A set of international standards and recommendations for making web content more accessible to people with disabilities.Mastering typography in design systems with semantic tokens and responsive scaling was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.