The Weight of Words

On the delicate balance between elegance and clarity

Every letterform carries centuries of evolution. The high contrast of classical serifs meets the measured neutrality of contemporary sans. A dialogue between heritage and utility that defines modern editorial design.

The quintessential editorial pairing. Playfair's high-contrast elegance meets Inter's clean legibility. Perfect for modern magazines and premium content.

editorialbloglanding page

Typefaces Used

Primaryserif

Playfair Display

High-contrast transitional serif with elegant, editorial presence. Perfect for luxury brands and sophisticated headlines.

Released 2011

Available weights: 400, 500, 600, 700, 800, 900

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

Playfair Display · 700 · 48px · 1.1

Headline Two

Playfair Display · 600 · 32px · 1.2

Headline Three

Playfair Display · 600 · 24px · 1.3

Body

Body text for paragraphs and long-form content.

Inter · 400 · 16px · 1.7

Caption

Caption and metadata text

Inter · 400 · 14px · 1.5

In Context

Design Essay · 12 min read

The Weight of Words

On the delicate balance between elegance and clarity

“Typography is the craft of endowing human language with a durable visual form.”
Robert Bringhurst

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

CSS

h1 {
  font-family: "Playfair Display", serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-family: "Playfair Display", serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3 {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

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

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

Tailwind Config

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

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        playfairdisplay: [""Playfair Display"", "serif"],
        inter: [""Inter"", "sans-serif"],
      },
      fontSize: {
        "h1": ["48px", { lineHeight: "1.1", fontWeight: "700" }],
        "h2": ["32px", { lineHeight: "1.2", fontWeight: "600" }],
        "h3": ["24px", { lineHeight: "1.3", fontWeight: "600" }],
        "body": ["16px", { lineHeight: "1.7", fontWeight: "400" }],
        "caption": ["14px", { lineHeight: "1.5", 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:
  Playfair Display, 700 weight
  Used for H1–H3
  High-contrast transitional serif with elegant, editorial presence. Perfect for luxury brands and sophisticated headlines.

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

Tone:
  elegant, modern, editorial
  The quintessential editorial pairing. Playfair's high-contrast elegance meets Inter's clean legibility. Perfect for modern magazines and premium content.

Use this scale:
  H1 — 48px / 1.1 / -0.02em
  H2 — 32px / 1.2 / -0.01em
  H3 — 24px / 1.3
  Body — 16px / 1.7
  Caption — 14px / 1.5

UI Generation Prompt

Use when asking AI to generate code

When generating UI or HTML, use this typography system:

H1 — Playfair Display — 700 — 48px — line-height 1.1 — letter-spacing -0.02em
H2 — Playfair Display — 600 — 32px — line-height 1.2 — letter-spacing -0.01em
H3 — Playfair Display — 600 — 24px — line-height 1.3
Body — Inter — 400 — 16px — line-height 1.7
Caption — Inter — 400 — 14px — line-height 1.5

Headings should feel elegant and modern.
Body text should feel readable and modern.

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.