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.

| Ratio | Name | Value | Best for | |-------|-----------------|-------|------------------------------------| | Minor second | Tight | 1.067 | Dense data UIs, dashboards | | Major second | Compact | 1.125 | Apps, tools, compact layouts | | Minor third | Default | 1.200 | General web, blogs, marketing | | Major third | Relaxed | 1.250 | Editorial, magazines | | Perfect fourth | Bold | 1.333 | Marketing sites, landing pages | | Augmented fourth| Impact | 1.414 | Bold headlines, creative sites | | Perfect fifth | Drama | 1.500 | High-impact hero sections | | Golden ratio | Grand | 1.618 | Art, luxury, editorial |

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.

1. Lora + Inter

Warm transitional serif + neutral modern sans. Excellent readability.

1. Fraunces + Commissioner

Variable serif with personality + geometric sans. Distinctive editorial.

Modern / SaaS

1. Inter + Inter

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

1. DM Sans + DM Sans

Geometric, modern. Slightly more personality than Inter.

1. Manrope + Source Sans 3

Geometric with rounded terminals + humanist sans. Friendly tech feel.

Bold / Marketing

1. Space Grotesk + General Sans (self-hosted) or Space Grotesk + DM Sans

Monospace-influenced sans + clean geometric. Techy and bold.

1. Bricolage Grotesque + Inter

Quirky variable sans for headings + reliable body text. Playful but professional.

1. Cabinet Grotesk (self-hosted) + Satoshi (self-hosted)

Modern geometric pair. Premium startup aesthetic.

Specialized

1. JetBrains Mono + Inter

Monospace headings/code + sans body. Developer tools, documentation.

1. Instrument Serif + Instrument Sans

Matched serif/sans superfamily. Seamless pairing guaranteed.

1. Sora + Newsreader

Geometric sans headings + readable serif body. Inverted classic pattern.

CSS Import Pattern

: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

| Axis | CSS property | Range (typical) | |-------|-------------------|-----------------| | wght | font-weight | 100-900 | | wdth | font-stretch | 75%-125% | | slnt | font-style | -12 to 0 | | ital | font-style | 0 or 1 | | opsz | font-optical-sizing| 8-144 |

@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

| Context | letter-spacing | Rationale | |----------------------|----------------|------------------------------| | Large headings (3rem+)| -0.02 to -0.03em | Tighten for visual density| | Small headings | -0.01em | Slight tightening | | Body text | normal (0) | Default is optimized | | All-caps text | +0.05 to +0.1em| Caps need room to breathe | | Small/caption text | +0.01 to +0.02em| Improve legibility at small sizes| | Monospace | normal | Already evenly spaced |

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

---

Step 10: Font Loading Strategy

Recommended Approach

@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

| Value | Behavior | Use when | |----------|---------------------------------------|-------------------------------| | swap | Fallback shown immediately, swaps | Body text, most cases | | optional | Brief block, may skip custom font | Non-critical decorative fonts | | fallback | Short block, short swap period | Balance of swap + optional | | block | Invisible text for up to 3s | Icon fonts only |

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.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ArnavPuri
• Source: ArnavPuri/designskills
• License: MIT

Install and usage instructions live in the source repository linked above.