Algorithmic pairing based on complementary sans-serif/serif classification with 66% compatibility
Introducing the future
A modern platform for teams who ship fast and think big. Start building today with zero configuration.
February 13, 2026 · 6 min read
Good typography is invisible. Bad typography is everywhere. The choice of typeface communicates before a single word is read — it sets tone, establishes hierarchy, and builds trust with your audience.
"Type is a beautiful group of letters, not a group of beautiful letters."
When pairing fonts, contrast is key. A serif heading with a sans-serif body creates natural visual hierarchy without any additional styling.
Head of Design
| Font | 14px | 18px |
|---|---|---|
| Google Sans Flex | Il1 O0 rn/m | Il1 O0 rn/m |
| Source Serif Pro | Il1 O0 rn/m | Il1 O0 rn/m |
Test: uppercase I, lowercase l, digit 1 · uppercase O, digit 0 · rn vs m
Install FontSwap
/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Google%20Sans%20Flex:wght@400;700&family=Source%20Serif%20Pro:wght@400;700&display=swap');
/* Font Pairing Custom Properties */
:root {
--font-body: 'Google Sans Flex', sans-serif;
--font-heading: 'Source Serif Pro', serif;
}
/* Usage */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
}
body, p, li {
font-family: var(--font-body);
}<!-- Add to <head> -->
<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=Google%20Sans%20Flex:wght@400;700&family=Source%20Serif%20Pro:wght@400;700&display=swap" rel="stylesheet">
<!-- Usage -->
<h1 style="font-family: 'Google Sans Flex', sans-serif">
Your Heading Here
</h1>
<p style="font-family: 'Source Serif Pro', serif">
Your body text goes here.
</p>// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
heading: ['Google Sans Flex', 'sans-serif'],
body: ['Source Serif Pro', 'serif'],
},
},
},
}
// In your HTML/JSX:
// <h1 class="font-heading">Heading</h1>
// <p class="font-body">Body text</p>// app/layout.tsx
import { Google_Sans_Flex, Source_Serif_Pro } from 'next/font/google'
const heading = Google_Sans_Flex({
subsets: ['latin'],
variable: '--font-heading',
display: 'swap',
})
const body = Source_Serif_Pro({
subsets: ['latin'],
variable: '--font-body',
display: 'swap',
})
export default function RootLayout({ children }) {
return (
<html className={`${heading.variable} ${body.variable}`}>
<body>{children}</body>
</html>
)
}Both fonts support variable axes — use font-display: optional for best CLS