Install FontSwap
Playfair Display
About Playfair Display
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- Variable (100-900)
- Features
- Variable, Italics
Free to use, modify, and distribute. Can be used commercially without attribution.
What's allowed?
- ✓ Client work
- ✓ SaaS / Web apps
- ✓ YouTube / Video
- ✓ Sell products
- ✓ Print materials
Note: Derivative fonts must use the same license.
Full license guide →Playfair Display is a transitional display typeface designed by Claus Eggers Sørensen. Inspired by the letterforms of John Baskerville, the Scotch Roman typefaces, and the work of Didot and Bodoni, it brings the elegant high-contrast aesthetic of 18th-century printing into the digital age.
History and Design
Claus Eggers Sørensen designed Playfair Display in 2011, creating a typeface that references the refined letterforms emerging when quills gave way to pointed steel pens. The design captures the period's characteristic high contrast while incorporating subtle refinements for contemporary screen display.
Playfair borrows from multiple traditions: the transitional grace of Baskerville, the dramatic contrast of Didot and Bodoni, and the robust practicality of Scotch Roman. This synthesis creates a versatile display face suitable for diverse applications.
Why Playfair Display Succeeds
Playfair Display achieves remarkable elegance without sacrificing usability. Its slightly heavier hairlines and subtle bracketing improve screen rendering compared to pure Didone typefaces. The result feels both classical and contemporary—sophisticated without being cold.
Technical Features
- Variable font: Full weight range from regular to black
- True italics: Distinct italic designs for all weights
- Small caps variant: Playfair Display SC available separately
- Extended character support: Latin, Cyrillic, Vietnamese
- OpenType features: Ligatures, stylistic alternates, fractions
Best Use Cases
Playfair Display excels in:
- Editorial design: Magazine headlines and feature titles
- Fashion and lifestyle: Elegant, aspirational aesthetics
- Wedding stationery: Romantic, refined invitations
- Restaurant and hospitality: Upscale menu design and branding
Usage Tips
Playfair Display performs best at 18pt and above. For body text, pair with neutral sans-serifs like Source Sans Pro or Lato. The black weight creates especially dramatic headlines. Use the small caps variant (Playfair Display SC) for subheadings and running heads. Enable ligatures for refined typography, especially the fl and fi combinations.
Is Playfair Display on Google Fonts?
Yes, Playfair Display is available for free on Google Fonts. Get Playfair Display on Google Fonts ↗
Alternative For (35)
Playfair Display is a free alternative to the following premium fonts:
Contemporary interpretation with similar dramatic contrast for display use
High-contrast transitional display serif designed for headlines and titles
Compare Playfair Display
See how Playfair Display compares to other fonts side by side.
Variable Font Axes
Playfair Display is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 400 | 400 | 900 |
| opsz | 5 | 11 | 1200 |
Font Pairings
Fonts that pair well with Playfair Display based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Playfair Display in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Playfair Display.
@font-face {
font-family: 'Playfair Display Fallback';
src: local('Georgia');
ascent-override: 108.2%;
descent-override: 25.1%;
line-gap-override: 0%;
size-adjust: 106.76%;
}How to Use Playfair Display
Copy these code snippets to quickly add Playfair Display to your project.
CSS code for Playfair Display
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@100..900&display=swap');HTML code for Playfair Display
<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@100..900&display=swap" rel="stylesheet">Tailwind code for Playfair Display
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'playfair-display': ['"Playfair Display"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-playfair-display">Your text here</p>Next.js code for Playfair Display
// Using next/font (Next.js 13+)
import { Playfair_Display } from 'next/font/google';
const playfair_display = Playfair_Display({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={playfair_display.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Playfair Display"' }}>Your text</p>Expo and React Native code for Playfair Display
// Install: npx expo install @expo-google-fonts/playfair-display expo-font
import { useFonts, Playfair_Display_400Regular } from '@expo-google-fonts/playfair-display';
export default function App() {
const [fontsLoaded] = useFonts({
Playfair_Display_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Playfair_Display_400Regular' }}>
Your text here
</Text>
);
}