Roboto font pairings
Roboto is practical and compact, with a neutral voice. It takes on more character when the heading font is heavier, rounder or a serif.
5 companions below, each shown with Roboto as the heading and as the body text where that makes sense.
Roboto + Archivo Black
Archivo Black 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.
Archivo Black is a very heavy, single-weight sans that makes a loud headline. Roboto stays compact and neutral underneath.
Heading font: Archivo Black · Body font: Roboto
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black:wght@400&family=Roboto:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Archivo Black', sans-serif;
font-weight: 400;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}Roboto + Lora
Roboto 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, 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.
Lora's calligraphic serif headings add warmth to Roboto's mechanical sans text. The mix of curved and straight shapes keeps the page varied.
Heading font: Roboto · Body font: Lora
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Lora:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Roboto', 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=Roboto:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Lora', serif;
font-weight: 700;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}Roboto + Rokkitt
Roboto heading, Rokkitt 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.
Rokkitt 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.
Rokkitt is a slab serif with a sporty, geometric build. Roboto text gives it a plain counterweight.
Heading font: Roboto · Body font: Rokkitt
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Rokkitt:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
body {
font-family: 'Rokkitt', serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@700&family=Roboto:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Rokkitt', serif;
font-weight: 700;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}Roboto + Nunito
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.
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.
Nunito has rounded terminals that soften Roboto's sharper corners. The pair feels friendly and suits apps and onboarding screens.
Heading font: Roboto · Body font: Nunito
@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;
}Swap the roles
@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;
}Roboto + Raleway
Roboto heading, Raleway 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.
Raleway 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.
Raleway headings add a lighter, more stylish tone to Roboto's practical body. The width and weight differences are enough to separate the roles.
Heading font: Roboto · Body font: Raleway
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Raleway:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
body {
font-family: 'Raleway', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
body {
font-family: 'Roboto', 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.