Install FontSwap
Nunito Sans
About Nunito 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 →Nunito Sans is a sans-serif typeface designed by Vernon Adams and Jacques Le Bailly, derived from Nunito but without the rounded terminals. This creates a more neutral, versatile font while maintaining Nunito's balanced proportions and friendly character.
History and Design
Nunito Sans emerged as a companion to the original Nunito, addressing the need for a version without rounded terminals for contexts requiring a more professional or neutral appearance. The design retains Nunito's geometric foundation, open apertures, and balanced proportions while presenting a cleaner finish suitable for longer reading and interface design.
The project was updated in 2021 with variable font support and expanded weights, making it more versatile than ever.
Why Nunito Sans Works
By removing the rounded terminals, Nunito Sans achieves the neutral quality that makes fonts like Proxima Nova so popular, while remaining freely available. Its tall x-height ensures excellent readability at small sizes, making it particularly effective for user interfaces and body text.
Technical Features
- Variable font: Full weight axis from ExtraLight to Black
- 8 static weights: 200-900 with complete italic sets
- Extended Cyrillic: Full support for Russian and related languages
- High x-height: Optimized for screen readability
- OpenType features: Tabular figures, fractions, and case-sensitive forms
Best Use Cases
Nunito Sans excels in:
- User interfaces: Clean, readable UI components
- SaaS applications: Professional yet approachable product typography
- Documentation: Clear technical and instructional content
- Web applications: Versatile across headings and body text
Usage Tips
Nunito Sans performs excellently as a system font for applications requiring both headlines and body text. Use weights 300-400 for body text and 600-700 for headings to create clear hierarchy. The variable font version enables fine-tuned weight adjustments for responsive design. Pairs well with code fonts like JetBrains Mono or with serif alternatives like Source Serif Pro.
Is Nunito Sans on Google Fonts?
Yes, Nunito Sans is available for free on Google Fonts. Get Nunito Sans on Google Fonts ↗
Alternative For (6)
Nunito Sans is a free alternative to the following premium fonts:
Similar proportions with comparable balance between geometric and humanist qualities
Similar x-height and letter spacing, slightly softer curves
Compare Nunito Sans
See how Nunito Sans compares to other fonts side by side.
Variable Font Axes
Nunito Sans is a variable font with 2 axes you can fine-tune.
| Axis | Min | Default | Max |
|---|---|---|---|
| wght | 200 | 400 | 900 |
| opsz | 6 | 6 | 12 |
Font Pairings
Fonts that pair well with Nunito Sans based on contrast and complementary design characteristics.
Performance
Key metrics for evaluating Nunito Sans in production.
Font Metrics
Fallback CSS Overrides
Apply these overrides to Arial to minimize layout shift when loading Nunito Sans.
@font-face {
font-family: 'Nunito Sans Fallback';
src: local('Arial');
ascent-override: 101.1%;
descent-override: 35.3%;
line-gap-override: 0%;
size-adjust: 93.72%;
}How to Use Nunito Sans
Copy these code snippets to quickly add Nunito Sans to your project.
CSS code for Nunito Sans
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@100..900&display=swap');HTML code for Nunito 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=Nunito+Sans:wght@100..900&display=swap" rel="stylesheet">Tailwind code for Nunito Sans
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'nunito-sans': ['"Nunito Sans"', 'sans-serif'],
},
},
},
}
// Usage in HTML:
// <p class="font-nunito-sans">Your text here</p>Next.js code for Nunito Sans
// Using next/font (Next.js 13+)
import { Nunito_Sans } from 'next/font/google';
const nunito_sans = Nunito_Sans({
subsets: ['latin'],
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
export default function Component() {
return (
<p className={nunito_sans.className}>
Your text here
</p>
);
}
// Or using inline styles with Google Fonts link:
// <p style={{ fontFamily: '"Nunito Sans"' }}>Your text</p>Expo and React Native code for Nunito Sans
// Install: npx expo install @expo-google-fonts/nunito-sans expo-font
import { useFonts, Nunito_Sans_400Regular } from '@expo-google-fonts/nunito-sans';
export default function App() {
const [fontsLoaded] = useFonts({
Nunito_Sans_400Regular,
});
if (!fontsLoaded) return null;
return (
<Text style={{ fontFamily: 'Nunito_Sans_400Regular' }}>
Your text here
</Text>
);
}