Open Sans font pairings
Open Sans is neutral and easy to read, which makes it a dependable body font. These companions add character in the headings.
5 companions below, each shown with Open Sans as the heading and as the body text where that makes sense.
Open Sans + Montserrat
Open Sans heading, Montserrat 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.
Montserrat 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.
Montserrat's wide, bold headings give Open Sans body text a strong lead. Both are clean sans serifs, so the contrast comes from width and weight.
Heading font: Open Sans · Body font: Montserrat
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&family=Montserrat:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}Open Sans + Bitter
Open Sans heading, Bitter 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.
Bitter 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.
A slab serif heading over Open Sans text adds character while the body stays neutral. Bitter's sturdy shapes hold up at large sizes.
Heading font: Open Sans · Body font: Bitter
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&family=Bitter:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
body {
font-family: 'Bitter', serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@700&family=Open+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Bitter', serif;
font-weight: 700;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}Open Sans + Source Sans 3
Open Sans 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, 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.
Both are humanist sans serifs, so this is a subtle pairing. Use it when you want one clear voice with small shifts between heading and text.
Heading font: Open Sans · Body font: Source Sans 3
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&family=Source+Sans+3:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Open Sans', 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=Open+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Source Sans 3', sans-serif;
font-weight: 700;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}Open Sans + Domine
Open Sans heading, Domine 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.
Domine 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.
Domine is a serif built for reading on screens, with a strong presence in headings. Open Sans keeps the supporting text plain.
Heading font: Open Sans · Body font: Domine
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&family=Domine:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
body {
font-family: 'Domine', serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Domine:wght@700&family=Open+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Domine', serif;
font-weight: 700;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}Open Sans + Alegreya
Open Sans 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, 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.
Alegreya's calligraphic serif makes warm headings, and Open Sans gives a neutral base for the text. It suits blogs and editorial sites.
Heading font: Open Sans · Body font: Alegreya
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&family=Alegreya:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Open Sans', 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=Open+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Alegreya', serif;
font-weight: 700;
}
body {
font-family: 'Open Sans', 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.