Font Pairing Rules
Great font pairings are key to great design. Here are some basic rules:
- Complement — pick fonts that go together, harmonizing without being too similar or too different.
- Use font superfamilies — a superfamily is a set of fonts designed to work together, so mixing fonts within one is safe (for example, the Lucida family).
- Contrast is king — fonts that are too alike can clash, while good contrast brings out the best in each. Pairing a serif with a sans-serif is a well-known combination.
- Choose only one boss — let one font lead to set a clear hierarchy, by varying size, weight, and color.
One boss
The large white Georgia heading clearly leads over the small gray Verdana body text.
Prompt
An HTML page that shows one font being the "boss" to set a hierarchy.
In an internal
<style> block, give the body a black background, Verdana sans-serif, 16px, gray text; and give the <h1> Georgia serif, 60px, white. Add a heading and a paragraph so the heading clearly dominates.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has beautiful mountains, glaciers and stunning fjords. The large white Georgia heading is clearly the boss over the small gray Verdana text.</p>
</body>
</html>
Georgia and Verdana
Georgia and Verdana is a classic combination that sticks to the web safe fonts.
Example
Georgia is used for headings and Verdana for the text.
Prompt
An HTML page that pairs Georgia headings with Verdana body text (web safe).
In an internal
<style> block, set the <h1> to Georgia, serif and the body to Verdana, sans-serif. Add a heading and a couple of paragraphs of text.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
}
h1 {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums.</p>
</body>
</html>
Helvetica and Garamond
Helvetica and Garamond is another classic combination that uses web safe fonts.
Example
Helvetica is used for headings and Garamond for the text.
Prompt
An HTML page that pairs Helvetica headings with Garamond body text (web safe).
In an internal
<style> block, set the <h1> to Helvetica, sans-serif and the body to Garamond, serif. Add a heading and a couple of paragraphs of text.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Garamond, serif;
}
h1 {
font-family: Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums.</p>
</body>
</html>
Popular Google Font Pairings
If you do not want to use standard HTML fonts, you can use Google Fonts, which are free and offer more than 1000 fonts. Below are some popular Google Web Font pairings.
Merriweather and Open Sans
Merriweather for headings, Open Sans for text.
Example
A Google Font pairing of Merriweather and Open Sans.
Prompt
An HTML page that pairs the Google Fonts Merriweather (headings) and Open Sans (text).
In the
<head>, link https://fonts.googleapis.com/css?family=Merriweather|Open+Sans, set the <h1> to "Merriweather", serif and the body to "Open Sans", sans-serif. Add a heading and a couple of paragraphs.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans">
<style>
body {
font-family: "Open Sans", sans-serif;
}
h1 {
font-family: "Merriweather", serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Ubuntu and Lora
Ubuntu for headings, Lora for text.
Example
A Google Font pairing of Ubuntu and Lora.
Prompt
An HTML page that pairs the Google Fonts Ubuntu (headings) and Lora (text).
In the
<head>, link https://fonts.googleapis.com/css?family=Ubuntu|Lora, set the <h1> to "Ubuntu", sans-serif and the body to "Lora", serif. Add a heading and a couple of paragraphs.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Lora">
<style>
body {
font-family: "Lora", serif;
}
h1 {
font-family: "Ubuntu", sans-serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Abril Fatface and Poppins
Abril Fatface for headings, Poppins for text.
Example
A Google Font pairing of Abril Fatface and Poppins.
Prompt
An HTML page that pairs the Google Fonts Abril Fatface (headings) and Poppins (text).
In the
<head>, link https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins, set the <h1> to "Abril Fatface", serif and the body to "Poppins", sans-serif. Add a heading and a couple of paragraphs.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Poppins">
<style>
body {
font-family: "Poppins", sans-serif;
}
h1 {
font-family: "Abril Fatface", serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Cinzel and Fauna One
Cinzel for headings, Fauna One for text.
Example
A Google Font pairing of Cinzel and Fauna One.
Prompt
An HTML page that pairs the Google Fonts Cinzel (headings) and Fauna One (text).
In the
<head>, link https://fonts.googleapis.com/css?family=Cinzel|Fauna+One, set the <h1> to "Cinzel", serif and the body to "Fauna One", serif. Add a heading and a couple of paragraphs.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel|Fauna+One">
<style>
body {
font-family: "Fauna One", serif;
}
h1 {
font-family: "Cinzel", serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Fjalla One and Libre Baskerville
Fjalla One for headings, Libre Baskerville for text.
Example
A Google Font pairing of Fjalla One and Libre Baskerville.
Prompt
An HTML page that pairs the Google Fonts Fjalla One (headings) and Libre Baskerville (text).
In the
<head>, link https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Baskerville, set the <h1> to "Fjalla One", sans-serif and the body to "Libre Baskerville", serif. Add a heading and a couple of paragraphs.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fjalla+One|Libre+Baskerville">
<style>
body {
font-family: "Libre Baskerville", serif;
}
h1 {
font-family: "Fjalla One", sans-serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Space Mono and Muli
Space Mono for headings, Muli for text.
Example
A Google Font pairing of Space Mono and Muli.
Prompt
An HTML page that pairs the Google Fonts Space Mono (headings) and Muli (text).
In the
<head>, link https://fonts.googleapis.com/css?family=Space+Mono|Muli, set the <h1> to "Space Mono", monospace and the body to "Muli", sans-serif. Add a heading and a couple of paragraphs.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono|Muli">
<style>
body {
font-family: "Muli", sans-serif;
}
h1 {
font-family: "Space Mono", monospace;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Spectral and Rubik
Spectral for headings, Rubik for text.
Example
A Google Font pairing of Spectral and Rubik.
Prompt
An HTML page that pairs the Google Fonts Spectral (headings) and Rubik (text).
In the
<head>, link https://fonts.googleapis.com/css?family=Spectral|Rubik, set the <h1> to "Spectral", serif and the body to "Rubik", sans-serif. Add a heading and a couple of paragraphs.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral|Rubik">
<style>
body {
font-family: "Rubik", sans-serif;
}
h1 {
font-family: "Spectral", serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>
Oswald and Noto Sans
Oswald for headings, Noto Sans for text.
Example
A Google Font pairing of Oswald and Noto Sans.
Prompt
An HTML page that pairs the Google Fonts Oswald (headings) and Noto Sans (text).
In the
<head>, link https://fonts.googleapis.com/css?family=Oswald|Noto+Sans, set the <h1> to "Oswald", sans-serif and the body to "Noto Sans", sans-serif. Add a heading and a couple of paragraphs.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Noto+Sans">
<style>
body {
font-family: "Noto Sans", sans-serif;
}
h1 {
font-family: "Oswald", sans-serif;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords.</p>
</body>
</html>