figma guide
Figma typography: type scales, text styles, and variables that stay in sync
Build a typography system in Figma: modular scales, text styles, line height rules, variable modes, and handoff notes so type does not drift across files.
- Published
- Updated
- May 28, 2026
- Read time
- 6 min
- Level
- Intermediate
Quick answer
Typography in Figma is three layers: pick a modular type scale (sizes and line heights), publish text styles for every role (display, heading, body, label), and use variables only where you need theming (brand swap, density modes)—not as a replacement for text styles. Lock font family, weight, size, line height, and letter spacing in the library; let product screens use style names (text/body/md) instead of one-off Tahoma 13.5px. If fonts fail on Windows teammates, fix that before debating scales—see how to install Figma fonts. For token-heavy systems, pair this guide with variables & modes and the Figma guides hub.
Who this is for
- Product designers standardizing headings and body copy across web and mobile.
- Design system owners publishing a type ramp the whole org can consume.
- Teams fighting mystery fonts after imports from Sketch or Illustrator.
Start with roles, not random sizes
| Role | Typical use | Scale hint (desktop) |
|---|---|---|
| Display | Marketing heroes | Largest step, tight tracking optional |
| H1–H3 | Page and section titles | 3–4 distinct steps |
| Body | Paragraphs, descriptions | One primary + optional small |
| Label / caption | Chips, metadata, table headers | Smallest readable step |
| Code / mono | IDs, technical strings | Separate family if needed |
Verdict: define 6–10 named roles maximum for v1. More steps mean more drift; fewer steps mean designers invent “body-15” locally.
Build a modular type scale
Pick a ratio
Common ratios: 1.125 (minor second), 1.2, 1.25 (major third), 1.333. Start from a 16px body base and multiply up for headings, divide down for captions.
Example ramp (1.25 ratio, body 16):
| Token name | Size (px) | Line height (px) | Notes |
|---|---|---|---|
text/display | 40 | 48 | Marketing only |
text/h1 | 32 | 40 | Page titles |
text/h2 | 24 | 32 | Section titles |
text/h3 | 20 | 28 | Card titles |
text/body | 16 | 24 | Default UI copy |
text/body-sm | 14 | 20 | Secondary copy |
text/label | 12 | 16 | Minimum for dense UI |
Line height rules
- Headings: ~1.2–1.3× font size (tighter).
- Body: ~1.5× for readability.
- Labels: ~1.33×; test all caps separately (add letter spacing).
Avoid identical line heights across sizes—48px line on 40px display is not the same relationship as 24px on 16px body.
Create text styles in Figma
Steps
- Select a text layer with your finalized settings.
- Open the Text section in the right panel → Create style (four-dot icon).
- Name with slash notation:
text/body/md,text/heading/lg. - Repeat for each role; publish from your library file (organize files at scale).
Naming conventions that survive handoff
| Pattern | Example | Why |
|---|---|---|
| Category / role / size | text/body/md | Sorts in libraries |
| Platform prefix (optional) | ios/text/body | When mobile differs |
| State in component, not style | Hover = variant | Keeps style count low |
Do not encode color in text style names unless you truly never reuse the style on another fill—prefer color variables or semantic fills.
Variables vs text styles: division of labor
| Need | Use text styles | Use variables |
|---|---|---|
| Font family, size, weight, line height | Yes | Rarely (except themed families) |
| Semantic text color | Optional style override | Yes (color/text/primary) |
| Spacing between type blocks | Auto layout gap variables | Yes |
| Dark mode copy color | — | Modes on color variables |
Figma text styles still carry most typographic properties in 2026. Variables excel when marketing and product share a file but swap brand colors or density. Deep dive: variables & modes designer-first.
Plugins like Typescales help bootstrap ramps—see best Figma plugins for design systems for when plugins beat manual spreadsheets.
Responsive typography without chaos
You do not need a unique style per breakpoint if hierarchy is consistent.
- Document which roles change size at tablet/desktop (often display + h1 only).
- Use breakpoint frames from responsive design in Figma and swap style on the same component variant where needed.
- Add a spec table on your cover page: “Below 768px,
text/h1→text/h2.”
Common mistake: shrinking body text on mobile below 14px for long paragraphs—labels can go to 12px; body should not.
Pair typography with layout
- Auto layout text frames should hug contents vertically unless multi-line blocks need a fixed min height (Auto Layout in practice).
- Truncation: document
max lines+ ellipsis in component descriptions; Figma does not auto-truncate like CSS—engineers need the rule. - Mixed weights in one paragraph: split into separate text nodes or accept detached overrides (discourage in libraries).
Slide and marketing type often needs wider measure—see slide decks in Figma for projection-safe sizes.
Migration and cleanup
| Source | Issue | Fix |
|---|---|---|
| Sketch import | Font substitution | Rebind styles; Sketch import guide |
| Illustrator SVG text | Outlined paths | Re-type or replace with components |
| Detached instances | Local font swaps | Run style lint; merge to library |
| Missing font (Windows) | Fallback metrics shift | Install fonts |
Quarterly, scan for unstyled text layers in production files during your Figma quarterly check-in.
Handoff: what engineers need
Dev Mode reads text style names and computed CSS when layers use published styles.
Include in specs:
- Font stack fallbacks (
Inter, system-ui, sans-serif). - Letter spacing for labels and buttons.
- Paragraph spacing if not obvious from auto layout gap.
- Tabular figures for data tables (OpenType feature if your font supports it).
Export marketing assets separately—production-ready exports—do not rely on rasterized text for UI.
Common mistakes
| Mistake | Why it hurts | Fix |
|---|---|---|
| 30+ text styles | Nobody remembers names | Merge roles; use variants for color |
| Local font tweaks on instances | Uninspectable drift | Detach only in exploration files |
| px-only spec without line height | Broken vertical rhythm | Always pair size + line |
| Ignoring CJK / RTL | Broken layouts later | Test longest strings early |
FAQ
Should I use Figma variables for font sizes?
Only if you have a proven density mode (compact vs comfortable) synced to code. Most teams should keep size in text styles until engineering consumes size tokens from the same source.
How many font families belong in one product UI?
One sans + optional mono for most apps. Display serifs are fine for marketing pages if documented as a separate font/brand token.
Do text styles work in Dev Mode?
Yes, when layers use published styles from a library. Detached overrides show as raw values—treat that as a lint failure.
What about dark mode type color?
Keep size/weight in text styles; bind fill to semantic color variables with light/dark modes (dark mode design).
Bottom line
Pick a small set of type roles, encode them as named text styles in the library, and use variables for color and theme—not as a substitute for typographic discipline. Stress-test with long copy and imports, document breakpoint swaps, and hand off with **style names engineers can map to CSS`. Browse more setup and systems content on tutorials and design system plugins.
§ Keep reading