Timeless Authority

Trust built through typographic heritage

Baskerville's transitional elegance has conveyed credibility for over two centuries. Paired with Inter's pixel-perfect precision, this system bridges the gravitas of print with the demands of digital interfaces.

A pairing that evokes trust and authority. Baskerville's centuries-old elegance combined with Inter's modern functionality. Ideal for publications and professional services.

editorialblogcorporate

Typefaces Used

Primaryserif

Libre Baskerville

Web-optimized Baskerville revival. Timeless elegance with excellent screen rendering.

Released 2012

Available weights: 400, 700

Secondarysans

Inter

The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.

Released 2016

Available weights: 100, 200, 300, 400, 500, 600, 700, 800, 900

Recommended Scale

Headline One

Libre Baskerville · 700 · 44px · 1.15

Headline Two

Libre Baskerville · 700 · 28px · 1.25

Headline Three

Libre Baskerville · 400 · 22px · 1.3

Body

Body text for paragraphs and long-form content.

Inter · 400 · 17px · 1.75

Caption

Caption and metadata text

Inter · 400 · 14px · 1.6

In Context

Design Essay · 12 min read

Timeless Authority

Trust built through typographic heritage

“Type is a beautiful group of letters, not a group of beautiful letters.”
Matthew Carter

Developer Exports

Google Fonts

<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+Baskerville:wght@400;700&family=Inter:wght@400&display=swap" rel="stylesheet">

CSS

h1 {
  font-family: "Libre Baskerville", serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
}

h2 {
  font-family: "Libre Baskerville", serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
}

h3 {
  font-family: "Libre Baskerville", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}

.body-text {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
}

.caption {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

Tailwind Config

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        librebaskerville: [""Libre Baskerville"", "serif"],
        inter: [""Inter"", "sans-serif"],
      },
      fontSize: {
        "h1": ["44px", { lineHeight: "1.15", fontWeight: "700" }],
        "h2": ["28px", { lineHeight: "1.25", fontWeight: "700" }],
        "h3": ["22px", { lineHeight: "1.3", fontWeight: "400" }],
        "body": ["17px", { lineHeight: "1.75", fontWeight: "400" }],
        "caption": ["14px", { lineHeight: "1.6", fontWeight: "400" }],
      },
    },
  },
};

export default config;

AI-Ready Exports

Copy these structured prompts to brief AI tools on your typography system. Paste directly into ChatGPT, Claude, or any LLM.

System Description

Explain this type system to an AI

Use this typographic system:

Headings:
  Libre Baskerville, 700 weight
  Used for H1–H3
  Web-optimized Baskerville revival. Timeless elegance with excellent screen rendering.

Body:
  Inter, 400 weight
  Used for paragraphs and UI
  The definitive UI typeface. Designed for computer screens with exceptional legibility at all sizes.

Tone:
  classic, professional, warm
  A pairing that evokes trust and authority. Baskerville's centuries-old elegance combined with Inter's modern functionality. Ideal for publications and professional services.

Use this scale:
  H1 — 44px / 1.15
  H2 — 28px / 1.25
  H3 — 22px / 1.3
  Body — 17px / 1.75
  Caption — 14px / 1.6

UI Generation Prompt

Use when asking AI to generate code

When generating UI or HTML, use this typography system:

H1 — Libre Baskerville — 700 — 44px — line-height 1.15
H2 — Libre Baskerville — 700 — 28px — line-height 1.25
H3 — Libre Baskerville — 400 — 22px — line-height 1.3
Body — Inter — 400 — 17px — line-height 1.75
Caption — Inter — 400 — 14px — line-height 1.6

Headings should feel classic and professional.
Body text should feel readable and modern.

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.