Nunito font pairings
Nunito has rounded letter ends that make pages feel soft and friendly. Pair it with a face that has sharper edges so the roles stay clear.
4 companions below, each shown with Nunito as the heading and as the body text where that makes sense.
Nunito + Alegreya
Nunito heading, Alegreya body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Alegreya heading, Nunito body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Alegreya's calligraphic serif adds a literary warmth to Nunito's rounded shapes. It works for blogs and creative portfolios.
Heading font: Nunito · Body font: Alegreya
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Alegreya:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Nunito', sans-serif;
font-weight: 700;
}
body {
font-family: 'Alegreya', serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@700&family=Nunito:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Alegreya', serif;
font-weight: 700;
}
body {
font-family: 'Nunito', sans-serif;
font-weight: 400;
}Nunito + Lora
Nunito heading, Lora body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Lora heading, Nunito body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Lora's serif headings make a clear contrast to Nunito's soft round text. It suits friendly editorial pages.
Heading font: Nunito · Body font: Lora
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Lora:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Nunito', sans-serif;
font-weight: 700;
}
body {
font-family: 'Lora', serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Nunito:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Lora', serif;
font-weight: 700;
}
body {
font-family: 'Nunito', sans-serif;
font-weight: 400;
}Nunito + Open Sans
Nunito heading, Open Sans body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Open Sans heading, Nunito body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Open Sans is neutral enough to sit beside Nunito without competing with its rounded shapes.
Heading font: Nunito · Body font: Open Sans
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Open+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Nunito', sans-serif;
font-weight: 700;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&family=Nunito:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
body {
font-family: 'Nunito', sans-serif;
font-weight: 400;
}Nunito + Roboto
Nunito heading, Roboto body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Roboto heading, Nunito body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Roboto's firmer shapes balance the soft, rounded Nunito. The text stays crisp at small sizes.
Heading font: Nunito · Body font: Roboto
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Nunito', sans-serif;
font-weight: 700;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Nunito:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
body {
font-family: 'Nunito', sans-serif;
font-weight: 400;
}More font pairings
These are Google Fonts, made by the designers named on each page and published free under an open licence. Zaps lists them, and downloads come from Google Fonts.