Libre Caslon Display

Libre Caslon Display font preview
Replaces: Romana (80%) | OFL-1.1 | Updated: Jan 2026

About Libre Caslon Display

Classification
serif
Weights
400
Features
Standard
SIL Open Font License 1.1

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 →
Get Libre Caslon Display Free ↗

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.

Alternative For (5)

Libre Caslon Display is a free alternative to the following premium fonts:

[Jean-Baptiste Morizot] · serif

Comparable bold serif display

View all alternatives →
#2 Gliko 75%
[Rui Abreu] · serif

Comparable warm serif

View all alternatives →
#3 Migra 70%
[Pangram Pangram] · serif

Classic serif for display

View all alternatives →
#4 Regal 78%
[Production Type] · serif

Comparable editorial serif

View all alternatives →
#5 Romana 80%
[Bitstream] · serif

Similar classical display

View all alternatives →

How to Use Libre Caslon Display

Copy these code snippets to quickly add Libre Caslon Display to your project.

CSS Import

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display:wght@400&display=swap');

HTML Link Tags

<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 CSS

// 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>

React / Next.js

// 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>