Typography Token Exporter
Generate a complete typography token set from a modular scale — export as CSS custom properties, Tailwind theme extension, or JSON for design systems.
Typography Token Exporter
| Step | rem | px |
|---|---|---|
| xs | 0.563 | 9 |
| sm | 0.75 | 12 |
| base | 1 | 16 |
| lg | 1.333 | 21.3 |
| xl | 1.778 | 28.4 |
| 2xl | 2.37 | 37.9 |
| 3xl | 3.16 | 50.6 |
| 4xl | 4.214 | 67.4 |
| 5xl | 5.619 | 89.9 |
| 6xl | 7.492 | 119.9 |
:root {
/* Font families */
--font-family-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif;
--font-family-serif: var(--font-source-serif), Georgia, serif;
--font-family-mono: var(--font-roboto-mono), Menlo, monospace;
/* Font sizes */
--font-size-xs: 0.563rem;
--font-size-sm: 0.75rem;
--font-size-base: 1rem;
--font-size-lg: 1.333rem;
--font-size-xl: 1.778rem;
--font-size-2xl: 2.37rem;
--font-size-3xl: 3.16rem;
--font-size-4xl: 4.214rem;
--font-size-5xl: 5.619rem;
--font-size-6xl: 7.492rem;
}What this typography token exporter does
This typography token exporter generates a complete type token set from a modular scale. Export as CSS custom properties, Tailwind theme extension, or JSON for design systems and engineering handoff.
How to use it
Set your base font size and modular scale ratio.
Configure font families for interface (sans), body (serif), and code (monospace).
Review the generated token names and values across the scale.
Choose your desired format (CSS, Tailwind, or W3C Design Tokens JSON).
Copy or download the production-ready code into your project codebase.
Frequently asked questions
What are typography tokens?
Typography tokens are named design variables for font families, sizes, weights, line heights, and letter spacing. They create a single source of truth shared between design tools (Figma) and code.
Should I use rem or px for typography tokens?
Use rem for font sizes so tokens respect user browser settings and accessibility zoom preferences. Use unitless values for line height, and px for precise hairline borders.
How do I export typography tokens for Tailwind CSS?
Select the Tailwind tab and copy the theme.extend.fontSize and theme.extend.fontFamily snippet directly into your tailwind.config.js file.
Related resources
Custom Type Engineering
Need a custom brand typeface or complete typography system?
Goafreet crafts bespoke Latin and Indic typefaces, authorized script extensions, and corporate font governance for modern digital brands.