How to generate system font stacks programmatically
- Step 1Generate per stack/OS — Programmatic helper: getSystemStack('sans-serif', 'all') → full multi-OS stack. getSystemStack('sans-serif', 'mac') → just Mac.
- Step 2Emit as design tokens — { 'font-system-sans-all': { '$value': '...', '$type': 'fontFamily' }, 'font-system-sans-mac': { ... } }. Style Dictionary transforms to CSS, Swift, etc.
- Step 3Consume per platform — Web: var(--font-system-sans-all). iOS: UIFont.preferredFont(ofType: .systemFont) — natively built in. Android: android:fontFamily="sans-serif". Native platforms have their own system font conventions.
Frequently asked questions
Can I theme the stack per locale?+
Yes — different locales prefer different system fonts (CJK: Hiragino Sans GB on macOS, Microsoft YaHei on Windows). Define per-locale stacks; swap based on document lang attribute.
What about ui-* generic families?+
ui-sans-serif, ui-serif, ui-monospace are CSS-only (web). For iOS/Android tokens, the native platforms have their own system font APIs that the JAD generator respects.
Do system stacks need versioning?+
Rarely change — Apple, Microsoft, Google rename their UI fonts every 5–10 years at most. When a rename happens (e.g., Helvetica Neue → San Francisco in 2014), update the token. Otherwise the stack is set-and-forget.
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.