Style: elegantFeel: bold
Style: technicalFeel: neutral
Pairing Score
Excellent Contrast

Live Preview

Beautiful Typography Starts Here

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Playfair Display
The quick brown fox jumps over the lazy dog

Size Samples

H1 (2.5rem)Heading 1
H2 (2rem)Heading 2
H3 (1.5rem)Heading 3
Body (1rem)Body text paragraph.
Small (0.875rem)Small text, captions

Curated Pairings

Playfair Display
Source Sans Pro
ElegantEditorial, Luxury
Montserrat
Merriweather
ProfessionalCorporate, Business
Roboto
Open Sans
CleanTech, Apps
Oswald
Lato
BoldNews, Media
Lora
Open Sans
WarmBlog, Personal
Poppins
Lora
ModernStartup, Creative
Abril Fatface
Raleway
DramaticFashion, Art
Bebas Neue
Source Sans Pro
Bold ModernSports, Events
Work Sans
Bitter
BalancedPublishing, Magazine
Raleway
Crimson Text
RefinedLifestyle, Design
Inter
Lato
NeutralSaaS, Dashboard
Cormorant
Nunito
SophisticatedBoutique, Hospitality
Anton
Work Sans
ImpactfulLanding Pages, Marketing
Libre Baskerville
Source Sans Pro
ClassicAcademic, Legal
Nunito
PT Serif
FriendlyEducation, Family

Export Code

Google Fonts Link
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+Pro:wght@400;500&display=swap" rel="stylesheet">
CSS Variables
:root {
  /* Heading Font */
  --font-heading: "Playfair Display", Georgia, serif;

  /* Body Font */
  --font-body: "Source Sans Pro", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

body, p {
  font-family: var(--font-body);
}
Tailwind Config
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        heading: ['Playfair Display', ...defaultTheme.fontFamily.serif],
        body: ['Source Sans Pro', ...defaultTheme.fontFamily.sans],
      },
    },
  },
}

Save Pairing

Font Pairing Tips

Contrast is Key

Pair fonts with different personalities - a decorative heading with a neutral body font creates visual interest while maintaining readability.

Serif + Sans-Serif

The classic combination. Serif fonts for elegance and tradition, sans-serif for modernity and clarity. Works in either direction.

Limit to 2-3 Fonts

Using too many fonts creates visual chaos. Stick to one heading font and one body font, with an optional accent font for special elements.

Consider X-Height

Fonts with similar x-heights (the height of lowercase letters) pair well together even when their styles differ.

Font Resources

Playfair Display on Google FontsSource Sans Pro on Google Fonts

Need Custom Typography?

Brix340 creates unique typographic systems tailored to your brand identity.

Get Professional Design Help

Rate this tool