Typography Principles for Designers Font Pairing, Hierarchy & Spacing

Start with a five-minute type audit

If a page feels almost right, do not open the font menu yet. The problem is usually more basic: the levels are too similar, the text column is too wide, the spacing is cramped, or the contrast is doing less work than it looked like it would in Figma.

Audit the system in the order a reader experiences it. Structure first. Reading comfort second. Typeface personality last.

Fix hierarchy before you fix fonts

Hierarchy answers a simple question: what should someone notice first, second, and third? If every heading is large, every label is bold, and every card has its own style, the reader has to reconstruct the system for you.

Start with the smallest inventory that explains the page: a display or page title, a section heading, body text, and a small label or caption. Add a level only when the content has a real level to express.

Treat a type scale as an inventory, not a law

A ratio can generate numbers. It cannot decide whether your product needs five text levels or whether a 52-pixel heading fits a German translation. Pick a short set of sizes that creates the distinctions your content needs, then test it with the longest real labels and headlines.

:root {
  --text-label: 0.875rem;
  --text-body: 1rem;
  --text-subhead: 1.25rem;
  --text-section: 1.75rem;
  --text-display: clamp(2.25rem, 5vw, 4.5rem);
}

Spacing, line height, and measure do most of the reading work

Type does not become readable because a formula says so. It becomes readable when the specific font, size, line length, contrast, and context work together. Use the numbers below as starting points, then adjust while reading the actual content.

Pair fonts with a job in mind

“These fonts look good together” is not a system. A second family should solve a problem: create a stronger editorial voice, make dense reading quieter, separate data from prose, or give display text a useful contrast.

If one family can create the hierarchy, use one. Consistency is not a lack of creativity. It gives the content a stable structure and leaves more room for color, imagery, and layout to carry personality.

Need combinations to try? Use the portfolio font-pairing guide, or preview your own words in the font-pairing tool. Treat both as a starting point, then come back to the real page.

Responsive and accessible type is type that survives change

The clean desktop frame is only one state. Text gets zoomed, translated, enlarged, replaced by user styles, and read on screens with very different widths and brightness. A type system is finished when it can absorb those changes without losing meaning or function.

h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  max-width: 14ch;
}

Contrast is measurable, but the threshold is not the finish line

WCAG 2.2 Level AA requires at least 4.5:1 contrast for normal text and 3:1 for large text. Check the actual foreground and background colors. Then test the weight and typeface in context, because two designs at the same ratio can still feel very different to read.

Use web fonts without turning them into a loading problem

A font file is part of the interface. It can delay text, shift the layout, or fail. Use WOFF2, request only the weights and character sets the page needs, and choose fallbacks that occupy similar space.

Do not preload every font. Preload only a truly critical file, and choose font-display based on the tradeoff you want. swap shows text quickly but can shift when the font arrives. optional avoids a late swap but may keep the fallback on a slow connection.

@font-face {
  font-family: "Project Sans";
  src: url("/fonts/project-sans-variable.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 700;
}

body {
  font-family: "Project Sans", ui-sans-serif, system-ui, sans-serif;
}

Before you ship the type system

Do this on the rendered page, not only in the design file. A checklist is useful when it catches something you can fix, not when it produces a perfect score.

• A first-time reader can identify the page, sections, and next action without reading every word.
• Body text is comfortable on a real phone and a laptop, not only in the design canvas.
• Long text blocks have a deliberate maximum width instead of stretching across the screen.
• Headings have more separation from the previous section than from the text they introduce.
• Normal text reaches 4.5:1 contrast and meaning never depends on color alone.
• The layout still works at 200% zoom and with user-defined text spacing.
• Font files cover every language and symbol the product actually needs.
• Only the weights, styles, and font files used by the page are requested.
• Fallback fonts are close enough that loading does not destroy the layout.
• The type choices support the content instead of becoming the content.

Standards and implementation sources

The practical ranges in this guide are starting points, not accessibility standards. These are the current primary references behind the requirements and font-loading guidance:

• WCAG 2.2: Contrast Minimum
• WCAG 2.2: Understanding Text Spacing
• WCAG 2.2: Resize Text
• web.dev: Best Practices for Fonts