Typography Scales & Font Pairing

What Is a Modular Type Scale?

A modular type scale is a sequence of font sizes generated by multiplying a base size by a consistent ratio. This creates a harmonious visual rhythm where each step feels proportionally related to the others, similar to musical intervals.

For example, with a base of 16px and a Major Third ratio (1.25), your scale becomes: 10px → 13px → 16px → 20px → 25px → 31px → 39px → 49px.

Common Scale Ratios

Smaller ratios (1.067–1.2) work well for data-heavy interfaces. Larger ratios (1.333–1.618) create more dramatic contrast, ideal for marketing pages and editorial layouts.

Implementing a Type Scale in CSS

:root {
  --font-heading: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;
  --base-size: 16px;
  --ratio: 1.25;   /* Major Third */
}

h1 { font-size: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); }
h2 { font-size: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); }
h3 { font-size: calc(var(--base-size) * var(--ratio) * var(--ratio) * var(--ratio)); }
h4 { font-size: calc(var(--base-size) * var(--ratio) * var(--ratio)); }
h5 { font-size: calc(var(--base-size) * var(--ratio)); }
h6, body { font-size: var(--base-size); }
small { font-size: calc(var(--base-size) / var(--ratio)); }

/* Or use pre-calculated rem values for better performance */
h1 { font-size: 3.052rem; }
h2 { font-size: 2.441rem; }
h3 { font-size: 1.953rem; }
h4 { font-size: 1.563rem; }
h5 { font-size: 1.25rem; }
h6, body { font-size: 1rem; }
small { font-size: 0.8rem; }

Font Pairing Tips

• Contrast is key. Pair a serif heading font with a sans-serif body font (or vice versa) for clear visual hierarchy.
• Match x-heights. Fonts with similar x-heights feel more cohesive when used together.
• Limit to 2–3 fonts. One for headings, one for body text, and optionally one for code or accents.
• Use weight for hierarchy. Bold headings (600–800) with regular body text (400) create natural emphasis.
• Test at real sizes. A font that looks great at 48px may be illegible at 14px, always preview the full ramp.

Popular Font Pairings

Fluid Typography with clamp()

Combine your type scale with CSS clamp() for responsive sizing that adapts smoothly between breakpoints, no media queries needed.

h1 {
  /* Scales from 2rem at 320px to 3.052rem at 1200px */
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.052rem);
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.441rem);
}

Line Height & Spacing

Larger text needs tighter line-height. A common pattern:

• Headings (h1–h3): line-height 1.1–1.3
• Subheadings (h4–h6): line-height 1.3–1.4
• Body text: line-height 1.5–1.7
• Small text: line-height 1.4–1.6