Typography & Font Pairing Guide
Professional font combinations with detailed recommendations and live examples. All fonts are available via @fontsource for easy self-hosting.
Font Pairing Recommendations
| Category | Heading Font | Text Font | Best For | Heading Use | Text Use |
|---|---|---|---|---|---|
| Elegant Serif Duo | Playfair Display Classic elegance with high contrast, perfect for luxury brands and editorial content | Source Serif 4 Highly readable serif designed for long-form text, excellent screen rendering | Magazines, Fashion, Luxury Brands | Headlines, Titles | Body Text, Articles |
| Modern Sans + Traditional Serif | Montserrat Geometric sans-serif inspired by urban Buenos Aires, strong and modern | Merriweather Designed for comfortable reading on screens, warm and friendly | Blogs, Corporate Sites, News | Headlines, Navigation | Body Text, Long Articles |
| Tech-Forward Sans Duo | Space Grotesk Modified version of Space Mono, quirky yet professional with tech vibes | Work Sans Optimized for screen use, slightly condensed for efficient layouts | Tech Startups, SaaS, Apps | Headlines, Branding | UI Text, Interfaces |
| Book-Style Serif Duo | Crimson Text Inspired by classic Garamond, perfect for traditional book-like layouts | Lora Brushed curves give warmth while maintaining readability | Publishing, Academic, Literary | Titles, Chapter Headings | Long-Form Content |
| Friendly Modern Sans | Poppins Geometric sans with rounded friendly appearance, highly versatile | DM Sans Low contrast for comfortable reading, excellent at small sizes | Landing Pages, E-commerce, Apps | Headlines, CTAs | Body Text, UI |
| Clean Professional Sans | Archivo Grotesque sans-serif designed for highlights and headlines, strong presence | Manrope Modern geometric with excellent legibility, slightly rounded terminals | Professional Services, Finance, B2B | Headers, Navigation | Interface Text, Content |
| Creative + Monospace | Raleway Elegant thin weights for sophisticated designs, wide character spacing | JetBrains Mono Developer-focused monospace with excellent code readability | Developer Tools, Tech Docs, Portfolios | Display Headlines | Code Blocks, Data |
Live Font Pairing Examples
Elegant Serif Duo
Playfair Display + Source Serif 4
Playfair Display 700 The Quick Brown Fox Jumps Over the Lazy Dog
Classic elegance with high contrast, perfect for luxury brands and editorial content
Source Serif 4 400 Typography is the art and technique of arranging type to make written language legible, readable and appealing. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters. The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.
Highly readable serif designed for long-form text, excellent screen rendering
Full Pairing Example
This is how the heading and body text work together in a real layout. Notice the contrast and harmony between the two typefaces. Good typography creates hierarchy, improves readability, and enhances the overall user experience.
Show installation code
// Install via npm/pnpm
pnpm add @fontsource/playfair-display @fontsource/source-serif-4
// Import in your CSS/Astro file
import '@fontsource/playfair-display/400.css';
import '@fontsource/playfair-display/700.css';
import '@fontsource/source-serif-4/400.css';
// Apply in Tailwind config or CSS
h1, h2, h3 {
font-family: 'Playfair Display', serif;
}
body, p {
font-family: 'Source Serif 4', sans-serif;
}Modern Sans + Traditional Serif
Montserrat + Merriweather
Montserrat 700 The Quick Brown Fox Jumps Over the Lazy Dog
Geometric sans-serif inspired by urban Buenos Aires, strong and modern
Merriweather 400 Typography is the art and technique of arranging type to make written language legible, readable and appealing. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters. The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.
Designed for comfortable reading on screens, warm and friendly
Full Pairing Example
This is how the heading and body text work together in a real layout. Notice the contrast and harmony between the two typefaces. Good typography creates hierarchy, improves readability, and enhances the overall user experience.
Show installation code
// Install via npm/pnpm
pnpm add @fontsource/montserrat @fontsource/merriweather
// Import in your CSS/Astro file
import '@fontsource/montserrat/400.css';
import '@fontsource/montserrat/700.css';
import '@fontsource/merriweather/400.css';
// Apply in Tailwind config or CSS
h1, h2, h3 {
font-family: 'Montserrat', serif;
}
body, p {
font-family: 'Merriweather', sans-serif;
}Tech-Forward Sans Duo
Space Grotesk + Work Sans
Space Grotesk 700 The Quick Brown Fox Jumps Over the Lazy Dog
Modified version of Space Mono, quirky yet professional with tech vibes
Work Sans 400 Typography is the art and technique of arranging type to make written language legible, readable and appealing. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters. The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.
Optimized for screen use, slightly condensed for efficient layouts
Full Pairing Example
This is how the heading and body text work together in a real layout. Notice the contrast and harmony between the two typefaces. Good typography creates hierarchy, improves readability, and enhances the overall user experience.
Show installation code
// Install via npm/pnpm
pnpm add @fontsource/space-grotesk @fontsource/work-sans
// Import in your CSS/Astro file
import '@fontsource/space-grotesk/400.css';
import '@fontsource/space-grotesk/700.css';
import '@fontsource/work-sans/400.css';
// Apply in Tailwind config or CSS
h1, h2, h3 {
font-family: 'Space Grotesk', serif;
}
body, p {
font-family: 'Work Sans', sans-serif;
}Book-Style Serif Duo
Crimson Text + Lora
Crimson Text 600 The Quick Brown Fox Jumps Over the Lazy Dog
Inspired by classic Garamond, perfect for traditional book-like layouts
Lora 400 Typography is the art and technique of arranging type to make written language legible, readable and appealing. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters. The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.
Brushed curves give warmth while maintaining readability
Full Pairing Example
This is how the heading and body text work together in a real layout. Notice the contrast and harmony between the two typefaces. Good typography creates hierarchy, improves readability, and enhances the overall user experience.
Show installation code
// Install via npm/pnpm
pnpm add @fontsource/crimson-text @fontsource/lora
// Import in your CSS/Astro file
import '@fontsource/crimson-text/400.css';
import '@fontsource/crimson-text/700.css';
import '@fontsource/lora/400.css';
// Apply in Tailwind config or CSS
h1, h2, h3 {
font-family: 'Crimson Text', serif;
}
body, p {
font-family: 'Lora', sans-serif;
}Friendly Modern Sans
Poppins + DM Sans
Poppins 600 The Quick Brown Fox Jumps Over the Lazy Dog
Geometric sans with rounded friendly appearance, highly versatile
DM Sans 400 Typography is the art and technique of arranging type to make written language legible, readable and appealing. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters. The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.
Low contrast for comfortable reading, excellent at small sizes
Full Pairing Example
This is how the heading and body text work together in a real layout. Notice the contrast and harmony between the two typefaces. Good typography creates hierarchy, improves readability, and enhances the overall user experience.
Show installation code
// Install via npm/pnpm
pnpm add @fontsource/poppins @fontsource/dm-sans
// Import in your CSS/Astro file
import '@fontsource/poppins/400.css';
import '@fontsource/poppins/700.css';
import '@fontsource/dm-sans/400.css';
// Apply in Tailwind config or CSS
h1, h2, h3 {
font-family: 'Poppins', serif;
}
body, p {
font-family: 'DM Sans', sans-serif;
}Clean Professional Sans
Archivo + Manrope
Archivo 700 The Quick Brown Fox Jumps Over the Lazy Dog
Grotesque sans-serif designed for highlights and headlines, strong presence
Manrope 400 Typography is the art and technique of arranging type to make written language legible, readable and appealing. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters. The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.
Modern geometric with excellent legibility, slightly rounded terminals
Full Pairing Example
This is how the heading and body text work together in a real layout. Notice the contrast and harmony between the two typefaces. Good typography creates hierarchy, improves readability, and enhances the overall user experience.
Show installation code
// Install via npm/pnpm
pnpm add @fontsource/archivo @fontsource/manrope
// Import in your CSS/Astro file
import '@fontsource/archivo/400.css';
import '@fontsource/archivo/700.css';
import '@fontsource/manrope/400.css';
// Apply in Tailwind config or CSS
h1, h2, h3 {
font-family: 'Archivo', serif;
}
body, p {
font-family: 'Manrope', sans-serif;
}Creative + Monospace
Raleway + JetBrains Mono
Raleway 300 The Quick Brown Fox Jumps Over the Lazy Dog
Elegant thin weights for sophisticated designs, wide character spacing
JetBrains Mono 400 Typography is the art and technique of arranging type to make written language legible, readable and appealing. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters. The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.
Developer-focused monospace with excellent code readability
Full Pairing Example
This is how the heading and body text work together in a real layout. Notice the contrast and harmony between the two typefaces. Good typography creates hierarchy, improves readability, and enhances the overall user experience.
Show installation code
// Install via npm/pnpm
pnpm add @fontsource/raleway @fontsource/jetbrains-mono
// Import in your CSS/Astro file
import '@fontsource/raleway/400.css';
import '@fontsource/raleway/700.css';
import '@fontsource/jetbrains-mono/400.css';
// Apply in Tailwind config or CSS
h1, h2, h3 {
font-family: 'Raleway', serif;
}
body, p {
font-family: 'JetBrains Mono', sans-serif;
}Bonus: Monospace Fonts for Code
JetBrains Mono
Designed for developers with increased letter height and distinctive characters
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n-1) + fibonacci(n-2);
}
const result = fibonacci(10); // 55Fira Code
Popular for programming ligatures and excellent readability
const greeting = (name) => {
return `Hello, ${name}!`;
};
console.log(greeting('World'));