Defy Convention

Where optical precision meets editorial soul

Cabinet Grotesk's variable optical sizing creates headlines that breathe at any scale. Spectral's screen-native elegance carries the narrative forward. A pairing for brands that refuse to play it safe.

Expressive grotesque meets refined serif. Cabinet Grotesk's optical sizing creates dramatic headlines while Spectral provides elegant reading.

editorialportfoliolanding page

Typefaces Used

Primarysans

Cabinet Grotesk

Expressive grotesque with variable optical sizing. Perfect for bold headlines.

Released 2022

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

Secondaryserif

Spectral

Production Type's response to screen reading. Designed for Google Docs and web.

Released 2017

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

Recommended Scale

Headline One

Cabinet Grotesk · 800 · 60px · 0.95

Headline Two

Cabinet Grotesk · 700 · 38px · 1.05

Headline Three

Spectral · 600 · 24px · 1.25

Body

Body text for paragraphs and long-form content.

Spectral · 400 · 17px · 1.75

Caption

Caption and metadata text

Spectral · 400 · 14px · 1.6

In Context

Design Essay · 12 min read

Defy Convention

Where optical precision meets editorial soul

“Art is not what you see, but what you make others see.”
Edgar Degas

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=Cabinet+Grotesk:wght@700;800&family=Spectral:wght@400;600&display=swap" rel="stylesheet">

CSS

h1 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-size: 60px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

h2 {
  font-family: "Cabinet Grotesk", sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.05;
}

h3 {
  font-family: "Spectral", serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

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

.caption {
  font-family: "Spectral", 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: {
        cabinetgrotesk: [""Cabinet Grotesk"", "sans-serif"],
        spectral: [""Spectral"", "serif"],
      },
      fontSize: {
        "h1": ["60px", { lineHeight: "0.95", fontWeight: "800" }],
        "h2": ["38px", { lineHeight: "1.05", fontWeight: "700" }],
        "h3": ["24px", { lineHeight: "1.25", fontWeight: "600" }],
        "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:
  Cabinet Grotesk, 800 weight
  Used for H1–H3
  Expressive grotesque with variable optical sizing. Perfect for bold headlines.

Body:
  Spectral, 400 weight
  Used for paragraphs and UI
  Production Type's response to screen reading. Designed for Google Docs and web.

Tone:
  bold, editorial, modern
  Expressive grotesque meets refined serif. Cabinet Grotesk's optical sizing creates dramatic headlines while Spectral provides elegant reading.

Use this scale:
  H1 — 60px / 0.95 / -0.03em
  H2 — 38px / 1.05
  H3 — 24px / 1.25
  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 — Cabinet Grotesk — 800 — 60px — line-height 0.95 — letter-spacing -0.03em
H2 — Cabinet Grotesk — 700 — 38px — line-height 1.05
H3 — Spectral — 600 — 24px — line-height 1.25
Body — Spectral — 400 — 17px — line-height 1.75
Caption — Spectral — 400 — 14px — line-height 1.6

Headings should feel bold and editorial.
Body text should feel readable and refined.

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.