Skip to main content

​
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: 
{
  "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"]
  }
}

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

Build docs developers (and LLMs) love

Get started for freeTalk to us