Montserrat font pairings
Montserrat is wide, round and strong, so it works best in headings and buttons. These companions are calmer and narrower, which keeps the body text compact under it.
5 companions below, each shown with Montserrat as the heading and as the body text where that makes sense.
Montserrat + Source Sans 3
Montserrat 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, 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 is wide and geometric while Source Sans 3 is narrower and more humanist. The body stays compact under a headline with plenty of presence.
Heading font: Montserrat · Body font: Source Sans 3
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Source+Sans+3:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Montserrat', 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=Montserrat:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Source Sans 3', sans-serif;
font-weight: 700;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}Montserrat + Fira Sans
Montserrat heading, Fira 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.
Fira 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.
Both are sans serifs, but Fira's humanist details and slightly narrower letters give paragraphs a different texture from Montserrat's round shapes. The pair is clear and a little technical.
Heading font: Montserrat · Body font: Fira Sans
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Fira+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
body {
font-family: 'Fira Sans', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@700&family=Montserrat:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Fira Sans', sans-serif;
font-weight: 700;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}Montserrat + Karla
Montserrat 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, 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.
Karla's compact, slightly quirky letters balance Montserrat's wide headings. The body stays tidy at small sizes.
Heading font: Montserrat · Body font: Karla
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Karla:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Montserrat', 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=Montserrat:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Karla', sans-serif;
font-weight: 700;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}Montserrat + Hind
Montserrat heading, Hind 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.
Hind 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.
Hind is a plain, neutral text face that stays out of the way of Montserrat's headings. It also adds Devanagari support for bilingual pages.
Heading font: Montserrat · Body font: Hind
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Hind:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
body {
font-family: 'Hind', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@700&family=Montserrat:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Hind', sans-serif;
font-weight: 700;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}Montserrat + Inconsolata
Montserrat heading, Inconsolata 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.
Inconsolata 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.
Inconsolata supplies a monospace voice for code, captions and notes against Montserrat's clean headings. Keep it to short passages.
Heading font: Montserrat · Body font: Inconsolata
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Inconsolata:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
body {
font-family: 'Inconsolata', monospace;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&family=Montserrat:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Inconsolata', monospace;
font-weight: 700;
}
body {
font-family: 'Montserrat', 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.