Install FontSwap
Nunito
About Nunito
- 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 →Nunito is a well-balanced sans-serif typeface designed by Vernon Adams with rounded terminals and an approachable character. Originally created as a display font, it has evolved into a versatile family suitable for both headlines and body text.
History and Design
Vernon Adams designed Nunito as a rounded variant inspired by geometric sans-serifs. The typeface maintains geometric structure while softening the terminals, creating a friendly and approachable appearance. Jacques Le Bailly expanded the family with more weights and improved language support, and the project was later updated to include a variable font version.
The rounded terminals are Nunito's signature feature, giving it warmth without sacrificing the clean, modern aesthetic of geometric fonts.
Why Nunito is Popular
Nunito strikes an ideal balance between professionalism and friendliness, making it popular for brands that want to appear approachable without seeming casual. Its extensive language support and variable font technology make it practical for international projects requiring typographic flexibility.
Technical Features
- Variable font: Weight axis from 200 to 900
- 8 weights: ExtraLight to Black with matching italics
- Extended language support: Latin, Cyrillic, and Vietnamese
- Rounded terminals: Signature soft appearance throughout
- OpenType features: Numerator, denominator, fractions, and stylistic sets
Best Use Cases
Nunito excels in:
- Friendly branding: Approachable logos and marketing materials
- Educational content: Welcoming appearance for learning platforms
- Children's applications: Soft forms ideal for younger audiences
- Healthcare and wellness: Warm, reassuring typography
Usage Tips
Nunito's rounded forms read best at medium to large sizes. For body text, stick to weights 400-600 and consider increasing line height slightly to accommodate its open character. The heavier weights (700-900) create impactful headlines while maintaining the font's friendly personality. Pair with geometric serifs like Libre Baskerville for professional warmth.
Is Nunito on Google Fonts?
Yes, Nunito is available for free on Google Fonts. Get Nunito on Google Fonts ↗
Alternative For (19)
Nunito is a free alternative to the following premium fonts:
Excellent match with similar rounded terminals and geometric structure
Similar warmth and rounded terminals for approachable designs
Rounded variant that captures Futura's friendly character
Similar friendly geometric character with rounded terminals
Rounded geometric sans with variable support and excellent language coverage
Compare Nunito
See how Nunito compares to other fonts side by side.
Variable Font Axes
Nunito is a variable font with 1 axis you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 900 |
Font Pairings
Fonts that pair well with Nunito based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Nunito in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Nunito.
@font-face {
font-family: 'Nunito Fallback';
src: local('Arial');
ascent-override: 101.1%;
descent-override: 35.3%;
line-gap-override: 0%;
size-adjust: 93.34%;
}How to Use Nunito
Copy these code snippets to quickly add Nunito to your project.
CSS code for Nunito
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@100..900&display=swap');HTML code for Nunito
<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=Nunito:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Nunito
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'nunito': ['Nunito', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-nunito">Your text here</p>Next.js code for Nunito
// Using next/font (Next.js 13+)
import { Nunito } from 'next/font/google';
const nunito = Nunito({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={nunito.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: "'Nunito'" }}>Your text</p>Expo and React Native code for Nunito
// Install: npx expo install @expo-google-fonts/nunito expo-font
import { useFonts, Nunito_400Regular } from '@expo-google-fonts/nunito';
export default function App() {
const [fontsLoaded] = useFonts({
Nunito_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Nunito_400Regular' }}>
Your text here
</Text>
);
}