How to use font metrics for perfect vertical rhythm
- Step 1Capture metrics for every font — Run the Metrics Analyser against your body, heading, and code fonts. Capture UPM, ascender, descender, x-height, cap-height per font.
- Step 2Calculate per-font line-height — line-height = (ascender + |descender| + line-gap) / UPM. Round up slightly for safety. Different fonts get different line-heights to maintain consistent vertical space.
- Step 3Match cap-heights for headings — If your heading font has cap-height 720/1000 and body has 680/1000, the heading appears slightly larger at the same font-size. Compensate with a smaller font-size on headings (or accept the visual variance).
Frequently asked questions
Why doesn't line-height: 1.5 work for everything?+
1.5 is a reasonable default for many fonts but ignores per-font metrics. Fonts with tall ascenders need 1.6+; fonts with shallow descenders can use 1.4. The Metrics Analyser tells you the right value.
Does font-size affect metrics?+
Metrics are font-internal coordinates (in UPM units). Scaled to whatever font-size you set. UPM is invariant — same metrics at every size.
What about line-height as a unitless number vs px?+
Always use unitless (line-height: 1.5, not 24px). Unitless inherits as a multiplier — children at smaller font-sizes get proportionally smaller line-heights. Pixel values inherit literally and break vertical rhythm.
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.