Refined Simplicity

Where Garamond heritage meets geometric warmth

The old-style grace of Renaissance letterforms paired with friendly, approachable geometry. This combination speaks to brands that honor tradition while embracing accessibility. Luxury without pretension.

Timeless elegance meets modern clarity. Cormorant's refined Garamond heritage paired with DM Sans's friendly geometry creates an aspirational yet approachable feel.

brandingecommercelanding page

Typefaces Used

Primaryserif

Cormorant Garamond

Display version of the timeless Garamond. High contrast and refined for large sizes.

Released 2015

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

Secondarysans

DM Sans

Low-contrast geometric sans with friendly character. Excellent for UI and branding.

Released 2019

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

Recommended Scale

Headline One

Cormorant Garamond · 600 · 56px · 1.05

Headline Two

Cormorant Garamond · 500 · 36px · 1.15

Headline Three

Cormorant Garamond · 500 · 24px · 1.25

Body

Body text for paragraphs and long-form content.

DM Sans · 400 · 16px · 1.7

Caption

Caption and metadata text

DM Sans · 500 · 13px · 1.5

In Context

Design Essay · 12 min read

Refined Simplicity

Where Garamond heritage meets geometric warmth

“Elegance is not about being noticed, it's about being remembered.”
Giorgio Armani

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=Cormorant+Garamond:wght@500;600&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">

CSS

h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 56px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.15;
}

h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

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

.caption {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

Tailwind Config

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

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        cormorantgaramond: [""Cormorant Garamond"", "serif"],
        dmsans: [""DM Sans"", "sans-serif"],
      },
      fontSize: {
        "h1": ["56px", { lineHeight: "1.05", fontWeight: "600" }],
        "h2": ["36px", { lineHeight: "1.15", fontWeight: "500" }],
        "h3": ["24px", { lineHeight: "1.25", fontWeight: "500" }],
        "body": ["16px", { lineHeight: "1.7", 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:
  Cormorant Garamond, 600 weight
  Used for H1–H3
  Display version of the timeless Garamond. High contrast and refined for large sizes.

Body:
  DM Sans, 400 weight
  Used for paragraphs and UI
  Low-contrast geometric sans with friendly character. Excellent for UI and branding.

Tone:
  luxury, elegant, feminine
  Timeless elegance meets modern clarity. Cormorant's refined Garamond heritage paired with DM Sans's friendly geometry creates an aspirational yet approachable feel.

Use this scale:
  H1 — 56px / 1.05 / -0.01em
  H2 — 36px / 1.15
  H3 — 24px / 1.25
  Body — 16px / 1.7
  Caption — 13px / 1.5

UI Generation Prompt

Use when asking AI to generate code

When generating UI or HTML, use this typography system:

H1 — Cormorant Garamond — 600 — 56px — line-height 1.05 — letter-spacing -0.01em
H2 — Cormorant Garamond — 500 — 36px — line-height 1.15
H3 — Cormorant Garamond — 500 — 24px — line-height 1.25
Body — DM Sans — 400 — 16px — line-height 1.7
Caption — DM Sans — 500 — 13px — line-height 1.5

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

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.