Typography Studio

Configure your design system's typography with real-time preview.

Getting started

Typography Studio opens in edit mode: a focused workspace without the sidebar. Access it from the sidebar menu under Typography.

Layout

Panel	Purpose
Left	Configuration: font sources, families, scale, text styles
Right	Preview: see typography in realistic contexts
Bottom	Status, export, and save

Font sources

Add fonts from multiple sources:

• Google Fonts: search 1,500+ free fonts
• URL / CDN: Adobe Fonts, Fontshare, or custom CDN
• Upload: self-hosted .woff2, .woff, .ttf files
• System Fonts: native fonts with no loading time

Adding Google Fonts

1. Click + Add font in the Font Sources section
2. Select Google Fonts
3. Search by name or browse categories
4. Select weights to include (400, 500, 600, 700)
5. Click Add: font loads immediately

Families

Map fonts to semantic roles:

Role	Description	Example
Headings	H1, H6 text	Fraunces
Body	Paragraphs, UI text	Inter
Mono	Code blocks	JetBrains Mono
Display	Hero headlines	Fraunces
UI	Buttons, labels	Inter
Accent	Special emphasis	Fraunces

Tip: Enable "Single font family" to use one font for all roles: common for minimal designs.

Scale

Configure your type scale.

Base size

The foundation: typically 16px for web. All other sizes derive from this.

Scale ratio

How sizes grow between steps:

Ratio	Name	Best for
1.125	Major Second	Dashboards, data-dense UIs
1.200	Minor Third	General apps
1.250	Major Third	Most websites (recommended)
1.333	Perfect Fourth	Editorial, marketing
1.414	Augmented Fourth	Landing pages
1.618	Golden Ratio	Maximum expression

Fluid sizing

Enable to automatically scale typography between viewport sizes. Typography smoothly transitions from mobile to desktop without breakpoints.

Preview

The right panel shows your typography in context:

Tab	Shows
Article	Long-form content with headings, body, and captions
Dashboard	Stats, tables, and UI elements
Marketing	Hero sections and feature grids

Preview controls

• Light/Dark: toggle background color
• Mobile/Desktop: test responsive sizing
• Grid: show baseline alignment

Saving and exporting

Save draft

Saves to your design system. Other team members won't see changes until published.

Publish

Makes changes live for all team members and exports to connected tools.

Export

Download typography as:

• CSS Variables: custom properties for web
• JSON Tokens: design token format for tools like Tokens Studio

Contexts

Contexts let one design system vary by surface: Marketing, Editorial, Slides, Email: while staying the same brand. The selector in the studio header switches between them:

• Base is your brand truth. Editing on Base changes the design system itself.
• Other contexts inherit from Base live. A context stores only what you override there; everything else follows Base automatically: change a Base font and every context that didn't override it updates too.
• Setting a value back to its Base value removes the override, so the context resumes inheriting.

The switch is design-system-wide, not per-studio: picking a context here moves Typography, Color, and Icons (and token views) to the same lens. Use Add context in the selector to create a new one: it starts as a transparent overlay on Base with no overrides.

Tips

1. Start with presets: use "Import existing" to load curated starting points
2. Preview often: switch between Article/Dashboard/Marketing to catch issues
3. Test both themes: check light and dark mode
4. Use fluid sizing: eliminates most responsive typography issues
5. Limit fonts: 2-3 fonts maximum for cohesion