Install FontSwap
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.
Is DM Sans on Google Fonts?
Yes, DM Sans is available for free on Google Fonts. Get DM Sans on Google Fonts ↗
Alternative For (23)
DM Sans is a free alternative to the following premium fonts:
Google-commissioned geometric sans with variable support and clean character
Google-commissioned geometric sans with variable support and clean character
Compare DM Sans
See how DM Sans compares to other fonts side by side.
Variable Font Axes
DM Sans is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 100 | 400 | 1000 |
| opsz | 9 | 14 | 40 |
Font Pairings
Fonts that pair well with DM Sans based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating DM Sans in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading DM Sans.
@font-face {
font-family: 'DM Sans Fallback';
src: local('Arial');
ascent-override: 99.2%;
descent-override: 31%;
line-gap-override: 0%;
size-adjust: 97.19%;
}How to Use DM Sans
Copy these code snippets to quickly add DM Sans to your project.
CSS code for DM Sans
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@100..900&display=swap');HTML code for DM Sans
<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 code for DM Sans
// 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>Next.js code for DM Sans
// 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>Expo and React Native code for DM Sans
// Install: npx expo install @expo-google-fonts/dm-sans expo-font
import { useFonts, DM_Sans_400Regular } from '@expo-google-fonts/dm-sans';
export default function App() {
const [fontsLoaded] = useFonts({
DM_Sans_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'DM_Sans_400Regular' }}>
Your text here
</Text>
);
}