Intellectual Rigor

Where scholarship meets innovation

Adobe's meticulously crafted Source Serif handles extended reading with scholarly precision, while Space Grotesk injects contemporary energy into navigation and UI. A pairing for serious content with modern delivery.

Intellectual and modern. Source Serif's refined readability paired with Space Grotesk's tech-forward character creates a smart, contemporary editorial voice.

editorialblogcorporate

Typefaces Used

Primaryserif

Source Serif 4

Adobe's open-source serif designed for long-form reading. Exceptionally legible with classic proportions.

Released 2014

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

Secondarysans

Space Grotesk

Geometric sans with distinctive character. Tech-forward yet approachable.

Released 2018

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

Recommended Scale

Headline One

Source Serif 4 · 700 · 46px · 1.1

Headline Two

Source Serif 4 · 600 · 30px · 1.2

Headline Three

Space Grotesk · 600 · 20px · 1.3

Body

Body text for paragraphs and long-form content.

Source Serif 4 · 400 · 18px · 1.75

Caption

Caption and metadata text

Space Grotesk · 400 · 14px · 1.5

In Context

Design Essay · 12 min read

Intellectual Rigor

Where scholarship meets innovation

“The details are not the details. They make the design.”
Charles Eames

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=Source+Serif+4:wght@400;600;700&family=Space+Grotesk:wght@400;600&display=swap" rel="stylesheet">

CSS

h1 {
  font-family: "Source Serif 4", serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
}

h2 {
  font-family: "Source Serif 4", serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
}

h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.body-text {
  font-family: "Source Serif 4", serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
}

.caption {
  font-family: "Space Grotesk", 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: {
        sourceserif4: [""Source Serif 4"", "serif"],
        spacegrotesk: [""Space Grotesk"", "sans-serif"],
      },
      fontSize: {
        "h1": ["46px", { lineHeight: "1.1", fontWeight: "700" }],
        "h2": ["30px", { lineHeight: "1.2", fontWeight: "600" }],
        "h3": ["20px", { lineHeight: "1.3", fontWeight: "600" }],
        "body": ["18px", { 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:
  Source Serif 4, 700 weight
  Used for H1–H3
  Adobe's open-source serif designed for long-form reading. Exceptionally legible with classic proportions.

Body:
  Source Serif 4, 400 weight
  Used for paragraphs and UI
  Adobe's open-source serif designed for long-form reading. Exceptionally legible with classic proportions.

Tone:
  professional, modern, editorial
  Intellectual and modern. Source Serif's refined readability paired with Space Grotesk's tech-forward character creates a smart, contemporary editorial voice.

Use this scale:
  H1 — 46px / 1.1
  H2 — 30px / 1.2
  H3 — 20px / 1.3
  Body — 18px / 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 — Source Serif 4 — 700 — 46px — line-height 1.1
H2 — Source Serif 4 — 600 — 30px — line-height 1.2
H3 — Space Grotesk — 600 — 20px — line-height 1.3
Body — Source Serif 4 — 400 — 18px — line-height 1.75
Caption — Space Grotesk — 400 — 14px — line-height 1.5

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

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.