How to opentype metrics tables: complete reference
- Step 1head table — unitsPerEm: coordinate scale (typically 1000 or 2048). xMin/yMin/xMax/yMax: bounding box of all glyphs. Required by every font; carries the foundational metrics.
- Step 2hhea table — Horizontal Header. ascender, descender, lineGap — Apple-traditional metrics. Used by macOS for line layout pre-2015 and by some legacy renderers. Modern browsers prefer OS/2 if USE_TYPO_METRICS is set.
- Step 3OS/2 table — sTypoAscender/Descender/LineGap = designer-intended metrics. usWinAscent/Descent = Windows clipping bounds (must include diacritics). USE_TYPO_METRICS flag in fsSelection (bit 7) tells modern browsers to prefer typo.
Frequently asked questions
Why three sets of metrics?+
Historical accident. Apple's hhea predates OpenType; Microsoft's OS/2 was added later and ended up with two variants (typo for designers, win for Windows clipping). Modern fonts populate all three; the renderer decides which to use.
What is USE_TYPO_METRICS?+
Bit 7 in OS/2 fsSelection. When set, browsers and modern OSes use sTypo metrics (designer-intended). When unset, they use usWin metrics (which include diacritic clearance — usually larger). Most fonts since 2015 set this bit.
Why does line-height matter?+
Browsers compute the natural line-height from the chosen ascender + descender + line-gap. Different metrics → different natural line-height. CSS line-height overrides this; without an override, the natural value applies.
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.