> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/kapishdima/fonttrio/llms.txt
> Use this file to discover all available pages before exploring further.
# 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:
```json registry/pairings/editorial.json theme={null}
{
"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"]
}
}
```
```json registry/pairings/minimal.json theme={null}
{
"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`:
```typescript lib/pairings.ts theme={null}
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:
Traditional and elegant, serif pairings work well for editorial content, blogs, and formal documentation.
**Examples**: Editorial, Classic, Gazette
Modern and clean, sans-serif pairings are perfect for SaaS applications, dashboards, and contemporary websites.
**Examples**: Minimal, Modern Clean, Dashboard
Combine serif and sans-serif fonts for contrast and visual interest. Great for portfolios and creative projects.
**Examples**: Architect, Scholar, Curator
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:
```typescript lib/pairings.ts theme={null}
// 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:
```typescript lib/pairings-data.ts theme={null}
{
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
Learn how Fonttrio's typography scales create visual hierarchy
Discover how to customize font pairings with CSS variables
Explore all 50+ curated font pairings
Install Fonttrio and start using pairings in your project