// TYPOGRAPHY
Typography Pairing Library
Curated font combinations that create visual harmony. Each pairing balances personality with readability.
Type Scale
9 sizes
5XL
Display Heading
4XL
Page Title
3XL
Section Header
2XL
Subsection
XL
Card Title
LG
Subheading
BASE
Body Text
SM
Caption Text
XS
Small Label
Aa
Display
Hero titles, hero sections
Aa
Heading
Page and section titles
Aa
Body
Main content, paragraphs
Aa
UI
Buttons, inputs, labels
Font Pairings
26 pairingsPlayfair Display + Inter
// ELEGANT & MODERN
The Art of Design
Elegant typography creates visual hierarchy and guides readers through content with grace.
Primary Font
Playfair Display
Secondary Font
Inter
Best For
Portfolios, Blogs
Serif
Sans-Serif
elegant
editorial
Use Cases
- Blog posts and articles
- Portfolio showcases
- Design-focused sites
Inter + JetBrains Mono
// TECH & CLEAN
Build Faster Today
Clean, modern typography for tech products and developer tools.
Primary Font
Inter
Secondary Font
JetBrains Mono
Best For
SaaS, DevTools
Sans-Serif
Monospace
tech
developer
Use Cases
- Documentation sites
- Developer platforms
- Code-heavy interfaces
DM Sans + Space Mono
// BOLD & EDGY
Make Impact
Strong, geometric typography for brands that want to stand out.
Primary Font
DM Sans
Secondary Font
Space Mono
Best For
Startups, Agencies
Geometric
Monospace
startup
bold
Use Cases
- Landing pages
- Creative agencies
Merriweather + Open Sans
// READABLE & TRUSTED
Knowledge Shared
Classic typography for content-heavy websites and publications.
Primary Font
Merriweather
Secondary Font
Open Sans
Best For
News, Education
Serif
Sans-Serif
content
trusted
Use Cases
- Educational platforms
- News websites
- Documentation
Montserrat + Roboto
// MODERN & BALANCED
Future Forward
Versatile pairing that works across industries and use cases.
Primary Font
Montserrat
Secondary Font
Roboto
Best For
Enterprise, Apps
Geometric
Humanist
enterprise
versatile
Use Cases
- Enterprise dashboards
- Mobile applications
- Corporate sites
Abril Fatface + Lato
// DRAMATIC & SOPHISTICATED
Luxury Defined
High-impact typography for premium brands and fashion.
Primary Font
Abril Fatface
Secondary Font
Lato
Best For
Luxury, Fashion
Display
Sans-Serif
luxury
premium
Use Cases
- Fashion brands
- Luxury products
- Editorial spreads
Poppins + Source Sans 3
// FRIENDLY & APPROACHABLE
Welcome Home
Warm and inviting typography perfect for community platforms and lifestyle brands.
Primary Font
Poppins
Secondary Font
Source Sans 3
Best For
Lifestyle, Community
Geometric
Humanist
friendly
lifestyle
Use Cases
- Community platforms
- Lifestyle blogs
- Wellness brands
Oswald + Roboto Condensed
// BOLD & IMPACTFUL
MAKE IT COUNT
Strong condensed typography for headlines that demand attention and action.
Primary Font
Oswald
Secondary Font
Roboto Condensed
Best For
Sports, Action
Condensed
Sans-Serif
sports
action
Use Cases
- Sports websites
- Action brands
- Fitness apps
Libre Baskerville + Lato
// CLASSIC & TIMELESS
Stories Told Well
Classic book typography that brings literary elegance to digital reading experiences.
Primary Font
Libre Baskerville
Secondary Font
Lato
Best For
Publishing, Literature
Serif
Sans-Serif
classic
publishing
Use Cases
- E-book platforms
- Literary magazines
- Author websites
Lora + Open Sans
// WARM & INVITING
Comfort in Words
A warm serif paired with a clean sans-serif creates approachable, readable content.
Primary Font
Lora
Secondary Font
Open Sans
Best For
Blogs, Personal Sites
Serif
Sans-Serif
warm
personal
Use Cases
- Personal blogs
- Recipe sites
- Family websites
Bitter + Fira Sans
// STRONG & TECHNICAL
Precision Matters
Slab serif meets humanist sans for technical content with strong visual presence.
Primary Font
Bitter
Secondary Font
Fira Sans
Best For
Engineering, Tech
Slab Serif
Humanist
technical
precise
Use Cases
- Engineering blogs
- Technical docs
- Science sites
Cardo + Source Sans 3
// ACADEMIC & SCHOLARLY
Research & Discovery
Scholarly typography designed for long-form academic reading and citation.
Primary Font
Cardo
Secondary Font
Source Sans 3
Best For
Academic, Research
Serif
Sans-Serif
academic
research
Use Cases
- University sites
- Research papers
- Academic journals
Crimson Pro + Work Sans
// EDITORIAL & REFINED
The Fine Print
Refined editorial typography for premium publishing and sophisticated content.
Primary Font
Crimson Pro
Secondary Font
Work Sans
Best For
Publishing, News
Serif
Sans-Serif
editorial
refined
Use Cases
- Online magazines
- Premium blogs
- Publishing houses
DM Serif Display + DM Sans
// COHESIVE & HARMONIOUS
Unified Design
Part of the same font family, these pair naturally with perfect visual harmony.
Primary Font
DM Serif Display
Secondary Font
DM Sans
Best For
Branding, Startups
Serif
Sans-Serif
harmonious
branding
Use Cases
- Brand identities
- Startup landing pages
- Product sites
PT Serif + PT Sans
// VERSATILE & PROFESSIONAL
Public Type
Designed for public use with excellent multilingual support and professional polish.
Primary Font
PT Serif
Secondary Font
PT Sans
Best For
Government, Public
Serif
Sans-Serif
professional
accessible
Use Cases
- Government sites
- Public services
- Non-profits
Spectral + Nunito
// LITERARY & CHARMING
Words Come Alive
A literary serif paired with a rounded sans creates an inviting reading experience.
Primary Font
Spectral
Secondary Font
Nunito
Best For
Literature, Poetry
Serif
Rounded
literary
charming
Use Cases
- Poetry sites
- Book clubs
- Writing platforms
Bebas Neue + Roboto Condensed
// INDUSTRIAL & EDGY
RAW ENERGY
Condensed display typography that screams action, streetwear, and urban culture.
Primary Font
Bebas Neue
Secondary Font
Roboto Condensed
Best For
Streetwear, Urban
Display
Condensed
edgy
street
Use Cases
- Streetwear brands
- Music festivals
- Action sports
Syne + Space Grotesk
// EXPERIMENTAL & GEOMETRIC
Future Forms
Experimental geometric typography for forward-thinking brands and art projects.
Primary Font
Syne
Secondary Font
Space Grotesk
Best For
Art, Experimental
Geometric
Sans-Serif
experimental
artistic
Use Cases
- Art galleries
- Design studios
- Creative portfolios
Archivo Black + Archivo
// BOLD & UNIFIED
MAXIMUM IMPACT
Same family, different weights create powerful hierarchy with perfect consistency.
Primary Font
Archivo Black
Secondary Font
Archivo
Best For
Marketing, Ads
Display
Sans-Serif
bold
marketing
Use Cases
- Marketing sites
- Promotional pages
- Campaign landing pages
Comfortaa + Quicksand
// PLAYFUL & ROUNDED
Fun & Friendly
Rounded, friendly typography perfect for children's brands and playful experiences.
Primary Font
Comfortaa
Secondary Font
Quicksand
Best For
Kids, Games
Rounded
Rounded
playful
friendly
Use Cases
- Children's apps
- Game websites
- Toy brands
Raleway + Open Sans
// ELEGANT & ACCESSIBLE
Graceful Design
Elegant geometric headers paired with highly readable body text for any project.
Primary Font
Raleway
Secondary Font
Open Sans
Best For
General, Business
Geometric
Humanist
versatile
business
Use Cases
- Business sites
- Service pages
- Portfolio sites
Prata + Lato
// REFINED & MINIMAL
Understated Elegance
Refined high-contrast serif with clean sans-serif creates sophisticated minimalism.
Primary Font
Prata
Secondary Font
Lato
Best For
Beauty, Wellness
Serif
Sans-Serif
minimal
beauty
Use Cases
- Beauty brands
- Wellness sites
- Spa experiences
IBM Plex Serif + IBM Plex Sans
// SYSTEMATIC & PROFESSIONAL
Enterprise Ready
IBM's type family designed for complex information and professional environments.
Primary Font
IBM Plex Serif
Secondary Font
IBM Plex Sans
Best For
Enterprise, Data
Serif
Sans-Serif
enterprise
professional
Use Cases
- Enterprise software
- Data dashboards
- B2B platforms
Fira Code + Inter
// DEVELOPER & CLEAN
const success = true;
Monospace font with ligatures paired with clean sans-serif for developer tools and docs.
Primary Font
Fira Code
Secondary Font
Inter
Best For
DevTools, Coding
Monospace
Sans-Serif
developer
coding
Use Cases
- Code documentation
- Developer blogs
- API references
Space Grotesk + Work Sans
// GEOMETRIC & FUNCTIONAL
Form Follows Function
Geometric sans-serifs that prioritize clarity and functionality in modern interfaces.
Primary Font
Space Grotesk
Secondary Font
Work Sans
Best For
UI/UX, Web Apps
Geometric
Sans-Serif
functional
ui-ux
Use Cases
- Web applications
- Dashboard UIs
- SaaS products
Nunito + PT Sans
// FRIENDLY & PROFESSIONAL
Approachable Expertise
Rounded headers with professional body text for services that feel human yet capable.
Primary Font
Nunito
Secondary Font
PT Sans
Best For
Services, Health
Rounded
Sans-Serif
services
healthcare
Use Cases
- Healthcare services
- Professional services
- Consulting firms
Typography Rules
4 rulesLimit Font Families
// MAXIMUM 2-3
Use maximum 2-3 font families per project. One for headings, one for body, optional third for accents.
simplicity
consistency
Establish Hierarchy
// VISUAL ORDER
Use size, weight, and color to create clear hierarchy. Don't rely solely on font size.
structure
clarity
Optimal Line Length
// 45-75 CHARACTERS
Keep body text between 45-75 characters wide for optimal readability. Use line-height of 1.5-1.7.
readability
accessibility
Scale proportionally
// MODULAR SCALE
Use a modular scale (1.25, 1.333, 1.414, or 1.618) for consistent sizing across all text elements.
harmony
proportion