You’re all set!
Your Typography Audit Checklist will arrive in your inbox within a few minutes
Upgrade your workflow with the Typography Foundation Operating kit
–50% Early bird
Typography Foundation
Operating kit
Structure, document, and standardize type decisions across product, from scales and tokens to real usage rules
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 2 0.999 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 0.999 Z M 2 5.999 C 2 6.552 1.552 7 0.999 7 C 0.447 7 0 6.552 0 5.999 C 0 5.447 0.447 5 0.999 5 C 1.552 5 2 5.447 2 5.999 Z M 2 11 C 2 11.552 1.552 12 0.999 12 C 0.447 12 0 11.552 0 11 C 0 10.447 0.447 10 0.999 10 C 1.552 10 2 10.447 2 11 Z M 7.001 1 C 7.001 1.552 6.553 2 6 2 C 5.448 2 5.001 1.552 5.001 1 C 5.001 0.447 5.448 0 6 0 C 6.553 0 7.001 0.447 7.001 1 Z M 7.001 11 C 7.001 11.552 6.553 12 6 12 C 5.448 12 5.001 11.552 5.001 11 C 5.001 10.447 5.448 10 6 10 C 6.553 10 7.001 10.447 7.001 11 Z M 7.001 5.999 C 7.001 6.552 6.553 7 6 7 C 5.448 7 5.001 6.552 5.001 5.999 C 5.001 5.447 5.448 5 6 5 C 6.553 5 7.001 5.447 7.001 5.999 Z M 12 0.999 C 12 1.552 11.552 2 11 2 C 10.447 2 10 1.552 10 0.999 C 10 0.447 10.447 0 11 0 C 11.552 0 12 0.447 12 0.999 Z M 12 5.999 C 12 6.552 11.552 7 11 7 C 10.447 7 10 6.552 10 5.999 C 10 5.447 10.447 5 11 5 C 11.552 5 12 5.447 12 5.999 Z M 12 11 C 12 11.552 11.552 12 11 12 C 10.447 12 10 11.552 10 11 C 10 10.447 10.447 10 11 10 C 11.552 10 12 10.447 12 11 Z" fill="transparent" height="12px" id="gZ_6yT935" transform="translate(6 6)" width="12px"><path d="M 2 0.999 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 0.999 Z" fill="rgb(0, 0, 0)" height="2px" id="d76CSTZg5" width="2px"/><path d="M 2 0.999 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 0.999 Z" fill="rgb(0, 0, 0)" height="2px" id="nSjpRgRRw" transform="translate(0 5)" width="2px"/><path d="M 2 1 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 1 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 1 Z" fill="rgb(0, 0, 0)" height="2px" id="Iyb5VI2nv" transform="translate(0 10)" width="2px"/><path d="M 2 0.999 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 0.999 Z" fill="rgb(0, 0, 0)" height="2px" id="cPyEpAAHS" transform="translate(5.001 0)" width="2px"/><path d="M 2 1 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 1 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 1 Z" fill="rgb(0, 0, 0)" height="2px" id="lBWIvk_Yk" transform="translate(5.001 10)" width="2px"/><path d="M 2 0.999 C 2 1.552 1.552 2 0.999 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 0.999 0 C 1.552 0 2 0.447 2 0.999 Z" fill="rgb(0, 0, 0)" height="2px" id="SvL59pmqT" transform="translate(5.001 5)" width="2px"/><path d="M 2 0.999 C 2 1.552 1.552 2 1 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 1 0 C 1.552 0 2 0.447 2 0.999 Z" fill="rgb(0, 0, 0)" height="2px" id="RQFvPDDI_" transform="translate(10 0)" width="2px"/><path d="M 2 0.999 C 2 1.552 1.552 2 1 2 C 0.447 2 0 1.552 0 0.999 C 0 0.447 0.447 0 1 0 C 1.552 0 2 0.447 2 0.999 Z" fill="rgb(0, 0, 0)" height="2px" id="oxOAeh3nS" transform="translate(10 5)" width="2px"/><path d="M 2 1 C 2 1.552 1.552 2 1 2 C 0.447 2 0 1.552 0 1 C 0 0.447 0.447 0 1 0 C 1.552 0 2 0.447 2 1 Z" fill="rgb(0, 0, 0)" height="2px" id="iZoJk48xe" transform="translate(10 10)" width="2px"/></g></svg>)
Trusted by professionals from
Clarity, consistency, and structure for your Typography System
Define how typography is built, used, and maintained across Figma and system documentation
01
Define typography once
Set up scales, variables, and semantic styles in Figma so sizes, hierarchy, and spacing aren’t re-decided per screen
02
Align usage across the system
Document typography principles roles, and rules in Notion so teams know what to use and why
03
Keep typography stable as it grows
Use tokens, responsive rules, and accessibility constraints to evolve typography without breaking layouts
typography system
•
Semantic structure
•
Token-based
•
Responsive
•
documentation
•
Pricing
One simple price with full access and future updates included
Typography Foundation
Operating kit
Complete typography toolkit for building, documenting, and maintaining a scalable type system
$49.5
Template
Typography System
Template
Typography Documentation
Figma typography system setup
Semantic text structure
Token-based typography
Responsive typography rules
Notion documentation for usage & maintenance
Available January 19, 2026
Training budget friendly
This purchase can usually be reimbursed through professional development or learning programs
$0
You get full access to the complete toolkit, identical to everything included in the standard paid plan.
🏄♂️
Head of UX at Voly Ltd
Save 24–36 hours on Typography System work
Typography Foundation removes the slowest, most repetitive parts of typography setup and maintenance
Who it’s for
For designers working with product typography who want clear rules, consistency, and a system that holds over time
Starting a Typography System
For designers defining typography from scratch. Helps set up scales, semantic styles, and core rules without overengineering
Fixing a messy Typography setup
For designers with existing styles but no structure. Helps remove duplication, align semantics, and systematize decisions
Scaling and maintaining Typography
For teams managing typography across products or screens. Helps keep type consistent with clear rules and documentation
Questions
Still have questions?
We’re happy to help — just reach out at hey@designsystems.surf
By subscribing you agree to our privacy policy & cookie policy and to receive marketing and account-related emails from Designsystems.surf. You can unsubscribe at any time.