How to generate type scales in ci pipelines
- Step 1Generate tokens JSON — Run the Type Scale Builder via API or Node port. Output W3C Design Tokens format with rem values.
- Step 2Pipe through Style Dictionary — Configure platforms: css (transforms rem to var()), ios (transforms to UIKit point values), android (transforms to sp values in dimens.xml).
- Step 3Consume per platform — Web: import the CSS file. iOS: include Typography.swift. Android: dimens.xml gets compiled into resources. All three platforms render the same visual scale.
Frequently asked questions
How do rem values translate to iOS pt?+
1 rem typically = 16 pt on iOS (based on a 16px web base). Conversion: rem × 16. Same numeric value, different unit. Style Dictionary handles the conversion via transformGroup.
What about Android sp?+
sp (scale-independent pixels) respects the user's font-scale setting. 16sp at default = 16dp. Conversion: rem × 16 → sp value. Same scale across platforms.
Can I emit CSS clamp() expressions?+
Yes — Style Dictionary supports custom transforms. Emit clamp() for web (fluid scaling) and discrete sizes for iOS/Android (no fluid). Same source; platform-appropriate output.
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.