Install FontSwap
DM Serif Display
About DM Serif Display
- Source
- Google Fonts ↗
- Classification
- serif
- Weights
- 400
- Features
- Italics
Free to use, modify, and distribute. Can be used commercially without attribution.
What's allowed?
- ✓ Client work
- ✓ SaaS / Web apps
- ✓ YouTube / Video
- ✓ Sell products
- ✓ Print materials
Note: Derivative fonts must use the same license.
Full license guide →DM Serif Display is a high-contrast display serif drawn by Colophon Foundry and released through Google Fonts in 2019 under the SIL Open Font License. It is the display companion to DM Serif Text, optimised for large settings where the thin strokes can be seen.
Design
The contrast is the point. DM Serif Display sits in the transitional-to-didone range — hairline serifs, sharply modulated strokes, and vertical stress — which gives it the engraved, editorial quality that display serifs are usually hired for. The letterforms are tightly spaced by default, so it holds together as a headline block without needing manual tracking.
It descends from Bitstream's Latin family, redrawn and extended by Colophon. That heritage shows in the proportions: the x-height is moderate rather than fashionably large, which keeps the ascenders and descenders expressive at size.
Technical features
- One weight: Regular 400, with a true italic
- Not a variable font — there is no weight axis to interpolate
- Latin and Latin Extended coverage
- High stroke contrast with fine, unbracketed serifs
Best use cases
- Editorial headlines: magazines, long-form articles, essays
- Luxury and fashion branding: where high contrast reads as refinement
- Book and album covers: large single-line settings
- Pull quotes: paired with a neutral sans for body text
Where it struggles
The single weight is the real constraint. There is no Bold, so emphasis inside a headline has to come from size, colour or the italic — and no Light for very large settings. The high contrast is the other limit: below roughly 24px the hairlines thin out and, on standard-resolution screens or uncoated print stock, break up entirely. This is a display face and the name is honest about it.
Usage tips
Set it at 32px and above; if you need the same voice in body text, use DM Serif Text, which is drawn with the contrast reduced for exactly that. Pair it with a plain grotesque — DM Sans is the obvious sibling — and let the serif do all the expressive work. Tighten tracking slightly at very large sizes, and avoid all-caps settings, which expose the uneven rhythm of the capitals.
Is DM Serif Display on Google Fonts?
Yes, DM Serif Display is available for free on Google Fonts. Get DM Serif Display on Google Fonts ↗
Alternative For (2)
DM Serif Display is a free alternative to the following premium fonts:
Sharply modulated display serif with a comparable engraved quality.
Compare DM Serif Display
See how DM Serif Display compares to other fonts side by side.
How to Use DM Serif Display
Copy these code snippets to quickly add DM Serif Display to your project.
CSS code for DM Serif Display
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:wght@400&display=swap');HTML code for DM Serif Display
<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:wght@400&display=swap" rel="stylesheet">Tailwind code for DM Serif Display
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'dm-serif-display': ['"DM Serif Display"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-dm-serif-display">Your text here</p>Next.js code for DM Serif Display
// Using next/font (Next.js 13+)
import { DM_Serif_Display } from 'next/font/google';
const dm_serif_display = DM_Serif_Display({
subsets: ['latin'],
weight: ['400'],
});
export default function Component() {
return (
<p className={dm_serif_display.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"DM Serif Display"' }}>Your text</p>Expo and React Native code for DM Serif Display
// Install: npx expo install @expo-google-fonts/dm-serif-display expo-font
import { useFonts, DM_Serif_Display_400Regular } from '@expo-google-fonts/dm-serif-display';
export default function App() {
const [fontsLoaded] = useFonts({
DM_Serif_Display_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'DM_Serif_Display_400Regular' }}>
Your text here
</Text>
);
}