Install FontSwap
Libre Caslon Display
About Libre Caslon Display
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- 400
- Features
- Standard
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 →Libre Caslon Display is a display-optimized serif typeface based on the classic Caslon design. Created by Pablo Impallari as part of the Libre font project, it brings the timeless elegance of 18th-century Caslon typefaces to modern digital environments.
History and Design
Pablo Impallari designed Libre Caslon Display as a companion to Libre Caslon Text, optimizing it specifically for large sizes. The design pays homage to William Caslon's original 18th-century typefaces, which were the dominant fonts for English-language printing for over 200 years. The display version features higher contrast and refined details that shine at headline sizes.
Why Libre Caslon Display is Popular
Libre Caslon Display serves as an excellent free alternative to premium Caslon revivals and other high-contrast display serifs. Its classic letterforms and elegant proportions make it ideal for editorial headlines, book covers, and sophisticated branding. The Caslon heritage provides instant credibility and timelessness.
Technical Features
- Display optimization: Refined for large sizes (24px+)
- High contrast: Elegant thick-thin transitions
- Classic proportions: Based on historical Caslon models
- Extended Latin: Support for European languages
- Companion family: Works with Libre Caslon Text for body copy
Best Use Cases
Libre Caslon Display excels in:
- Editorial headlines: Perfect for magazine and newspaper mastheads
- Book covers: Classic, literary aesthetic
- Luxury branding: Sophisticated, timeless appearance
- Wedding and formal: Elegant invitations and announcements
- Historical themes: Period-appropriate for classical projects
Usage Tips
Use Libre Caslon Display exclusively for headlines and display text at 24px or larger. For body text, switch to Libre Caslon Text or another text-optimized serif. The single weight means you'll need to use size and color for typographic hierarchy. Pairs beautifully with geometric sans-serifs for a classic-meets-modern aesthetic.
Is Libre Caslon Display on Google Fonts?
Yes, Libre Caslon Display is available for free on Google Fonts. Get Libre Caslon Display on Google Fonts ↗
Alternative For (5)
Libre Caslon Display is a free alternative to the following premium fonts:
Compare Libre Caslon Display
See how Libre Caslon Display compares to other fonts side by side.
Font Pairings
Fonts that pair well with Libre Caslon Display based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Libre Caslon Display in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Georgia to minimize layout shift when loading Libre Caslon Display.
@font-face {
font-family: 'Libre Caslon Display Fallback';
src: local('Georgia');
ascent-override: 97%;
descent-override: 26.6%;
line-gap-override: 0%;
size-adjust: 88.07%;
}How to Use Libre Caslon Display
Copy these code snippets to quickly add Libre Caslon Display to your project.
CSS code for Libre Caslon Display
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display:wght@400&display=swap');HTML code for Libre Caslon 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=Libre+Caslon+Display:wght@400&display=swap" rel="stylesheet">Tailwind code for Libre Caslon Display
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'libre-caslon-display': ['"Libre Caslon Display"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-libre-caslon-display">Your text here</p>Next.js code for Libre Caslon Display
// Using next/font (Next.js 13+)
import { Libre_Caslon_Display } from 'next/font/google';
const libre_caslon_display = Libre_Caslon_Display({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={libre_caslon_display.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Libre Caslon Display"' }}>Your text</p>Expo and React Native code for Libre Caslon Display
// Install: npx expo install @expo-google-fonts/libre-caslon-display expo-font
import { useFonts, Libre_Caslon_Display_400Regular } from '@expo-google-fonts/libre-caslon-display';
export default function App() {
const [fontsLoaded] = useFonts({
Libre_Caslon_Display_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Libre_Caslon_Display_400Regular' }}>
Your text here
</Text>
);
}