CSS Great Font Pairings
Great font pairings are essential to great design.
Font Pairing Rules
Here are some basic rules to create great font pairings:
1. Complement
It is always safe to find font pairings that complement one another.
A great font combination should harmonize, without being too similar or too different.
2. Use Font Superfamilies
A font superfamily is a set of fonts designed to work well together. So, using different fonts within the same superfamily is safe.
For example, the Lucida superfamily contains the following fonts: Lucida
Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif and Lucida Math.
3. Contrast is King
Two fonts that are too similar will often conflict. However, contrasts, done
the right way, brings out the best in each font.
Example: Combining serif with sans serif is a well known combination.
A strong superfamily includes both serif and sans serif variations of the same font (e.g. Lucida and Lucida Sans).
4. Choose Only One Boss
One font should be the boss. This establishes a hierarchy for the fonts on
your page. This can be achieved by varying the size, weight and color.
Example
No doubt "Georgia" is the boss here:
body { background-color: black; font-family: Verdana,
sans-serif; font-size: 16px; color: gray; }h1
{ font-family: Georgia, serif; font-size: 60px;
color: white;}
Try it Yourself »
Below, we have shown some popular font pairings that will suit many brands and contexts.
Georgia and Verdana
Georgia and Verdana is a classic combination. It also sticks to the web safe font standards:
Example
Use the "Georgia" font for headings, and "Verdana" for text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Try it Yourself »
Helvetica and Garamond
Helvetica and Garamond is another classic combination that uses web safe fonts:
Example
Use the "Helvetica" font for headings, and "Garamond" for text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Try it Yourself »
Popular Google Font Pairings
If you do not want to use standard fonts in HTML, you can use Google Fonts.
Google Fonts are free to use, and have more than 1000 fonts to choose from.
Below are some popular Google Web Font Pairings.
Merriweather and Open Sans
Example
Use the "Merriweather" font for headings, and "Open Sans" for text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Try it Yourself »
Ubuntu and Lora
Example
Use the "Ubuntu" font for headings, and "Lora" for text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Try it Yourself »
Abril Fatface and Poppins
Example
Use the "Abril Fatface" font for headings, and "Poppins" for text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Try it Yourself »
Cinzel and Fauna One
Example
Use the "Cinzel" font for headings, and "Fauna One" for text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Try it Yourself »
Fjalla One and Libre Baskerville
Example
Use the "Fjalla One" font for headings, and "Libre Baskerville" for text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Try it Yourself »
Space Mono and Muli
Example
Use the "Space Mono" font for headings, and "Muli" for text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Try it Yourself »
Spectral and Rubik
Example
Use the "Spectral" font for headings, and "Rubik" for text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Try it Yourself »
Oswald and Noto Sans
Example
Use the "Oswald" font for headings, and "Noto Sans" for text:
Beautiful Norway
Norway has a total area of 385,252 square
kilometers and a population of 5,438,657 (December 2020). Norway is bordered by
Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.
Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.
Try it Yourself »
For a list of all free Google Fonts, visit our How To - Google Fonts Tutorial.
★
+1
Reference: https://www.w3schools.com/css/css_font_pairings.asp