Raleway font pairings
Raleway is light and stylish, with thin strokes that look best at large sizes. Pair it with a sturdier face for text.
5 companions below, each shown with Raleway as the heading and as the body text where that makes sense.
Raleway + Merriweather
Raleway 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, Raleway 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.
Raleway's light, refined headings contrast with Merriweather's heavy serif text. The gap in weight is what makes the pair work.
Heading font: Raleway · Body font: Merriweather
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Merriweather:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Raleway', 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=Raleway:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Merriweather', serif;
font-weight: 700;
}
body {
font-family: 'Raleway', sans-serif;
font-weight: 400;
}Raleway + Bitter
Raleway 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, Raleway 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 designed for reading on screens. Under Raleway headings it gives the page a grounded, bookish body.
Heading font: Raleway · Body font: Bitter
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Bitter:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Raleway', 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=Raleway:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Bitter', serif;
font-weight: 700;
}
body {
font-family: 'Raleway', sans-serif;
font-weight: 400;
}Raleway + Cabin
Raleway 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, Raleway 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 is a humanist sans with a modest personality, so it supports Raleway instead of competing with it. Both are open and easy to scan.
Heading font: Raleway · Body font: Cabin
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Cabin:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Raleway', 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=Raleway:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Cabin', sans-serif;
font-weight: 700;
}
body {
font-family: 'Raleway', sans-serif;
font-weight: 400;
}Raleway + Hind
Raleway 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, Raleway 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 neutral and legible at small sizes, which lets Raleway's thin headline strokes carry the style.
Heading font: Raleway · Body font: Hind
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Hind:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Raleway', 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=Raleway:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Hind', sans-serif;
font-weight: 700;
}
body {
font-family: 'Raleway', sans-serif;
font-weight: 400;
}Raleway + Inconsolata
Raleway 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, Raleway 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 gives a technical counterpoint to Raleway's elegance. It suits a portfolio or documentation page where code sits next to polished headings.
Heading font: Raleway · Body font: Inconsolata
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Inconsolata:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Raleway', 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=Raleway:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Inconsolata', monospace;
font-weight: 700;
}
body {
font-family: 'Raleway', 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.