bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Great Font Pairings

Font Pairing Rules

Great font pairings are essential to great design!

Here are some basic rules to create great font pairings:

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.

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.

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).

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

Formatted code
body {
  background-color: black;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: gray;
}
h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}

Live preview

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:

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.

Helvetica and Garamond

Helvetica and Garamond is another classic combination that uses web safe fonts:

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.

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

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.

Ubuntu and Lora

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.

Abril Fatface and Poppins

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.

Cinzel and Fauna One

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.

Fjalla One and Libre Baskerville

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.

Space Mono and Muli

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.

Spectral and Rubik

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.

Oswald and Noto Sans

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.

For a list of all free Google Fonts, visit our How To - Google Fonts Tutorial .

Previous

CSS Google Fonts

Next

CSS Font Property

This chapter

Overview
108

Lessons

263m

Read time

1. CSS Tutorial2. CSS Introduction3. CSS Syntax4. CSS Selectors5. CSS Grouping Selectors6. How To Add CSS7. How To Add Internal CSS8. How To Add Inline CSS9. Multiple Style Sheets & Cascading Order10. CSS Comments11. CSS Errors12. CSS Colors13. CSS RGB Colors14. CSS HEX Colors15. CSS HSL Colors16. CSS Backgrounds17. CSS Background Image18. CSS Background Image Repeat19. CSS Background Attachment20. CSS Background Shorthand21. CSS Borders22. CSS Border Width23. CSS Border Color24. CSS Shorthand Border Property25. CSS Rounded Borders26. CSS Margins27. CSS Margin Collapse28. CSS Padding29. CSS Padding and box-sizing30. CSS Height and Width31. CSS Min/Max Height and Width32. CSS Box Model33. CSS Outline34. CSS Outline Width35. CSS Outline Color36. CSS Outline Shorthand37. CSS Outline Offset38. CSS Text Color39. CSS Text Alignment40. CSS Text Decoration41. CSS Text Decoration Styles42. CSS Text Transformation43. CSS Text Spacing44. CSS Text Shadow45. CSS Web Safe Fonts46. CSS Font Fallbacks47. CSS Font Style48. CSS Font Size49. CSS Google Fonts50. CSS Great Font Pairings51. CSS Font Property52. CSS Icons - Font Awesome53. CSS Icons - Bootstrap54. CSS Icons - Google55. CSS Links56. CSS Link Buttons57. CSS Lists58. CSS Tables59. CSS Table Size (Width and Height)60. CSS Table Alignment61. CSS Table Styling62. CSS Responsive Tables63. CSS The display Property64. CSS Hide Elements65. CSS The max-width Property66. CSS The position Property67. CSS Fixed and Absolute Positioning68. CSS Sticky Positioning69. CSS Position Offsets70. CSS The z-index Property71. CSS The overflow Property72. CSS overflow-x and overflow-y73. CSS Float74. CSS clear and Clearfix Hack75. CSS display: inline-block76. CSS Center Align77. CSS Horizontal Align78. CSS Vertical Align79. CSS Combinators80. CSS Pseudo-classes81. CSS Interactive Pseudo-classes82. CSS Structural Pseudo-classes83. CSS Pseudo-elements84. CSS Pseudo-elements for Text85. CSS Pseudo-elements for Content86. CSS Opacity87. CSS Navigation Bars88. CSS Vertical Navigation Bar89. CSS Horizontal Navigation Bar90. CSS Dropdowns91. CSS Advanced Dropdowns92. CSS Image Gallery93. CSS Image Sprites94. CSS Attribute Selectors95. CSS Advanced Attribute Selectors96. CSS Forms97. CSS Form Inputs98. CSS Form Focus and Icons99. CSS Form Elements100. CSS Counters101. CSS Units102. CSS Absolute Units103. CSS Relative Units104. CSS Inheritance105. CSS Specificity106. CSS Specificity Hierarchy107. CSS The !important Rule108. CSS Math Functions

On this page

Font Pairing RulesComplementUse Font SuperfamiliesContrast is KingChoose Only One BossGeorgia and VerdanaHelvetica and GaramondPopular Google Font PairingsMerriweather and Open SansUbuntu and LoraAbril Fatface and PoppinsCinzel and Fauna OneFjalla One and Libre BaskervilleSpace Mono and MuliSpectral and RubikOswald and Noto Sans