Lato font pairings
Lato is warm, rounded and readable at any size. It works as a text face under a stronger heading, or as a calm heading over a serif.
4 companions below, each shown with Lato as the heading and as the body text where that makes sense.
Lato + Abril Fatface
Abril Fatface 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.
Abril Fatface is a fat, high-contrast display face that makes a loud headline. Lato's calm, rounded text keeps the rest of the page quiet.
Heading font: Abril Fatface · Body font: Lato
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface:wght@400&family=Lato:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Abril Fatface', serif;
font-weight: 400;
}
body {
font-family: 'Lato', sans-serif;
font-weight: 400;
}Lato + Karla
Lato heading, Karla 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.
Karla 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 and Karla are both friendly sans serifs, so this is a quiet pairing where weight and size set the hierarchy.
Heading font: Lato · Body font: Karla
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Karla:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Lato', sans-serif;
font-weight: 700;
}
body {
font-family: 'Karla', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@700&family=Lato:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Karla', sans-serif;
font-weight: 700;
}
body {
font-family: 'Lato', sans-serif;
font-weight: 400;
}Lato + Merriweather
Lato 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, 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's sans headings over Merriweather's sturdy serif body is a classic split. The serif's large x-height keeps long paragraphs comfortable.
Heading font: Lato · Body font: Merriweather
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Merriweather:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Lato', 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=Lato:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Merriweather', serif;
font-weight: 700;
}
body {
font-family: 'Lato', sans-serif;
font-weight: 400;
}Lato + Francois One
Francois One 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.
Francois One is a heavy, compact sans suited to short, punchy headlines. Lato handles the readable text beneath it.
Heading font: Francois One · Body font: Lato
@import url('https://fonts.googleapis.com/css2?family=Francois+One:wght@400&family=Lato:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Francois One', sans-serif;
font-weight: 400;
}
body {
font-family: 'Lato', 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.