Typography and Web Fonts

Typography Makes or Breaks Readability

Ever opened a site that looks fine but feels off? Nine times out of ten, it's the typography. The difference between comfortable reading and eye strain comes down to font choice, sizing, spacing, and how you load those fonts.

Here's the ugly truth: font loading alone is responsible for one of the most common CLS (Cumulative Layout Shift) problems — text that reflows when the web font finally arrives, shoving your entire layout around. The tools to fix it exist, but most developers don't know they're there. Let's fix that.

Font Loading: FOUT, FOIT, and font-display

When a browser discovers it needs a web font, it faces a choice: show text immediately in a fallback font, or wait for the web font to download.

FOIT — Flash of Invisible Text

The browser hides text completely while the font downloads. If the font takes 3 seconds, users stare at blank space. This is the default behavior in most browsers (with a timeout of about 3 seconds before falling back).

FOUT — Flash of Unstyled Text

The browser shows text immediately in a system fallback font, then swaps when the web font loads. Users see a brief visual change, but text is always readable.

Controlling the Behavior with font-display

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* Show fallback immediately, swap when ready */
}

Eliminating Layout Shift with size-adjust

The biggest problem with font-display: swap is the layout shift when fonts swap. Different fonts have different metrics — a fallback font's characters might be wider or taller, causing text to reflow.

size-adjust lets you scale a fallback font to match the web font's metrics:

/* Step 1: Define the web font */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

/* Step 2: Define a metric-matched fallback */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;       /* Scale to match Inter's character width */
  ascent-override: 90%;    /* Match Inter's ascender height */
  descent-override: 22%;   /* Match Inter's descender depth */
  line-gap-override: 0%;   /* Match Inter's line gap */
}

body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
}

When the browser shows Arial as a fallback, the size-adjust and metric overrides make it take up almost exactly the same space as Inter. When Inter loads and swaps in, there's minimal or zero layout shift.

Variable Fonts

Traditional fonts ship separate files for each weight and style — Regular, Bold, Italic, Bold Italic. A site using four weights loads four files.

Variable fonts pack an entire design space into one file:

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 100 900; /* Supports any weight in this range */
  font-display: swap;
}

body {
  font-family: 'Inter Variable', sans-serif;
  font-weight: 400;       /* Regular */
}

h1 {
  font-weight: 720;       /* Not just 700 — any value in the range */
}

.subtle {
  font-weight: 350;       /* Between light and regular */
}

Performance advantage: One variable font file (~100-200KB) replaces multiple static font files (often 400KB+ total). Single HTTP request, single parse.

Design advantage: You can use any weight value, not just the traditional 100/200/300/.../900 steps. Plus axes for width, optical size, slant, and custom axes.

Typography System Best Practices

Now let's put it all together into a system you can actually use.

Fluid Typography with clamp()

:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1rem + 1.2vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1rem + 2.4vw, 2.25rem);
  --text-3xl: clamp(1.875rem, 1rem + 4vw, 3rem);
}

Line Height, Letter Spacing, and Measure

body {
  font-size: var(--text-base);
  line-height: 1.6;        /* Unitless — scales with font-size */
  letter-spacing: -0.01em; /* Slight tightening for body text */
}

h1, h2, h3 {
  line-height: 1.2;        /* Tighter for headings */
  letter-spacing: -0.02em; /* Headings look better slightly tighter */
}

.prose {
  max-width: 65ch; /* Optimal reading measure: 45-75 characters per line */
}

System Font Stacks

/* Modern system font stack — fast, no download */
body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen-Sans,
    Ubuntu,
    Cantarell,
    'Helvetica Neue',
    sans-serif;
}

/* Simplified — system-ui keyword */
body {
  font-family: system-ui, sans-serif;
}

/* Monospace for code */
code {
  font-family:
    'JetBrains Mono',
    'Fira Code',
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
}