How to pipe typography tokens through style dictionary
- Step 1Generate tokens JSON — Run the JAD Typography Generator → output JSON in W3C Design Tokens format ({ 'font-size-base': { '$value': '1rem', '$type': 'dimension' } }).
- Step 2Configure Style Dictionary — config.json: { 'platforms': { 'css': { 'transformGroup': 'css' }, 'ios': { 'transformGroup': 'ios-swift' }, 'android': { 'transformGroup': 'android' } } }. Each platform gets a transform pipeline that converts the tokens to its conventions.
- Step 3Build per platform — npx style-dictionary build. Outputs: dist/css/typography.css, dist/ios/Typography.swift, dist/android/typography.xml. Each consumed by its platform's component library.
Frequently asked questions
Why W3C Design Tokens format?+
Style Dictionary supports it natively, plus other tooling (Figma Token Studio, Backlight) reads it. Standardising on the format makes tokens portable across the design tooling ecosystem.
What about font-family across platforms?+
iOS and Android use different font-family naming. Style Dictionary transforms can map web 'Inter' to iOS 'Inter-Regular' to Android 'inter_regular.ttf'. Define the mapping once; pipeline handles the rest.
Can I theme cross-platform?+
Yes — Style Dictionary supports theme overrides. Define base tokens + dark theme overrides; each platform's output includes both. Apps switch at runtime.
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.