This guide walks you through building a complete, production-ready type scale system in Figma, from defining your base size to exporting design tokens that developers can use directly in code. Following all steps takes approximately 90 minutes, and the result is a reusable typographic foundation that works across your entire product.
What You'll Build
- A modular type scale based on a ratio (e.g. Major Third 1.25 or Perfect Fourth 1.333) with 8 to 10 size steps
- Figma Variables for each size token, bound to a single base value so global changes take one edit
- Text Styles for every typographic role (Display, Heading 1 through 4, Body, Caption, Label, Code) linked to those Variables
- A token export structure compatible with Style Dictionary and the W3C Design Token Community Group format
- A live specimen page in Figma so your team can preview every style in context before handoff
What You'll Need
- Figma Professional or Organisation plan (Variables require a paid seat as of 2026)
- The Tokens Studio for Figma plugin (v2.3 or later) for token export
- A confirmed brand typeface already loaded via Google Fonts, Adobe Fonts, or a custom font upload
- Node.js 20+ and pnpm 9 on your machine if you plan to run Style Dictionary locally
- Basic familiarity with Figma's Variables panel and Text Styles panel
Step 1: Choose Your Scale Ratio
Open a blank Figma page and name it Type System. Before touching any tool, decide your ratio. The ratio determines how each size step relates to the one below it.
Two ratios work well for most digital products:
- Major Third (1.25): tight steps, suits dense UI like dashboards or data-heavy apps
- Perfect Fourth (1.333): wider jumps, suits marketing sites, editorial layouts, and landing pages
Pick one ratio and stick to it. Mixing ratios inside a single product creates visual noise that readers feel even when they cannot name it.
Calculate your sizes from a base of 16px (the browser default, and the number that keeps body text accessible at 1rem). Using Perfect Fourth:
xs: 10px (16 ÷ 1.333 ÷ 1.333)
sm: 12px (16 ÷ 1.333)
base: 16px
md: 21px (16 × 1.333)
lg: 28px (16 × 1.333²)
xl: 37px (16 × 1.333³)
2xl: 49px (16 × 1.333⁴)
3xl: 66px (16 × 1.333⁵)
Round to the nearest whole pixel. Fractional sizes cause sub-pixel rendering inconsistencies in browsers.
Common pitfall: Do not add a size step just because a design needs it. If a layout feels off, the problem is usually spacing or weight, not a missing size.
Step 2: Create Figma Variables for Every Size Token
Variables are Figma's native token layer. Binding text styles to Variables means a single base-value change cascades to every style at once.
How do you structure the Variable collection?
Open Local Variables from the right panel. Create a new collection named Typography / Size. Add a Number variable for each step using this naming pattern:
font-size/xs
font-size/sm
font-size/base
font-size/md
font-size/lg
font-size/xl
font-size/2xl
font-size/3xl
Set each variable's value to the pixel number you calculated in Step 1. Do not use aliases yet for size variables. Aliases are more useful for semantic role tokens, which you will create in Step 4.
Create a second Number variable named font-size/base-raw and set it to 16. You will not bind this directly to styles, but it documents your base for anyone reading the file later.
What about line height and letter spacing?
Create a second collection named Typography / Metrics. Add variables for:
line-height/tight → 1.2
line-height/snug → 1.375
line-height/normal → 1.5
line-height/relaxed → 1.625
letter-spacing/tight → -0.02em
letter-spacing/normal → 0em
letter-spacing/wide → 0.04em
letter-spacing/wider → 0.08em
Store line heights as unitless multipliers, not px values. Unitless line heights scale correctly when font size changes, which is what the W3C recommends in CSS specifications.
Step 3: Set Up Text Styles Bound to Variables
Now connect your Variables to actual Text Styles. This is where the system becomes useful for designers rather than just token engineers.
Create the following Text Styles. For each one, open the style editor, set the font size field, then click the Variable icon next to it and bind it to the matching Variable you created in Step 2.
Display → font-size/3xl, line-height/tight, letter-spacing/tight
Heading 1 → font-size/2xl, line-height/tight, letter-spacing/tight
Heading 2 → font-size/xl, line-height/snug, letter-spacing/tight
Heading 3 → font-size/lg, line-height/snug, letter-spacing/normal
Heading 4 → font-size/md, line-height/snug, letter-spacing/normal
Body Large → font-size/md, line-height/relaxed, letter-spacing/normal
Body → font-size/base, line-height/normal, letter-spacing/normal
Body Small → font-size/sm, line-height/normal, letter-spacing/normal
Caption → font-size/xs, line-height/normal, letter-spacing/wide
Label → font-size/sm, line-height/snug, letter-spacing/wider
Code → font-size/sm, line-height/relaxed, letter-spacing/normal
Set Code to your monospace font (e.g. JetBrains Mono or IBM Plex Mono). All other styles should use your brand typeface.
Pro tip: Name your Text Styles with a group prefix so they appear nested in the panel. Use Type/Display, Type/Heading 1, and so on. Figma uses the forward slash as a folder separator.
Step 4: Create Semantic Role Tokens With Aliases
Raw size tokens are useful for building. Semantic tokens are useful for using. A semantic token like font-size/page-title tells a developer what the token means, not just what it measures.
Create a third Variable collection named Typography / Roles. Add aliased Number variables that reference your size collection:
font-size/page-title → alias of font-size/2xl
font-size/section-title → alias of font-size/xl
font-size/card-title → alias of font-size/lg
font-size/body-default → alias of font-size/base
font-size/ui-label → alias of font-size/sm
font-size/meta-info → alias of font-size/xs
When a product decision changes (say, card titles need to be one step larger), you update the alias, not every style that references it. The change propagates automatically.
Step 5: Export Tokens With Tokens Studio
Open the Tokens Studio plugin. In the Settings tab, set your token format to W3C Design Tokens (the Community Group format, not the legacy Style Dictionary format). This is the format most modern build tools expect as of 2026.
Map each of your Variable collections to a token group:
{
"typography": {
"size": {
"xs": { "$value": 10, "$type": "dimension" },
"sm": { "$value": 12, "$type": "dimension" },
"base": { "$value": 16, "$type": "dimension" },
"md": { "$value": 21, "$type": "dimension" },
"lg": { "$value": 28, "$type": "dimension" },
"xl": { "$value": 37, "$type": "dimension" },
"2xl": { "$value": 49, "$type": "dimension" },
"3xl": { "$value": 66, "$type": "dimension" }
}
}
}
Push this JSON to a GitHub repository using the Tokens Studio sync feature. Your development team can then pull it into a Style Dictionary config and transform it to CSS custom properties, Tailwind config, or Swift/Kotlin constants automatically.
Common pitfall: If a developer says the token values are arriving as strings instead of numbers, check that your Tokens Studio export format is set to W3C, not to the Figma Tokens legacy format. The legacy format serialises numbers differently.
Step 6: Build a Type Specimen Page
A type scale that exists only in a Variables panel is a scale no one uses. Build a specimen page that makes every style visible at a glance.
Create a new Figma page named Type Specimen. Add an auto-layout frame, 1200px wide, 64px horizontal padding. Inside it, for each Text Style, add a row containing:
- The style name as a label (set in Body Small / Label style)
- A sample string (use something meaningful, not Lorem Ipsum, try your product's actual UI copy)
- The size, weight, and line height shown as metadata below the sample
Group the Display and Heading styles at the top, Body and UI styles in the middle, and Code at the bottom. A well-structured specimen lets any designer joining the project understand the full system in under two minutes.
Teams at Lenka Studio typically include a specimen page in every design system handoff. It cuts developer questions about type styles by a significant margin, because the context is already visible in the file.
Step 7: Document Usage Rules in the File
Variables and styles do the mechanical work. A short usage guide does the human work.
Add a text frame to the specimen page with these four rules written out plainly:
- Use Display only for hero sections. One per page maximum.
- Do not nest Heading 1 inside a card or modal. Use Heading 3 or Heading 4 instead.
- Body Small is the minimum size for any readable copy. Do not use Caption for body text.
- Label is for form labels and UI metadata only, not for running text.
If your product serves users in Australia, Singapore, Canada, or the US, also note your minimum accessible font size. WCAG 2.2 does not specify a minimum size, but 16px body text at normal weight is the widely accepted baseline for English-language web content.
If you want to check whether your current brand foundation is strong enough to support a proper type system, the free Brand Health Score assessment from Lenka Studio is a good place to start before you invest time in a full token architecture.
Frequently Asked Questions
Can I use this type scale system in Figma without a paid plan?
Variables are only available on Figma Professional plans and above as of 2026. You can still create Text Styles on a free plan, but you will not be able to bind them to Variables, which removes the automatic cascade when values change.
How is a type scale different from just creating text styles manually?
A manual approach creates styles with no relationship to each other. A scale uses a mathematical ratio, so every size step is proportionally consistent. This produces visual harmony across headings and body copy without needing to manually adjust each size during reviews.
Does the Perfect Fourth ratio work for mobile interfaces?
It works, but the jumps can feel large on small screens. Many teams use a smaller ratio (like Major Second at 1.125 or Major Third at 1.25) for mobile and switch to Perfect Fourth for desktop breakpoints. You can model this in Figma using Variable Modes.
What if my developer is not using Style Dictionary?
The W3C Design Token format exported from Tokens Studio is plain JSON. A developer can consume it with any build tool, or simply copy the values manually into a CSS file or Tailwind config. The format is human-readable enough that direct copy is a reasonable fallback for small projects.
How often should I update the type scale once it is in production?
Avoid changing scale ratios once a product ships. Changing a ratio affects every size simultaneously, which requires a full visual QA pass. Instead, add or remove individual size steps at the edges of the scale (adding a 4xl step, for example) when the design genuinely needs it.
Next Steps
With your type scale in Figma and tokens exported, the next logical step is pairing this system with a colour token architecture and a spacing scale. Together, those three systems form the foundation of a complete design system.
You can also connect your exported JSON to a Storybook instance so developers see live type specimens alongside component documentation. This removes almost all back-and-forth about which style applies to which component.
If you are building a design system from the ground up and want experienced designers to help structure it correctly from the start, the team at Lenka Studio works with SMBs across Australia, Singapore, Canada, and the US to build scalable design foundations. Get in touch to talk through your project.
