How to build a typography token system for your design system
- Step 1Define raw scale tokens — --font-size-xs through --font-size-3xl. Generator emits this scale based on your base + ratio.
- Step 2Add semantic role tokens — --font-display: var(--font-size-3xl); --font-heading: var(--font-size-2xl); --font-body: var(--font-size-base); --font-caption: var(--font-size-sm); --font-code: var(--font-size-sm). Roles point to scale steps.
- Step 3Use semantic tokens in components — h1 { font-size: var(--font-display); } body { font-size: var(--font-body); }. Components reference roles; design changes adjust the role binding without touching component CSS.
Frequently asked questions
Why not just use the scale tokens directly?+
Coupling components to scale steps means redesigns require touching every component. Semantic roles (--font-heading) decouple — change the role binding once, every heading updates.
How granular should role tokens be?+
Match your component library's typography roles. Common: display, heading, subheading, body, caption, code, label. 5–8 roles cover most design systems; more becomes hard to remember.
Can I theme with role tokens?+
Yes. Define [data-theme="dense"] :root { --font-display: var(--font-size-2xl); ... } overrides. Same components render at different scales per theme. Great for product variants and accessibility modes.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.