Loading...

Contact

10 Awesome Web Typography Combination

16 Jun 2016 by Ravi Sah
Share Blog Post

First of all let me introduce you about Web Font and how it used in website. Web typography combination represents to the use of fonts on the World Wide Web (www). Web font's allows us to use font like which is not installed in your system. Now days Google Font is in craze, it allows you to integrate more then 2 font's in your website or application. It is very easy to use in your website, google font can be added by 3 ways in your website which are given below. Suppose i want to add PT Sans Font in my website then here it goes...

1st way to put it in your html page under head tag, for example


<head>
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
</head>

2nd way to put it in your CSS file, for example


@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);

3rd and last way to use it is by Java Script, for example


<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'PT+Sans:400,400italic,700,700italic:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); 
</script>

Now just integrate the font family into your CSS file like given below and its done :)


body {
  font-family: 'PT Sans', sans-serif;
}

Top 10 font Combo's

Typography is an art and, in web there are thousands of fonts available, it is obviously difficult for non-designers to find the perfect font combination. Here i am telling you some useful font combination's for websites and applications with demo.

1. Montserrat + Open Sans

Font family for Montserrat font is 'Montserrat', sans-serif and font family for Open Sans font is 'Open Sans', sans-serif

Montserrat + Open Sans Combination

2. Roboto + Roboto Slab

Font family for Roboto font is 'Roboto', sans-serif and font family for Roboto Slab font is 'Roboto Slab', serif

Roboto + Roboto Slab Combination

3. Raleway + Roboto

Font family for Raleway font is 'Raleway', sans-serif and font family for Roboto font is 'Roboto', sans-serif

Raleway + Roboto Combination

4. Oswald + Roboto

Font family for Oswald font is 'Oswald', sans-serif and font family for Roboto font is 'Roboto', sans-serif

Oswald + Roboto Combination

5. Playfair Display + Open Sans

Font family for Playfair Display font is 'Playfair Display', serif and font family for Open Sans font is 'Open Sans', sans-serif

Playfair Display + Open Sans Combination

6. Lato + Merriweather

Font family for Lato font is 'Lato', sans-serif and font family for Merriweather font is 'Merriweather', serif

Lato + Merriweather Combination

7. Oxygen + Source Sans Pro

Font family for Oxygen font is 'Oxygen', sans-serif and font family for Source Sans Pro font is 'Source Sans Pro', sans-serif

Oxygen + Source Sans Pro Combination

8. Philosopher + Muli

Font family for Philosopher font is 'Philosopher', sans-serif and font family for Muli font is 'Muli', sans-serif

Philosopher and Muli Combination

9. Ubuntu + Cabin

Font family for Ubuntu font is 'Ubuntu', sans-serif and font family for Cabin font is 'Cabin', sans-serif

Ubuntu and Cabin Combination

10. Open Sans + PT Sans

Font family for Open Sans font is 'Open Sans', sans-serif and font family for PT Sans font is 'PT Sans', sans-serif

Open Sans + PT Sans Combination

There are manny more font combination's. You can choose from these also and can reverse them. By putting together essential visual components, you can built a great personality for your brand.

Share Blog Post
Ravi Sah

Ravi Sah

Creative Website Designer

Post Blog Comments

Ready to discuss your project?

Close Free Consuting Form
Responsivness

Free Consultant

100% Privacy. I never share your details.

Close Free Consuting Form

Project Detail