No Apologies

Bold typography for bold brands

Anton is unapologetically heavy, demanding attention without asking permission. DM Sans provides the friendly counterbalance, keeping your brand approachable despite its confidence.

Bold and unapologetic. Anton's heavy condensed forms demand attention, balanced by DM Sans's friendly geometry.

landing pagebrandingecommerce

Typefaces Used

Primarydisplay

Anton

Bold display sans for impact. Single weight for maximum punch.

Released 2011

Available weights: 400

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

Anton · 400 · 64px · 1

Headline Two

Anton · 400 · 42px · 1.05

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

No Apologies

Bold typography for bold brands

Anton is unapologetically heavy, demanding attention without asking permission. DM Sans provides the friendly counterbalance, keeping your brand approachable despite its confidence.

“Fortune favors the bold.”
Virgil

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

CSS

h1 {
  font-family: "Anton", sans-serif;
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
}

h2 {
  font-family: "Anton", sans-serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1.05;
}

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: {
        anton: [""Anton"", "sans-serif"],
        dmsans: [""DM Sans"", "sans-serif"],
      },
      fontSize: {
        "h1": ["64px", { lineHeight: "1", fontWeight: "400" }],
        "h2": ["42px", { lineHeight: "1.05", fontWeight: "400" }],
        "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:
  Anton, 400 weight
  Used for H1–H3
  Bold display sans for impact. Single weight for maximum punch.

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

Tone:
  bold, impactful, modern
  Bold and unapologetic. Anton's heavy condensed forms demand attention, balanced by DM Sans's friendly geometry.

Use this scale:
  H1 — 64px / 1
  H2 — 42px / 1.05
  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 — Anton — 400 — 64px — line-height 1
H2 — Anton — 400 — 42px — line-height 1.05
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 bold and impactful.
Body text should feel readable and modern.

Do NOT mix additional fonts.
Maintain consistent hierarchy throughout.