DM Serif Display + DM Sans
Distinct serif and sans-serif families developed as part of the DM type suite.
Design your next idea beautifully.
A well-designed product begins with typography that creates hierarchy, clarity, and personality. Explore this combination in real-time by clicking and editing this text directly.
Meaningful Digital Experiences
Typography is the craft of endowing human language with a durable visual form. It guides the reader’s eye and establishes the brand’s tone of voice immediately.
“Good typography helps people understand your message before they consciously notice the typeface.”
Typography Breakdown: Why DM Serif Display and DM Sans Work Together
Coordinated type suite alignment with high stroke-contrast divergence.
Hero headlines, brand slogans, and section banners. Designed by Colophon Foundry, this high-contrast display serif establishes immediate authority in title hierarchies.
Product descriptions, features grids, and navigation labels. Crafted by Colophon Foundry, this geometric sans-serif supports comfortable, clear reading across variable viewport sizes.
Well-suited for contemporary digital agencies, DTC ecommerce stores, indie product packaging, and creative studio portfolios.
When working with conservative financial institutions or legal portals that require traditional serif typography instead of modern geometric flair.
Why This Pairing Works
Developed within the broader DM type suite, DM Serif Display and DM Sans share a coordinated contemporary context while delivering high stylistic contrast. The pronounced stroke modulation of DM Serif creates punchy display presence, while DM Sans provides clean, open, and friendly readability in supporting body copy.
Implementation Code
<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+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
:root {
--font-heading: "DM Serif Display", serif;
--font-body: "DM Sans", sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
}
body {
font-family: var(--font-body);
}Font Details
High-Contrast Display Serif • by Colophon Foundry
Geometric Sans-Serif • by Colophon Foundry