Typography in Design Systems

A type audit helps understand how typography is used today before creating a new system. It shows what works, what repeats, and what needs to be fixed. A good starting point is checking the semantic structure with tools like the WAVE Chrome extension. It reveals the header outline of each page and makes it easy to see issues like missing h1s, skipped levels, or pages where small headers appear above larger ones. When header levels follow a clear order, the interface becomes more predictable and easier to navigate .

The next step is reviewing the visual hierarchy. Listing all current text sizes and weights helps spot patterns and inconsistencies. Some products end up with many similar sizes or styles that do not relate to each other. Seeing them together makes it clearer which ones are unnecessary and which styles appear often enough to keep. This gives a starting point for defining a cleaner, more intentional set.^[1]

A clear base size is the anchor of every typography system. It sets the reading comfort level and determines how easily other styles can scale. Many interfaces start with a body size around 14 to 16 pixels because these values remain readable across dense layouts and support long-form content without visual strain.

Once the base size is stable, designers can build predictable relationships between styles. Using consistent units like rem helps the system scale with user settings, and sp units do the same in native environments . This improves accessibility because users can enlarge text without breaking layouts.

A reliable base size also simplifies decisions for teams. Instead of comparing arbitrary numbers, designers can generate heading and caption sizes through proportional steps, either through modular scales or grid aligned increments. This reduces decision fatigue and keeps the visual rhythm coherent across screens.

A well chosen base size also minimizes inconsistencies during handoff. Developers can rely on a single reference point instead of interpreting multiple unrelated values. It becomes easier to maintain typography tokens, test accessibility, and ensure that spacing aligns with the system’s grid.^[2]

Line height directly affects how easily users follow lines of text. If spacing is too tight, the eye struggles to track the next line, especially in longer paragraphs. If spacing is too wide, text loses cohesion and slows reading. A practical starting point for body copy is a line height around one and a half times the font size, which aligns with WCAG guidance and keeps text open without feeling disconnected . Designers often refine this value by testing several options in real content rather than relying on a single formula. In dense interfaces, even small variations like 18, 20, or 24 pixel line heights create noticeable differences in clarity and rhythm .

Line height also interacts with vertical rhythm and spacing systems. When line heights align with a 4 or 8 point grid, text blocks snap more naturally to layout spacing, making designs easier to structure and maintain in code. This alignment helps create consistent gaps around paragraphs and components, reducing unexpected jumps between elements. Because grids often guide spacing tokens, keeping line heights grid friendly ensures that text styles integrate smoothly with other foundations of the design system.^[3]

A modular type scale creates predictable steps between text sizes. Instead of choosing values one by one, designers define a ratio and generate sizes from a shared base. This keeps hierarchy consistent across layouts. Ratios like Major Third (1.25) or Minor Third (1.2) offer clear visual differences between steps. When the ratio increases too quickly, the headings become impractically large. When the ratio is too small, the differences become subtle and harder to use in complex interfaces. Some systems, such as Material 3, apply the Major Second ratio of 1.125 to create a balanced progression that stays usable across many device sizes .

A scale becomes more effective when its values align with spacing systems. Rounding sizes to multiples of 4 or 8 helps the typography sit neatly on a baseline grid. This creates a steady vertical rhythm and makes spacing easier to maintain in dense layouts. For example, the final scale could use values like 40, 32, 24, 20, 16, 13, 11, and 8 pixels.

Tools like Typescale help compare ratios during early exploration. Seeing multiple scales side by side makes it easier to evaluate how quickly sizes grow and whether each step remains usable for headings, body text, or captions on both web and native interfaces.

Semantic hierarchy ensures that text styles match their meaning and purpose in the interface. Headings represent structure, not just visual size. Using levels from H1 to H6 in a logical sequence helps users understand how content is organized. It also supports assistive technologies, such as screen readers, that rely on heading levels to navigate pages. When levels are skipped or used inconsistently, the structure becomes harder to follow. Many interfaces use three to five heading levels because this range usually matches the depth of typical product content without adding unnecessary complexity .

Different platforms group text roles in specific ways. On the web, common groupings include headings, body text, captions, and utility text. Native platforms often use categories such as display, headline, title, body, and label. Aligning these naming systems helps teams maintain a shared understanding even when working across multiple platforms.

