Complete Guide to Web Typography in 2026

Variable fonts, fluid type scales with clamp(), optimal line length, font loading performance, and the CSS properties that determine reading quality.

Why Typography Is the Highest-Leverage Design Skill

Typography is the invisible infrastructure of web design. Good typography is literally invisible — readers absorb content without noticing type choices. Poor typography creates friction: eye strain, lost place, re-reading, abandonment. The gap between poor and excellent web typography is mostly a matter of knowing which properties matter and what values work.

Modular Type Scale

A type scale is a set of font sizes related by a consistent mathematical ratio. Sizes derived from the same ratio feel harmonious. Common ratios: 1.25 (Major Third, subtle), 1.333 (Perfect Fourth, the most widely used), 1.5 (Perfect Fifth, dramatic).

:root {
  /* Perfect Fourth scale — ratio 1.333 */
  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1rem;      /*  16px */
  --text-lg:   1.125rem;  /*  18px */
  --text-xl:   1.333rem;  /* ~21px */
  --text-2xl:  1.777rem;  /* ~28px */
  --text-3xl:  2.369rem;  /* ~38px */
  --text-4xl:  3.157rem;  /* ~50px */
}

Fluid Typography with clamp()

h1 {
  /* 28px at 320px viewport → 56px at 1280px */
  font-size: clamp(1.75rem, 3vw + 1rem, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
p {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  line-height: 1.75;
  max-width: 65ch; /* optimal measure */
}

Variable Fonts

@font-face {
  font-family: 'InterVariable';
  src: url('/fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
.heading { font-variation-settings: 'wght' 900, 'opsz' 48; }
.body    { font-variation-settings: 'wght' 400, 'opsz' 16; }

/* Animate weight on hover — only possible with variable fonts */
.nav-link {
  font-variation-settings: 'wght' 400;
  transition: font-variation-settings 0.15s ease;
}
.nav-link:hover { font-variation-settings: 'wght' 600; }

Line Length, Leading, Letter Spacing

Line length (measure): 45–75 characters per line. Use max-width: 65ch on prose containers. Too long = lost place at line end. Too short = choppy reading rhythm.

Line height (leading): 1.6–1.8 for body text. Large headings (32px+) need 1.1–1.3. Always use unitless values so line-height scales with font-size.

Letter spacing: −0.01 to −0.03em for large display headings. Zero for body text. +0.05 to +0.12em for ALL CAPS labels — wider tracking dramatically improves legibility of capitalised text.

Font Loading Performance

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="font" type="font/woff2"
      href="/fonts/InterVariable.woff2" crossorigin>

/* Match fallback metrics to reduce CLS on font swap */
@font-face {
  font-family: 'InterFallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
}

Correct line length, leading, and letter spacing transform average-looking content into genuinely pleasurable reading that keeps users on the page longer.

The Complete Guide to Web Typography in 2026