Back to Explore
Modern Classic|sans + serif
professionalcalmelegantreadable

Manrope + Source Serif 4

Considered Choices

Distinctive clarity for thoughtful brands

Manrope's semi-condensed character adds subtle distinction to headlines while Source Serif's Adobe-engineered legibility handles extended reading with grace. Quiet confidence, impeccable execution.

Distinctive sans meets refined serif. Manrope's unique character paired with Source Serif's exceptional legibility for sophisticated content.

corporateblogeditorial

Typefaces Used

Primarysans

Manrope

Semi-condensed geometric sans with humanist touches. Distinctive yet highly functional.

Designed by Mikhail Sharanda

Released 2018

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

Secondaryserif

Source Serif 4

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

Designed by Frank Grießhammer

Released 2014

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

Recommended Scale

H1

Headline One

Manrope · 700 · 48px · 1.05

H2

Headline Two

Manrope · 600 · 32px · 1.15

H3

Headline Three

Source Serif 4 · 600 · 24px · 1.25

Body

Body text for paragraphs and long-form content.

Source Serif 4 · 400 · 17px · 1.75

Caption

Caption and metadata text

Manrope · 500 · 13px · 1.5

In Context

Design Essay · 12 min read

Considered Choices

Distinctive clarity for thoughtful brands

Manrope's semi-condensed character adds subtle distinction to headlines while Source Serif's Adobe-engineered legibility handles extended reading with grace. Quiet confidence, impeccable execution.

“Have nothing in your houses that you do not know to be useful or believe to be beautiful.”

William Morris

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=Manrope:wght@500;600;700&family=Source+Serif+4:wght@400;600&display=swap" rel="stylesheet">
CSS
h1 {
  font-family: "Manrope", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  font-family: "Manrope", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
}

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

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

.caption {
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
Tailwind Config
// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        manrope: [""Manrope"", "sans-serif"],
        sourceserif4: [""Source Serif 4"", "serif"],
      },
      fontSize: {
        "h1": ["48px", { lineHeight: "1.05", fontWeight: "700" }],
        "h2": ["32px", { lineHeight: "1.15", fontWeight: "600" }],
        "h3": ["24px", { lineHeight: "1.25", fontWeight: "600" }],
        "body": ["17px", { lineHeight: "1.75", fontWeight: "400" }],
        "caption": ["13px", { lineHeight: "1.5", fontWeight: "500" }],
      },
    },
  },
};

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:
  Manrope, 700 weight
  Used for H1–H3
  Semi-condensed geometric sans with humanist touches. Distinctive yet highly functional.

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, calm, elegant
  Distinctive sans meets refined serif. Manrope's unique character paired with Source Serif's exceptional legibility for sophisticated content.

Use this scale:
  H1 — 48px / 1.05 / -0.02em
  H2 — 32px / 1.15
  H3 — 24px / 1.25
  Body — 17px / 1.75
  Caption — 13px / 1.5

UI Generation Prompt

Use when asking AI to generate code

When generating UI or HTML, use this typography system:

H1 — Manrope — 700 — 48px — line-height 1.05 — letter-spacing -0.02em
H2 — Manrope — 600 — 32px — line-height 1.15
H3 — Source Serif 4 — 600 — 24px — line-height 1.25
Body — Source Serif 4 — 400 — 17px — line-height 1.75
Caption — Manrope — 500 — 13px — line-height 1.5

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

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.