Web Typography Best Practices: Readability, Scale, and Performance

Typography is the foundation of web design. Good typography makes content inviting and effortless to read. Bad typography—even with great visual design—creates friction that drives users away. Getting typography right requires balancing readability, visual hierarchy, and performance.

Establishing a Modular Type Scale

A modular scale ensures type sizes relate harmoniously rather than being chosen arbitrarily. Start with a base size (16 px for body text) and multiply by a ratio:

:root {
  --ratio: 1.25; /* Major third */
  --text-xs: calc(1rem / var(--ratio) / var(--ratio));
  --text-sm: calc(1rem / var(--ratio));
  --text-base: 1rem;
  --text-lg: calc(1rem * var(--ratio));
  --text-xl: calc(1rem * var(--ratio) * var(--ratio));
  --text-2xl: calc(1rem * var(--ratio) * var(--ratio) * var(--ratio));
  --text-3xl: calc(1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));
  --text-4xl: calc(1rem * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));
}

Common ratios: 1.250 (major third) for dense content, 1.333 (perfect fourth) for generous spacing, 1.618 (golden ratio) for dramatic headlines. Match the ratio to your content density. A blogging platform needs a tighter scale than a marketing landing page.

For responsive typography, use clamp() to fluidly scale between minimum and maximum values:

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  line-height: 1.1;
}

Measure, Line Height, and Readability

The measure (line length) should be 45–75 characters for optimal readability. Beyond 75 characters, the eye struggles to track lines. Below 45, lines break too frequently:

.content {
  max-width: 65ch;
  margin-inline: auto;
}

.content-wide {
  max-width: 75ch;
}

Line height scales with font size. Body text at 16 px needs more breathing room (1.5–1.7) than headlines (1.1–1.3):

body {
  font-size: 1rem;
  line-height: 1.6;
}

h1, h2, h3 {
  line-height: 1.2;
}

The ch unit is your best friend for measure. It's relative to the width of the zero character in the current font, making it font-responsive.

Visual Hierarchy Through Weight and Space

Hierarchy isn't just size—it's weight, spacing, and color working together. Use font-weight variation to differentiate levels without relying solely on size:

h1 {
  font-weight: 800;
  margin-block: 1.5rem 1rem;
}

h2 {
  font-weight: 700;
  margin-block: 1.25rem 0.75rem;
}

h3 {
  font-weight: 600;
  margin-block: 1rem 0.5rem;
}

p + p {
  margin-block-start: 0.75rem;
}

Space is part of your typography system. Use consistent margin values that follow the same modular scale as your type sizes.

Responsive Type Without Breakpoints

Fluid typography scales continuously between viewport sizes. Use clamp() with viewport units and a preferred value:

:root {
  --fluid-min: 1rem;
  --fluid-max: 1.25rem;
  --fluid-slope: 0.5vw;

  --text-body: clamp(var(--fluid-min), var(--fluid-min) + var(--fluid-slope), var(--fluid-max));
  --text-h1: clamp(2rem, 1rem + 3vw, 4rem);
  --text-h2: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

Apply with custom properties throughout your CSS. This eliminates breakpoint-specific font sizes entirely.

Performance-Optimized Font Delivery

Typography and performance often conflict—custom fonts are the heaviest resource per byte of visible content. Mitigate with these strategies:

Variable fonts store multiple weights and widths in one file. Inter Variable replaces 12 separate weight files with one 250 KB WOFF2. For Latin-only content, subset it to 35 KB.

Preload critical fonts for above-the-fold content only:

<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin />

Use font-display: swap with fallback alignment to prevent FOIT and reduce CLS:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap;
  size-adjust: 98%;
  ascent-override: 90%;
}

The size-adjust minimizes layout shift during the font swap. The fallback system font occupies similar space, so readers barely notice the swap.

System Fonts as a Valid Choice

System font stacks load instantly and never cause layout shift. They're often the best choice for dashboards, admin panels, and performance-critical contexts:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

Each OS serves its native typeface, optimized for that platform's rendering engine. Users never wait for fonts, and text is legible immediately.

Typography is the primary vehicle for your content. Invest in the fundamentals—scale, measure, hierarchy, and performance—and every page becomes more readable, more accessible, and more professional.

Our custom UI/UX design team applies systematic typography to every project, creating readable, performant, and beautiful interfaces.