Font Pairings

Learn about Fonttrio’s three-font pairing system for creating harmonious typography

Font Pairings

Font pairings are the foundation of Fonttrio. Each pairing combines three carefully selected fonts that work together to create a cohesive typographic system for your project.

What are Font Pairings?

A font pairing in Fonttrio consists of three distinct fonts, each serving a specific purpose:

• Heading font: Used for titles, headlines, and emphasis
• Body font: Used for paragraphs, descriptions, and readable content
• Monospace font: Used for code blocks, technical content, and UI elements

This three-font approach provides visual hierarchy and flexibility while maintaining design cohesion.

Why Font Pairings Matter

Choosing the right combination of fonts can make or break your design. Good font pairings:

• Create visual hierarchy through contrast and harmony
• Enhance readability across different content types
• Establish brand personality and mood
• Ensure consistency across your entire project

Fonttrio offers 50+ curated pairings designed by typography experts, so you don’t have to be a type designer to achieve professional results.

Pairing Structure

Each pairing in Fonttrio follows a consistent structure defined in the registry:

registry/pairings/editorial.json

{
  "name": "pairing-editorial",
  "type": "registry:style",
  "title": "Editorial — Playfair Display + Source Serif 4 + JetBrains Mono",
  "description": "Classic editorial pairing. High-contrast serif headings with readable serif body text.",
  "categories": ["serif", "editorial", "elegant"],
  "registryDependencies": [
    "https://www.fonttrio.xyz/r/playfair-display.json",
    "https://www.fonttrio.xyz/r/source-serif-4.json",
    "https://www.fonttrio.xyz/r/jetbrains-mono.json"
  ],
  "cssVars": {
    "theme": {
      "--font-heading": "var(--font-playfair-display)",
      "--font-body": "var(--font-source-serif-4)",
      "--font-mono": "var(--font-jetbrains-mono)"
    }
  },
  "meta": {
    "mood": ["elegant", "traditional", "authoritative"],
    "useCase": ["blog", "editorial", "magazine", "documentation"]
  }
}

{
  "name": "pairing-minimal",
  "type": "registry:style",
  "title": "Minimal — Geist + Geist + Geist Mono",
  "description": "Ultra-minimal Vercel-style pairing. One font family for everything, clean and modern.",
  "categories": ["sans-serif", "minimal", "modern"],
  "registryDependencies": [
    "https://www.fonttrio.xyz/r/geist.json",
    "https://www.fonttrio.xyz/r/geist-mono.json"
  ],
  "cssVars": {
    "theme": {
      "--font-heading": "var(--font-geist)",
      "--font-body": "var(--font-geist)",
      "--font-mono": "var(--font-geist-mono)"
    }
  },
  "meta": {
    "mood": ["modern", "minimal", "Vercel-style"],
    "useCase": ["SaaS", "developer tools", "Vercel-style"]
  }
}

TypeScript Interface

Fonttrio uses TypeScript to provide type safety for font pairings. Here’s the interface from /home/daytona/workspace/source/lib/pairings.ts:3-25:

lib/pairings.ts

export type FontCategory = "serif" | "sans-serif" | "monospace";

export interface TypographyScale {
  h1: { size: string; weight: number; lineHeight: string; letterSpacing: string };
  h2: { size: string; weight: number; lineHeight: string; letterSpacing: string };
  h3: { size: string; weight: number; lineHeight: string; letterSpacing: string };
  h4: { size: string; weight: number; lineHeight: string; letterSpacing: string };
  h5: { size: string; weight: number; lineHeight: string; letterSpacing: string };
  h6: { size: string; weight: number; lineHeight: string; letterSpacing: string };
  body: { size: string; lineHeight: string; weight: number };
}

export interface PairingData {
  name: string;
  heading: string;
  headingCategory: FontCategory;
  body: string;
  bodyCategory: FontCategory;
  mono: string;
  mood: string[];
  useCase: string[];
  description: string;
  scale: TypographyScale;
  googleFontsUrl: string;
}

Pairing Categories

Fonttrio organizes pairings by their heading font category:

Serif Pairings

Traditional and elegant, serif pairings work well for editorial content, blogs, and formal documentation.

Examples: Editorial, Classic, Gazette

Sans-serif Pairings

Modern and clean, sans-serif pairings are perfect for SaaS applications, dashboards, and contemporary websites.

Examples: Minimal, Modern Clean, Dashboard

Mixed Pairings

Combine serif and sans-serif fonts for contrast and visual interest. Great for portfolios and creative projects.

Examples: Architect, Scholar, Curator

Monospace Systems

Some pairings use monospace for headings to create a technical, developer-focused aesthetic.

Examples: DevTool, Technical

Working with Pairings

Fonttrio provides utility functions to work with pairings:

lib/pairings.ts

// Get all available pairings
export function getAllPairings(): PairingData[]

// Get a specific pairing by name
export function getPairing(name: string): PairingData | undefined

// Filter pairings by mood
export function getPairingsByMood(mood: string): PairingData[]

// Filter pairings by font category
export function getPairingsByCategory(category: FontCategory): PairingData[]

// Get all unique moods
export function getAllMoods(): string[]

// Get Google Fonts URL for a pairing
export function getPairingGoogleFontsUrl(name: string): string | null

Mood and Use Cases

Each pairing is tagged with moods and use cases to help you find the right fit:

Mood Tags

Pairings are categorized by emotional tone and design personality:

• Editorial: elegant, traditional, authoritative
• Clean: modern, minimal, neutral, SaaS
• Bold: impactful, commanding, raw, brutalist
• Friendly: approachable, warm, playful, startup
• Corporate: professional, trustworthy, systematic
• Creative: distinctive, geometric, curated, nordic
• Academic: scholarly, refined, readable, universal

Use Case Tags

Pairings are optimized for specific project types:

• blog, editorial, magazine - Content-heavy sites
• SaaS, dashboard, web app - Applications and tools
• landing page, startup, product - Marketing sites
• portfolio, agency, design - Creative showcases
• documentation, developer tools - Technical content

Example: Accessing Pairing Data

Here’s how pairing data is structured in the codebase:

lib/pairings-data.ts

{
  name: "editorial",
  heading: "Playfair Display",
  headingCategory: "serif",
  body: "Source Serif 4",
  bodyCategory: "serif",
  mono: "JetBrains Mono",
  mood: ["elegant", "traditional", "authoritative"],
  useCase: ["blog", "editorial", "magazine", "documentation"],
  description: "Classic editorial pairing. High-contrast serif headings with readable serif body text.",
  scale: {
    h1: {
      size: "2.25rem",
      weight: 700,
      lineHeight: "1.2",
      letterSpacing: "-0.025em"
    },
    // ... other heading levels
    body: {
      size: "1rem",
      lineHeight: "1.65",
      weight: 400
    }
  },
  googleFontsUrl: "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Serif+4:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
}

Next Steps

Typography Scale

Learn how Fonttrio’s typography scales create visual hierarchy

CSS Variables

Discover how to customize font pairings with CSS variables

Browse Pairings

Explore all 50+ curated font pairings

Installation

Install Fonttrio and start using pairings in your project