Editorial Edge

Contemporary serif for the digital age

Instrument Serif captures the current moment in editorial design. Refined yet approachable, distinctive yet readable. Paired with Inter, it creates the sophisticated voice modern publications demand.

The trending editorial combination. Instrument Serif's contemporary elegance is balanced by Inter's reliable body text. Currently very popular in design.

editorialblogportfolio

Typefaces Used

Primaryserif

Instrument Serif

Contemporary editorial serif with distinctive italic. Currently trending in design.

Released 2022

Available weights: 400

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

Instrument Serif · 400 · 52px · 1.1

Headline Two

Instrument Serif · 400 · 36px · 1.2

Headline Three

Instrument Serif · 400 · 24px · 1.3

Body

Body text for paragraphs and long-form content.

Inter · 400 · 16px · 1.75

Caption

Caption and metadata text

Inter · 400 · 14px · 1.5

In Context

Design Essay · 12 min read

Editorial Edge

Contemporary serif for the digital age

Instrument Serif captures the current moment in editorial design. Refined yet approachable, distinctive yet readable. Paired with Inter, it creates the sophisticated voice modern publications demand.

“Fashion fades, only style remains.”
Coco Chanel

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

CSS

h1 {
  font-family: "Instrument Serif", serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-family: "Instrument Serif", serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3 {
  font-family: "Instrument Serif", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
}

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

.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: {
        instrumentserif: [""Instrument Serif"", "serif"],
        inter: [""Inter"", "sans-serif"],
      },
      fontSize: {
        "h1": ["52px", { lineHeight: "1.1", fontWeight: "400" }],
        "h2": ["36px", { lineHeight: "1.2", fontWeight: "400" }],
        "h3": ["24px", { lineHeight: "1.3", fontWeight: "400" }],
        "body": ["16px", { lineHeight: "1.75", 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:
  Instrument Serif, 400 weight
  Used for H1–H3
  Contemporary editorial serif with distinctive italic. Currently trending in design.

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

Tone:
  editorial, elegant, modern
  The trending editorial combination. Instrument Serif's contemporary elegance is balanced by Inter's reliable body text. Currently very popular in design.

Use this scale:
  H1 — 52px / 1.1 / -0.02em
  H2 — 36px / 1.2 / -0.01em
  H3 — 24px / 1.3
  Body — 16px / 1.75
  Caption — 14px / 1.5

UI Generation Prompt

Use when asking AI to generate code

When generating UI or HTML, use this typography system:

H1 — Instrument Serif — 400 — 52px — line-height 1.1 — letter-spacing -0.02em
H2 — Instrument Serif — 400 — 36px — line-height 1.2 — letter-spacing -0.01em
H3 — Instrument Serif — 400 — 24px — line-height 1.3
Body — Inter — 400 — 16px — line-height 1.75
Caption — Inter — 400 — 14px — line-height 1.5

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

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.