Source Sans 3 font pairings
Source Sans 3 is a clean humanist sans that stays comfortable in long text. It is a good body partner for serif or slab headings.
5 companions below, each shown with Source Sans 3 as the heading and as the body text where that makes sense.
Source Sans 3 + Merriweather
Source Sans 3 heading, Merriweather 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.
Merriweather 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.
Merriweather's sturdy serif headings sit well over the lighter, narrower Source Sans 3 text. This is a common split for articles.
Heading font: Source Sans 3 · Body font: Merriweather
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@700&family=Merriweather:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Source Sans 3', sans-serif;
font-weight: 700;
}
body {
font-family: 'Merriweather', serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Source+Sans+3:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Merriweather', serif;
font-weight: 700;
}
body {
font-family: 'Source Sans 3', sans-serif;
font-weight: 400;
}Source Sans 3 + Bitter
Source Sans 3 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, 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.
Bitter is a slab serif with a strong presence at heading size, while Source Sans 3 keeps paragraphs calm and compact.
Heading font: Source Sans 3 · Body font: Bitter
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@700&family=Bitter:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Source Sans 3', 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=Source+Sans+3:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Bitter', serif;
font-weight: 700;
}
body {
font-family: 'Source Sans 3', sans-serif;
font-weight: 400;
}Source Sans 3 + Cabin
Source Sans 3 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, 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.
Cabin and Source Sans 3 are both humanist sans serifs. The pair is quiet, with weight doing the work of hierarchy.
Heading font: Source Sans 3 · Body font: Cabin
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@700&family=Cabin:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Source Sans 3', 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=Source+Sans+3:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Cabin', sans-serif;
font-weight: 700;
}
body {
font-family: 'Source Sans 3', sans-serif;
font-weight: 400;
}Source Sans 3 + Roboto
Source Sans 3 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, 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.
Roboto's more mechanical shapes contrast with Source Sans 3's humanist ones. Both are built for screens, so they sit together without clashing.
Heading font: Source Sans 3 · Body font: Roboto
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@700&family=Roboto:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Source Sans 3', 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=Source+Sans+3:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
body {
font-family: 'Source Sans 3', sans-serif;
font-weight: 400;
}Source Sans 3 + Open Sans
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.
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.
Open Sans is wider and rounder than Source Sans 3. Use one for headings and one for text when you want small differences instead of strong contrast.
Heading font: Source Sans 3 · Body font: Open Sans
@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;
}Swap the roles
@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;
}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.