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 (50)
DM Sans is a free alternative to the following premium fonts:
Similar geometric-grotesque blend with clean, modern proportions
Clean modern proportions with geometric precision, less personality
Clean, modern proportions with similar readability and minimal personality
Closest match for Brown's warm grotesque character with clean, modern proportions
Clean modern grotesque with strong weight range and screen-optimized proportions
Clean geometric-grotesque blend with modern proportions that echo Calibre's contemporary feel
Modern geometric grotesque with clean proportions and excellent screen rendering
Closest match for Centra No.1's geometric-grotesque balance with modern proportions
Geometric-leaning sans with clean modern proportions and variable font support
Google's geometric-humanist hybrid with low contrast and open apertures. Shares Concourse's restraint but leans geometric where Concourse leans humanist — a different flavor of the same quiet competence
Google-commissioned geometric sans with variable support and clean character
Clean modern sans that substitutes geometric precision for Favorit's handmade quality
Clean modern sans with comparable proportions and professional tone
Geometric-leaning grotesque with clean modern proportions matching Graphik's contemporary feel
Clean geometric-grotesque blend with modern proportions and broad weight range
Geometric-grotesque blend with clean proportions and modern sensibility
Geometric-leaning grotesque with clean, modern proportions
Geometric-leaning grotesque with clean, modern proportions
Comparable geometric-grotesque balance with clean, understated proportions
Google-commissioned geometric sans with variable support and clean character
Geometric-leaning grotesque with clean proportions that echo SF Pro's friendly precision
Accessible geometric sans with similar proportions and clean character
Contemporary geometric sans with comparable clean, professional character
Contemporary geometric sans with comparable clean, friendly personality
Geometric sans-serif with similar friendly, rounded character
Contemporary geometric sans with comparable versatility and clarity
Clean geometric sans with comparable UI and branding utility
Low-contrast geometric with a slightly warmer personality and excellent variable font support
Modern grotesque with clean proportions and contemporary screen optimization
Clean geometric with more neutral tone than GT Walsheim but similarly polished construction
Clean geometric-grotesque blend with similar neutral positioning and modern proportions
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.
- Score
- 68 /100 Good
- File Size
- 130.5 KB Light
- Weights
- 9 (variable) + Italics
- Languages
- 2 groups CDN delivery
Font Metrics
- x-Height Ratio
- 0.504
- Cap Height Ratio
- 0.7
- Ascender
- 992
- Descender
- -310
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>
);
}