DEV Community

Cover image for 8 Best Web Font Pairing
Vansh Sharma
Vansh Sharma

Posted on • Updated on

8 Best Web Font Pairing

No doubt

Why fonts are a necessary part of the Website? They cover 80% of your website. With such a high percentage we can't even think of neglecting them.

But selecting the Best and Appropriate fonts from 1000s of fonts is in itself is a fight. But no worries with these πŸ‘‡ 8 ideas it will become a cakewalk for you.

1. Merriweather and Open Sans

  • Merriweather for Headings.
  • Open Sans for Text.

Screenshot (635).png

2. Ubuntu and Lora

  • Ubuntu for Headings.
  • Lora for Text.

Screenshot (636).png

3. Abril Fatface and Poppins

  • Abril Fatface for Headings.
  • Poppins for Text.

Screenshot (637).png

4. Cinzel and Fauna One

  • Cinzel for Headings.
  • Fauna One for Text.

Screenshot (638).png

5. Fjalla One and Libre Baskerville

  • Fjalla for Headings.
  • Libre Baskerville for Text.

Screenshot (639).png

6. Space Mono and Muli

  • Space Mono for Headings.
  • Muli for Text.

Screenshot (640).png

7. Spectral and Rubik

  • Spectral for Headings.
  • Rubik for Text.

Screenshot (641).png

8. Oswald and Noto Sans

  • Oswald for Headings.
  • Noto Sans for Text.

Screenshot (642).png

That's all for this blog. Now we will meet in the next blog.

Until then Keep Learning, Keep Growing.

Reference: W3Schools

Connect with me πŸ‘‡

Twitter LinkedIn Gmail DEV

Discussion (2)

Collapse
lukeshiru profile image
LUKESHIRU

Ideally (both from a performance and from a design point of view) you should try to use only one font family and load just the variants you need for it (like bold, light and regular maybe).

Collapse
vanshsh profile image
Vansh Sharma Author

Thanks I will keep it in my mind in next project ☺️