Font metrics
The hidden measurements that tell software where letters sit, how far the cursor moves, and how much room each line needs.
See it
What it is
Font metrics are the measurements a font supplies so software knows where to put its glyphs. Ascent and descent place text above and below the baseline; line gap contributes extra vertical room; advance widths and side bearings move the cursor from one glyph to the next. These numbers live in tables such as OS/2, hhea, and hmtx, and they govern layout even though readers never see them.
Reach for the metrics when two fonts at the same CSS font-size occupy different space, a fallback makes the page jump before the webfont loads, or a line box clips tall accents and deep descenders. CSS 'size-adjust', 'ascent-override', 'descent-override', and 'line-gap-override' let an @font-face fallback imitate the webfont closely enough to reduce layout shift. Next.js does this for you: 'next/font' reads the real font's metrics at build time and emits a matched local fallback so the swap barely moves the page.
Gotcha: the em square is not a tight box around the visible letters. A font can reserve space beyond its tallest and lowest outlines, and font-size scales that design grid rather than promising a particular cap height. Do not trim or override metrics by eye on one sample word; test capitals, accents, math marks, and descenders first or the neat box will become a clipping mask.
Ask AI for it
Match the fallback font to this webfont and reduce Cumulative Layout Shift. Read the webfont's OS/2, hhea, and hmtx tables with fontTools, then generate an @font-face fallback using 'size-adjust', 'ascent-override', 'descent-override', and 'line-gap-override'. Keep the real font as the first face in the CSS font-family stack. Build a specimen containing capitals, lowercase, accents, parentheses, and deep descenders, compare both faces at 16px and 64px, and verify in Chrome DevTools that the swap produces no clipped glyphs and a lower Cumulative Layout Shift score.