--- title: Web Typography: Loading, Scale and Metrics description: Font loading strategy, variable fonts, fallback metric matching and a clamp-based scale that holds up without shifting the layout when the webfont arrives. canonical: https://www.hire-web-dev.com/journal/web-typography/ section: Journal updated: 2026-09-11 author: SumanKumar Phuyal site: hire-web-dev.com note: >- Generated from the page of record at the canonical URL above. The four case studies are placeholder work and their metrics were never measured; imagery is AI-generated concept art. See https://www.hire-web-dev.com/disclosure/. --- # TYPOGRAPHY ON THE WEB The part of frontend work where the defaults are most wrong and the fixes are cheapest. Also the thing I keep having to relearn every couple of years. ## Line length and line height The single highest-value adjustment is constraining measure. Body text wants roughly sixty to seventy-five characters per line; a paragraph spanning a 1600-pixel viewport is genuinely tiring to read because the eye loses its place on the return sweep. A max-width in ch units solves it in one line and does more for readability than any font choice. Line height should vary with size, which the defaults don't do. Body text at around 1.75 to 1.85; a large display heading closer to 0.95 to 1.05, because the same ratio that reads comfortably at sixteen pixels looks like unrelated lines at seventy-two. I set it per size rather than once globally. ## Loading without the jump A web font that arrives late and reflows the page is both a visual annoyance and a real layout-shift penalty. Preload the weights actually used, serve woff2, use font-display: swap, and — the part most often skipped — pick a fallback with similar metrics so the swap doesn't move anything. Size-adjust descriptors let you tune the fallback to match, which makes the substitution nearly invisible. Also ship fewer weights. Four weights of two families is around two hundred kilobytes for a distinction most readers won't consciously register. Two weights, chosen well, will usually look more considered rather than less. ## Small details worth the time Tabular figures for anything in a column that updates, so digits stop jittering. Proper hyphenation for narrow columns. Letter-spacing tightened slightly on large display sizes and opened up on small uppercase monospace labels. None of these are noticed individually; together they're most of the difference between typography that feels deliberate and typography that feels defaulted. ## Key facts - Entry: 07 - Subject: Type - Cost of fixes: Low - Impact: High ## Checklist - Measure: 60 — 75 ch - Line height: Varies with size - Fallback: Match the metrics - Figures: Tabular in columns ## Topics MEASURE, LINE HEIGHT, FONT-DISPLAY, SIZE-ADJUST, TABULAR FIGURES, CLS ## Image ![The words CODE MOTION EXPERIENCE built as faceted glass three-dimensional letterforms, type as objects](https://www.hire-web-dev.com/assets/img/web-typography-three-dimensional-glass-lettering.jpg)