Nunito

Nunito font preview
Replaces: Avenir (88%) | OFL-1.1 | Updated: Jan 2026

About Nunito

Classification
sans-serif
Weights
Variable (100-900)
Features
Variable, Italics
SIL Open Font License 1.1
Free to use, modify, and distribute. Can be used commercially without attribution.
Get Nunito Free ↗

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.

Alternative For (5)

Nunito is a free alternative to the following premium fonts:

#1 Avenir 88%
[Linotype] · sans-serif

Excellent match with similar rounded terminals and geometric structure

View all alternatives →
#2 Futura 75%
[URW Type Foundry] · sans-serif

Rounded variant that captures Futura's friendly character

View all alternatives →
[HVD Fonts] · sans-serif

Similar warmth and rounded terminals for approachable designs

View all alternatives →
#4 Circular 82%
[Lineto] · sans-serif

Comparable rounded geometric forms with friendly character

View all alternatives →
[Mostardesign] · sans-serif

Similar friendly geometric character with rounded terminals

View all alternatives →

How to Use Nunito

Copy these code snippets to quickly add Nunito to your project.

CSS Import

@import url('https://fonts.googleapis.com/css2?family=Nunito: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:wght@100..900&display=swap" rel="stylesheet">

Tailwind CSS

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'nunito': ['Nunito', 'sans-serif'],
      },
    },
  },
}

// Usage in HTML:
// <p class="font-nunito">Your text here</p>

React / Next.js

// 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>