Nunito Sans
About Nunito Sans
- Source
- Google Fonts ↗
- Classification
- sans-serif
- Weights
- Variable (100-900)
- Features
- Variable, Italics
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.
Alternative For (2)
Nunito Sans is a free alternative to the following premium fonts:
Similar x-height and letter spacing, slightly softer curves
Similar proportions with comparable balance between geometric and humanist qualities
How to Use Nunito Sans
Copy these code snippets to quickly add Nunito Sans to your project.
CSS Import
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@100..900&display=swap');HTML Link Tags
<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 CSS
// 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>React / Next.js
// 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>