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.

1. 1
   Blur the page

   Can you still see the title, major sections, and next action? If everything becomes the same gray block, the hierarchy is too flat.
2. 2
   Read one paragraph

   Use the real device and normal viewing distance. If you lose your place, inspect line length and line height before changing the font.
3. 3
   Count the text styles

   Every distinct size, weight, color, and case treatment should have a job. Near-duplicates usually signal an unfinished system.
4. 4
   Check contrast and zoom

   Measure the actual colors, then test at 200% zoom. A tasteful gray is not useful if the text disappears or the layout breaks.
5. 5
   Judge personality last

   Only reconsider the typeface after the structure reads clearly. A new font cannot rescue weak hierarchy or cramped spacing.

The typography principles are a connected system

Typography is the design of written language in context. The typeface matters, but so do the relationships around it: what gets noticed, how a paragraph moves, where one section ends, and whether the system still works when the content changes.

These six principles cover most of the decisions designers mean when they ask whether the typography is working. Use them as lenses, not separate boxes to check.

Choose a typeface by role, not by stereotype

Categories help you describe construction, not predict personality. A serif is not automatically trustworthy, and a sans serif is not automatically modern. Look at the family’s proportions, stroke contrast, spacing, available styles, language coverage, and behavior at the sizes you need.

Begin with the hardest job on the page. If the project contains long articles, choose the reading face first. If it is an interface, test labels, numbers, error messages, and compact controls. If the identity depends on an expressive title, prove that display face with the actual name and the longest likely headline.

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.

Build a type scale from roles, not a magic ratio

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.

A major third, perfect fourth, or another modular ratio can give you candidate sizes. Keep only the values that produce useful differences in the real layout. Optical size matters more than mathematical purity: a large display face may look smaller than another family at the same CSS value, and a compact mobile screen may need a tighter spread.

: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.

Common typography mistakes are usually system mistakes

A weak type system rarely comes down to one “bad font.” More often, several small decisions pull in different directions: a new style appears for every card, supporting text gets lighter and smaller, long lines fill the viewport, or headings grow without creating a clearer content structure.

Look for patterns across the page before polishing an isolated line. The repair should make the next page easier to design too.

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.

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