DM Sans
About DM Sans
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable, 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 Sans is a low-contrast geometric sans-serif typeface designed by Colophon Foundry for Google and released in 2019. It was created as part of the DeepMind branding project and has since become one of the most popular geometric sans fonts on Google Fonts.
History and Design
Colophon Foundry designed DM Sans specifically for Google's DeepMind artificial intelligence research laboratory. The typeface features geometric foundations with subtle humanist touches that improve readability. Its low contrast and open apertures make it highly legible at small sizes while maintaining a clean, modern aesthetic at display sizes.
Why DM Sans is Popular
DM Sans has gained widespread adoption due to its versatility and professional appearance. It serves as an excellent free alternative to premium geometric sans-serif fonts like Calibre, Cerebri Sans, and Sofia Pro. The combination of geometric precision and humanist warmth makes it suitable for both tech companies and traditional brands seeking a contemporary look.
Technical Features
- Variable font: Full weight range from Thin (100) to Black (900)
- Optical corrections: Subtle adjustments for improved readability
- Open apertures: Enhanced legibility at small sizes
- Clean geometry: Consistent, harmonious letterforms
- Italic styles: True italics with slight cursive touches
Best Use Cases
DM Sans excels in:
- Tech products: Perfect for apps, websites, and software interfaces
- Startup branding: Modern, approachable aesthetic
- Marketing materials: Clean presentation for digital campaigns
- Documentation: Readable for technical content
- Data visualization: Clear labels and annotations
Usage Tips
For UI text, use weight 400-500 for body and 600-700 for headings. The font's geometric nature works well at larger sizes for headlines. Pair with a serif like Merriweather or Source Serif Pro for editorial content. At very small sizes (below 14px), consider increasing letter-spacing slightly for improved legibility.
Alternative For (19)
DM Sans is a free alternative to the following premium fonts:
How to Use DM Sans
Copy these code snippets to quickly add DM Sans to your project.
CSS Import
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@100..900&display=swap');HTML Link Tags
<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@100..900&display=swap" rel="stylesheet">Tailwind CSS
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'dm-sans': ['"DM Sans"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-dm-sans">Your text here</p>React / Next.js
// Using next/font (Next.js 13+)
import { DM_Sans } from 'next/font/google';
const dm_sans = DM_Sans({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={dm_sans.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"DM Sans"' }}>Your text</p>