Install FontSwap
Bodoni Moda
About Bodoni Moda
- Source
- Google Fonts ↗
- Classification
- 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 →Bodoni Moda is a modern revival of Giambattista Bodoni's iconic Didone typeface, designed by Owen Earl for Google Fonts. It brings Bodoni's dramatic high-contrast letterforms into the variable font era with both weight and optical size axes.
History and Design
Owen Earl created Bodoni Moda to provide a fashion-forward, freely available Bodoni for contemporary design. The typeface draws directly from Bodoni's 1798 Manuale Tipografico but optimizes for modern display usage. The optical size axis is particularly valuable — at small sizes, contrast is reduced for legibility; at display sizes, the dramatic hairlines and thick strokes that define Bodoni come through fully.
Why Bodoni Moda Matters
Bodoni Moda fills a gap between the faithful but limited Libre Bodoni and the expensive commercial versions. Its optical size axis makes it more versatile than static Bodoni fonts — a single file can serve both headlines and captions. The fashion-inspired aesthetic and wide weight range make it particularly suited to editorial and luxury design contexts.
Technical Features
- Variable font: Weight (400-900) and optical size (6-96) axes
- True italics: Carefully drawn oblique variants for all weights
- Optical sizing: Automatic contrast adjustment for different sizes
- Latin Extended: Comprehensive character support
- 6 static weights: Regular through Black
Best Use Cases
Bodoni Moda excels in:
- Fashion editorial: Magazine covers, lookbooks, and brand campaigns
- Luxury branding: High-end product packaging and identity systems
- Display typography: Headlines where dramatic contrast is desired
- Wedding stationery: Elegant invitations and announcements
- Art direction: Covers, posters, and visual storytelling
Usage Tips
Leverage the optical size axis by setting font-optical-sizing: auto in CSS. For display headlines, use weights 600-900 at 36px+ to maximize the Bodoni drama. Avoid body text below 14px where hairlines may vanish on screen. Pair with clean geometric sans-serifs like Montserrat or Jost for classic serif/sans contrast.
Is Bodoni Moda on Google Fonts?
Yes, Bodoni Moda is available for free on Google Fonts. Get Bodoni Moda on Google Fonts ↗
Alternative For (9)
Bodoni Moda is a free alternative to the following premium fonts:
Google Fonts Bodoni revival with optical sizing and variable weight
Google Fonts Bodoni revival with optical sizing and variable weight
Google Fonts Bodoni revival with optical sizing and variable weight
Google Fonts Bodoni revival with optical sizing and variable weight
Compare Bodoni Moda
See how Bodoni Moda compares to other fonts side by side.
Variable Font Axes
Bodoni Moda is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 400 | 400 | 900 |
| opsz | 6 | 18 | 96 |
How to Use Bodoni Moda
Copy these code snippets to quickly add Bodoni Moda to your project.
CSS code for Bodoni Moda
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@100..900&display=swap');HTML code for Bodoni Moda
<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=Bodoni+Moda:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Bodoni Moda
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'bodoni-moda': ['"Bodoni Moda"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-bodoni-moda">Your text here</p>Next.js code for Bodoni Moda
// Using next/font (Next.js 13+)
import { Bodoni_Moda } from 'next/font/google';
const bodoni_moda = Bodoni_Moda({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={bodoni_moda.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Bodoni Moda"' }}>Your text</p>Expo and React Native code for Bodoni Moda
// Install: npx expo install @expo-google-fonts/bodoni-moda expo-font
import { useFonts, Bodoni_Moda_400Regular } from '@expo-google-fonts/bodoni-moda';
export default function App() {
const [fontsLoaded] = useFonts({
Bodoni_Moda_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Bodoni_Moda_400Regular' }}>
Your text here
</Text>
);
}