Back to Explore
Modern Classic|sans
minimalmodernfriendlyclean

DM Sans

Simply Effective

One font, no compromises

DM Sans proves that sometimes less is more. Its friendly geometry handles every typographic challenge with consistent warmth, from hero headlines to footnotes.

Clean and versatile. DM Sans's friendly geometry handles every typographic need with consistent warmth and clarity.

saas uidashboardbranding

Typefaces Used

Primarysans

DM Sans

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

Designed by Colophon Foundry

Released 2019

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

Recommended Scale

H1

Headline One

DM Sans · 700 · 48px · 1.1

H2

Headline Two

DM Sans · 600 · 32px · 1.15

H3

Headline Three

DM Sans · 600 · 22px · 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

Simply Effective

One font, no compromises

DM Sans proves that sometimes less is more. Its friendly geometry handles every typographic challenge with consistent warmth, from hero headlines to footnotes.

“Simplicity is the ultimate sophistication.”

Leonardo da Vinci

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

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

h3 {
  font-family: "DM Sans", sans-serif;
  font-size: 22px;
  font-weight: 600;
  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;
}
Tailwind Config
// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        dmsans: [""DM Sans"", "sans-serif"],
      },
      fontSize: {
        "h1": ["48px", { lineHeight: "1.1", fontWeight: "700" }],
        "h2": ["32px", { lineHeight: "1.15", fontWeight: "600" }],
        "h3": ["22px", { lineHeight: "1.25", fontWeight: "600" }],
        "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:
  DM Sans, 700 weight
  Used for H1–H3
  Low-contrast geometric sans with friendly character. Excellent for UI and branding.

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

Tone:
  minimal, modern, friendly
  Clean and versatile. DM Sans's friendly geometry handles every typographic need with consistent warmth and clarity.

Use this scale:
  H1 — 48px / 1.1 / -0.02em
  H2 — 32px / 1.15
  H3 — 22px / 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 — DM Sans — 700 — 48px — line-height 1.1 — letter-spacing -0.02em
H2 — DM Sans — 600 — 32px — line-height 1.15
H3 — DM Sans — 600 — 22px — 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 minimal and modern.
Body text should feel readable and modern.

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.