Ubuntu font pairings
Ubuntu has a distinct, slightly quirky character, with open curves and sharp cuts. Calmer companions let that character show without taking over.
5 companions below, each shown with Ubuntu as the heading and as the body text where that makes sense.
Ubuntu + Rokkitt
Ubuntu 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, Ubuntu 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's slab serifs make strong headings while Ubuntu's humanist body text stays friendly and legible.
Heading font: Ubuntu · Body font: Rokkitt
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&family=Rokkitt:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Ubuntu', 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=Ubuntu:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Rokkitt', serif;
font-weight: 700;
}
body {
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
}Ubuntu + Lora
Ubuntu 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, Ubuntu 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 bring a calmer, more traditional feel to Ubuntu's distinctive sans text.
Heading font: Ubuntu · Body font: Lora
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&family=Lora:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Ubuntu', 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=Ubuntu:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Lora', serif;
font-weight: 700;
}
body {
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
}Ubuntu + Kreon
Ubuntu heading, Kreon 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.
Kreon heading, Ubuntu 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.
Kreon is a slab serif with a clear, steady rhythm. Ubuntu text gives an approachable body under it.
Heading font: Ubuntu · Body font: Kreon
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&family=Kreon:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
}
body {
font-family: 'Kreon', serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Kreon:wght@700&family=Ubuntu:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Kreon', serif;
font-weight: 700;
}
body {
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
}Ubuntu + Cabin
Ubuntu heading, Cabin 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.
Cabin heading, Ubuntu 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.
Cabin is a quieter humanist sans than Ubuntu. The pair keeps one style and varies it by weight.
Heading font: Ubuntu · Body font: Cabin
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&family=Cabin:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
}
body {
font-family: 'Cabin', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@700&family=Ubuntu:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Cabin', sans-serif;
font-weight: 700;
}
body {
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
}Ubuntu + Source Sans 3
Ubuntu heading, Source Sans 3 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.
Source Sans 3 heading, Ubuntu 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.
Source Sans 3 is neutral next to Ubuntu's character, so it works well for longer text under Ubuntu headings.
Heading font: Ubuntu · Body font: Source Sans 3
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&family=Source+Sans+3:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
}
body {
font-family: 'Source Sans 3', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@700&family=Ubuntu:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Source Sans 3', sans-serif;
font-weight: 700;
}
body {
font-family: 'Ubuntu', 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.