How to generate typography design tokens from font metrics
- Step 1Walk fonts directory — fs.readdir(input). For each font, parse with opentype.js, extract UPM + ascender + descender + line-gap + x-height + cap-height.
- Step 2Compute tokens — Per-font line-height = (ascender + |descender| + line-gap) / UPM. x-height-ratio = x-height / UPM. cap-height-ratio = cap-height / UPM.
- Step 3Emit tokens JSON — { "line-height": { "$value": 1.485, "$type": "number" }, "x-height-ratio": { "$value": 0.515, "$type": "number" } }. Style Dictionary consumes; produces CSS custom properties.
Frequently asked questions
Why ratios instead of absolute values?+
Ratios are font-size-invariant. x-height of 515 (out of 1000 UPM) gives ratio 0.515; at 16px font-size, x-height = 8.24px; at 24px = 12.36px. The ratio is the universal token; the px value is derived.
Should I store typo or win metrics?+
Store both — the script emits both. Choose at consumption time based on USE_TYPO_METRICS detection or default to typo. Most modern fonts set the flag correctly.
Can I generate fallback overrides too?+
Yes — extend the script to compare web font metrics against system font baselines (Arial, Helvetica, system-ui). Emit ascent-override, descent-override, size-adjust values per fallback combination. Drop into @font-face blocks.
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.