Sketch Font Workflow Guide
Master font management in Sketch designs and ensure seamless handoff to web development. Learn plugin workflows, design tokens, style synchronization, and typography export strategies.
TL;DR - Key Takeaways
- • Sketch uses locally installed macOS fonts—ensure developers have access
- • Use Text Styles to maintain typography consistency across artboards
- • Plugins like Sketch Measure or Zeplin provide developer-friendly specs
- • Export font tokens using design system plugins for automated sync
In this article
Sketch remains a popular choice for macOS-based design teams, particularly for web and app design. Unlike cloud-based tools like Figma, Sketch works with locally installed fonts, which requires explicit font sharing and management strategies between designers and developers.
This guide covers the complete workflow from setting up fonts in Sketch, creating maintainable Text Styles, exporting typography specifications for development, and converting font files for web use while respecting licensing requirements.
The key advantage of Sketch's local font approach is direct access to high-quality fonts installed on your system. The challenge is ensuring those same fonts are available for web deployment through proper licensing and format conversion.
Font Management in Sketch
Sketch pulls fonts from macOS Font Book. Understanding how fonts are organized helps maintain consistency.
Font Sources in Sketch
System Fonts
Fonts in /Library/Fonts and ~/Library/Fonts are available in Sketch. These are shared across all macOS applications.
Font Book Collections
Create collections in Font Book to organize project-specific fonts. Disable fonts you don't need to speed up Sketch.
Missing Fonts Alert
When opening a Sketch file, you'll see a missing fonts dialog if any used fonts aren't installed. Document these fonts for developer handoff.
Tip: Always include a FONTS.md file in your design repository listing required fonts and their sources.
Creating Text Styles
Text Styles are Sketch's system for maintaining consistent typography. They're essential for scalable design systems.
Text Style Best Practices
Naming Convention
Use hierarchical naming for organization. Separate levels with slashes.
Heading/H1
Heading/H2
Body/Regular
Body/Bold
Caption/Small
Include All Properties
Each Text Style should define font family, weight, size, line height, letter spacing, and paragraph spacing for complete developer specifications.
Exported CSS from Text Styles:
.heading-h1 {
font-family: "SF Pro Display";
font-size: 48px;
font-weight: 700;
line-height: 56px;
letter-spacing: -0.5px;
}
.body-regular {
font-family: "Inter";
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0;
}Plugins for Font Export
Several Sketch plugins facilitate font specification export and developer handoff.
Zeplin
Industry-standard handoff tool. Syncs designs and provides CSS/code snippets for typography including font-family, weights, and sizing.
Sketch Measure
Free plugin for creating design specs. Exports HTML with interactive measurements and typography details.
Design Tokens Plugin
Exports Text Styles as JSON tokens compatible with Style Dictionary. Enables automated CSS generation.
Abstract
Version control for Sketch with built-in handoff. Tracks typography changes across design versions.
Design Token Export
For larger projects, export typography as design tokens for automated CSS/Tailwind generation.
Token Structure
{
"typography": {
"heading": {
"h1": {
"fontFamily": { "value": "SF Pro Display" },
"fontSize": { "value": "48px" },
"fontWeight": { "value": "700" },
"lineHeight": { "value": "56px" },
"letterSpacing": { "value": "-0.5px" }
},
"h2": {
"fontFamily": { "value": "SF Pro Display" },
"fontSize": { "value": "36px" },
"fontWeight": { "value": "600" },
"lineHeight": { "value": "44px" }
}
},
"body": {
"regular": {
"fontFamily": { "value": "Inter" },
"fontSize": { "value": "16px" },
"fontWeight": { "value": "400" },
"lineHeight": { "value": "24px" }
}
}
}
}Token Pipeline
Use Style Dictionary to transform tokens into CSS custom properties, Tailwind config, or iOS/Android constants. This creates a single source of truth for typography across platforms.
Convert Your Sketch Fonts
Export fonts from your Sketch designs and convert them to optimized WOFF2 for web use.
Start Converting Fonts
Written & Verified by
Sarah Mitchell
Product Designer, Font Specialist
Sketch Font Workflow FAQs
Common questions about Sketch design font workflows