Josefin Sans font pairings
Josefin Sans is slim and geometric with a vintage feel, and it needs a companion that adds weight or a text face with solid proportions.
5 companions below, each shown with Josefin Sans as the heading and as the body text where that makes sense.
Josefin Sans + Cardo
Josefin Sans heading, Cardo 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.
Cardo heading, Josefin 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.
Cardo is a scholarly serif with classical shapes. Together with Josefin Sans's geometric headings it gives a refined, bookish look.
Heading font: Josefin Sans · Body font: Cardo
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Cardo:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 700;
}
body {
font-family: 'Cardo', serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@700&family=Josefin+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Cardo', serif;
font-weight: 700;
}
body {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
}Josefin Sans + Abril Fatface
Abril Fatface heading, Josefin 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 fonts carry a fashion-magazine flavor. Abril Fatface supplies the weight and Josefin Sans handles the lighter supporting lines.
Heading font: Abril Fatface · Body font: Josefin Sans
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface:wght@400&family=Josefin+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Abril Fatface', serif;
font-weight: 400;
}
body {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
}Josefin Sans + Yeseva One
Yeseva One heading, Josefin 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.
Yeseva One is a decorative serif that suits titles. Josefin Sans's slim letters keep the supporting text light.
Heading font: Yeseva One · Body font: Josefin Sans
@import url('https://fonts.googleapis.com/css2?family=Yeseva+One:wght@400&family=Josefin+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Yeseva One', serif;
font-weight: 400;
}
body {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
}Josefin Sans + Lato
Josefin Sans heading, Lato 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.
Lato heading, Josefin 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.
Lato is a sturdy, rounded sans that gives Josefin Sans's narrow, elegant headings a readable text partner.
Heading font: Josefin Sans · Body font: Lato
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Lato:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 700;
}
body {
font-family: 'Lato', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Josefin+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Lato', sans-serif;
font-weight: 700;
}
body {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
}Josefin Sans + Playfair Display
Josefin Sans heading, Playfair Display 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.
Playfair Display heading, Josefin 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.
Playfair Display's high-contrast serif looks sharp at heading size, and Josefin Sans gives a thinner geometric counterpoint. It is a common fashion and wedding pairing.
Heading font: Josefin Sans · Body font: Playfair Display
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Playfair+Display:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 700;
}
body {
font-family: 'Playfair Display', serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Josefin+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
}
body {
font-family: 'Josefin 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.