Font weight shapes how users perceive hierarchy and emphasis. A readable system does not rely on size alone. Weight helps distinguish headings, body text, and supporting details. Regular, medium, and bold weights usually form a complete set for interfaces because they cover the common needs without overwhelming the system with options:

• Regular works well for long paragraphs because it preserves comfortable reading.
• Medium aligns visually with icons, especially line icons that often appear near text.
• Bold gives emphasis when needed but should be used sparingly to avoid losing contrast between levels.

Weight also affects how text appears next to elements with different densities. A light weight can feel lost on busy pages, while an overly heavy weight can create unnecessary stress in dense layouts.

Paragraph and letter spacing improve legibility by giving text enough separation to read comfortably. Letter spacing adjustments benefit smaller sizes that often appear in captions or metadata. Slightly looser spacing helps distinguish each character. Larger display sizes sometimes benefit from slightly tighter spacing because the increased scale already gives characters more breathing room. WCAG guidance recommends a minimum letter spacing of 0.12 times the font size to support readability for a broader range of users .

Paragraph spacing helps users identify where one thought ends and the next begins. Clear separation prevents large text blocks from blending together. WCAG suggests using spacing after paragraphs that is at least twice the font size, which improves comfort when scanning longer content.

Some design systems avoid defining a dedicated paragraph spacing property because native platforms and the web do not always support it directly. Instead, they use spacing tokens or layout components to create consistent gaps. When paragraph and letter spacing follow predictable rules, designers can mix headings, body text, and labels without creating visual clutter.

Creating text styles in Figma starts with preparing a text layer that already includes the properties you want to reuse, such as font family, weight, size, line height, and spacing. When the layer is ready, click the four-dot icon in the Typography section to open the Text styles modal. In the modal, click the plus icon (+) to create a new style. Give it a name, confirm, and the style becomes available in the Local styles list. You can now apply it across the file and reuse it without recreating settings each time .

Publishing styles makes them available across files in your design system. After publishing, teammates can enable the library and use the styles without recreating them. Any edits you make to a published style can be pushed to all subscribed files, which keeps typography consistent across the product.^[4]

Figma groups text styles automatically when slashes appear in their names. A slash tells Figma to treat the name before it as a folder and the name after it as the item inside that folder. For example, a style named “Heading/XL” creates a group called “Heading,” and inside it appears the “XL” level. Adding more slashes creates deeper structure, such as “Body/Regular/M” for a nested group. This keeps long style lists compact and makes scanning easier because related styles sit together in the panel instead of appearing as separate, scattered items.

To edit any style, select the layer, open the style picker, right-click the style, and choose Go to style definition to edit. This takes you to the Local styles panel where the original style lives. From there, open the Edit modal to update the name, description, or properties. This workflow ensures that changes apply globally and stay in sync across files that use the style.^[5]

Text styles in Figma do not include color, so applying color styles separately is an important part of building a full typography system. This separation keeps the text library smaller because you do not need to create multiple versions of the same style for different colors. Instead, you apply a text style for the typographic properties, then apply a color style on top of it. Designers can highlight a text layer or a specific range within it and choose any color style from the picker. This allows one text style to work across many backgrounds and themes without duplicating the style itself .

Color styles can also help communicate intended usage. Many teams create text-specific color styles, such as colors designed for light backgrounds or for dark backgrounds. These styles can include descriptions in their details to clarify where they work best. Pairing color styles with typography this way supports accessibility because designers can choose combinations that meet contrast requirements. It also simplifies maintenance. When a color needs to change, updating the color style automatically updates every text instance using it, while the underlying text style remains untouched.

Typography in Figma depends not only on style settings but also on text box behavior. Figma provides 3 resizing modes: Auto width, Auto height, and Fixed size. Auto width is the default when clicking once to place text. Fixed is the default when drawing a text box manually. For precise handoff, Figma recommends switching text boxes to Auto height. This mode adjusts the height of the text box based on the line height of the style and removes extra space added by manual resizing.

This accuracy matters during development. If text boxes are too tall or too short, spacing that designers measure in Figma will not match what developers see in code. Auto height ensures the text box height reflects the actual line height value, which leads to more consistent spacing between components. When preparing files for production, reviewing text layers and switching them to this mode helps avoid layout issues that appear only after implementation.