Typography

Typography Mastery

Create beautiful, readable, and systematic typography for any web project.

Prerequisites

Before setting typography, check for existing design context:

• Read any design-context files for existing font choices, brand guidelines, or type preferences.
• If a design system exists, align with its type scale and font stack.

Step 1: Choose a Type Scale Ratio

The type scale ratio determines the mathematical relationship between sizes. Pick based on the content density and visual character of the project.

Generate a Scale

:root {
  --type-ratio: 1.25;   /* major third */
  --type-base: 1rem;    /* 16px */

  --text-xs:   calc(var(--type-base) / var(--type-ratio) / var(--type-ratio)); /* ~0.64rem */
  --text-sm:   calc(var(--type-base) / var(--type-ratio));  /* ~0.80rem */
  --text-base: var(--type-base);                             /* 1rem */
  --text-lg:   calc(var(--type-base) * var(--type-ratio));   /* 1.25rem */
  --text-xl:   calc(var(--type-base) * var(--type-ratio) * var(--type-ratio));  /* 1.563rem */
  --text-2xl:  calc(var(--type-base) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));  /* 1.953rem */
  --text-3xl:  calc(1rem * 2.441);  /* precomputed for clarity */
  --text-4xl:  calc(1rem * 3.052);
  --text-5xl:  calc(1rem * 3.815);
}

Step 2: Font Pairing Rules

Core Pairing Strategies

1. Serif headings + Sans body: Classic editorial feel. High contrast in structure.
2. Geometric sans headings + Humanist sans body: Modern but warm.
3. Slab serif headings + Sans body: Bold, confident.
4. Mono headings + Sans body: Technical, developer-oriented.
5. Same family, different weights: Safest option. Use 700+ for headings, 400 for body.

What to Avoid

• Two fonts from the same category with similar proportions (e.g., two geometric sans).
• More than 2 typefaces on a single page (3 max if one is monospace for code).
• Decorative/display fonts for body text.

Step 3: Curated Google Fonts Pairings

These are tested, production-ready combinations.

Editorial / Content-heavy

1. Playfair Display + Source Sans 3 Elegant serif headings, clean sans body. Great for magazines, blogs.

2. Lora + Inter Warm transitional serif + neutral modern sans. Excellent readability.

3. Fraunces + Commissioner Variable serif with personality + geometric sans. Distinctive editorial.

Modern / SaaS

4. Inter + Inter Single-family system. Use 700 for headings, 400 for body. Extremely versatile.

5. DM Sans + DM Sans Geometric, modern. Slightly more personality than Inter.

6. Manrope + Source Sans 3 Geometric with rounded terminals + humanist sans. Friendly tech feel.

Bold / Marketing

7. Space Grotesk + General Sans (self-hosted) or Space Grotesk + DM Sans Monospace-influenced sans + clean geometric. Techy and bold.

8. Bricolage Grotesque + Inter Quirky variable sans for headings + reliable body text. Playful but professional.

9. Cabinet Grotesk (self-hosted) + Satoshi (self-hosted) Modern geometric pair. Premium startup aesthetic.

Specialized

10. JetBrains Mono + Inter Monospace headings/code + sans body. Developer tools, documentation.

11. Instrument Serif + Instrument Sans Matched serif/sans superfamily. Seamless pairing guaranteed.

12. Sora + Newsreader Geometric sans headings + readable serif body. Inverted classic pattern.

CSS Import Pattern

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet">

:root {
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

Step 4: Heading Hierarchy

Recommended Defaults (1.25 ratio, base 16px)

h1 {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);   /* ~3.8rem / 61px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 0.5em;
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);   /* ~3.05rem / 49px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);   /* ~2.44rem / 39px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 0.5em;
}

h4 {
  font-size: var(--text-2xl);   /* ~1.95rem / 31px */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h5 {
  font-size: var(--text-xl);    /* ~1.56rem / 25px */
  font-weight: 600;
  line-height: 1.3;
}

h6 {
  font-size: var(--text-lg);    /* ~1.25rem / 20px */
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Key Rules

• Negative letter-spacing for large headings (-0.01em to -0.03em).
• Tighter line-height for headings (1.1-1.3) than body text.
• Skip heading levels sparingly -- h1 to h3 is fine for most pages.

Step 5: Body Text Optimization

The Golden Rules

• Font size: 16px minimum, 18px preferred for long-form content.
• Line height: 1.5 for UI, 1.6-1.75 for long-form reading.
• Line length: 45-75 characters per line (65ch is ideal).
• Paragraph spacing: 1em-1.5em between paragraphs.

body {
  font-family: var(--font-body);
  font-size: 1.125rem;        /* 18px */
  line-height: 1.65;
  color: var(--gray-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.prose p + p {
  margin-top: 1.25em;
}

.prose > * + * {
  margin-top: 1em;
}

Step 6: Responsive Typography with clamp()

Use clamp() for fluid scaling between breakpoints without media queries.

Formula

clamp(min, preferred, max)
preferred = viewport-relative unit (e.g., 2.5vw + a rem base)

Practical Fluid Scale

:root {
  --text-base: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --text-lg:   clamp(1.125rem, 0.75vw + 0.9rem, 1.35rem);
  --text-xl:   clamp(1.25rem, 1vw + 0.95rem, 1.75rem);
  --text-2xl:  clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  --text-3xl:  clamp(1.875rem, 2vw + 1.1rem, 3rem);
  --text-4xl:  clamp(2.25rem, 3vw + 1rem, 4rem);
  --text-5xl:  clamp(2.75rem, 4vw + 1rem, 5.5rem);
}

Hero Headline Pattern

.hero-title {
  font-size: clamp(2.5rem, 5vw + 1rem, 6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance; /* prevents orphans */
}

Step 7: Text Treatments and Effects

Gradient Text

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Outlined / Stroke Text

.outlined-text {
  -webkit-text-stroke: 2px currentColor;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  font-size: 5rem;
}

Text Shadow for Depth

.text-shadow-soft {
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.text-shadow-hard {
  text-shadow: 3px 3px 0 rgba(0,0,0,0.15);
}

/* Neon glow */
.text-neon {
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa;
}

Text Over Images

.text-over-image {
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
  /* OR use a backdrop */
}

.text-backdrop {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  padding: 0.5em 1em;
  border-radius: 0.25em;
}

Step 8: Variable Fonts

Common Axes

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

.heading {
  font-family: 'Inter Variable', sans-serif;
  font-weight: 750;           /* precise weight */
  font-variation-settings: 'wdth' 110;  /* slightly wider */
}

Step 9: Letter-Spacing and Word-Spacing Guidelines

.caps-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-sm);
  font-weight: 600;
}

Step 10: Font Loading Strategy

Recommended Approach

<!-- Preconnect to font CDN -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

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

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

font-display Values

System Font Stack Fallback

:root {
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

Preventing Layout Shift

Use size-adjust, ascent-override, and descent-override to match fallback metrics:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Quick Reference Checklist

1. Pick a type scale ratio appropriate to the project.
2. Choose max 2 typefaces (3 if including monospace).
3. Set body text to 16-18px with 1.5-1.75 line-height.
4. Constrain line length to 45-75 characters.
5. Use clamp() for fluid responsive sizing.
6. Apply negative letter-spacing to large headings.
7. Use positive letter-spacing for uppercase text.
8. Preload critical fonts; use font-display: swap.
9. Set up a system font fallback stack.
10. Use text-wrap: balance on headings to avoid orphans.