Here is one important rule to follow, when choosing typefaces for your projects. 1
Use maximum 2 fonts for each project. And make sure they look different. 2
Let's discuss first half of this rule. 3
Why only 2? Because deciphering too many font styles is overwhelming. And 2 will give you enough room 4
for any specific personality, that you want to portray, 5
say through some Display typeface. And have something more neutral for the paragraph and other text. 6
As for the second half of this rule, if you use 2 typefaces that are too similar, it will feel like you miss clicked 7
and accidentally picked a wrong font for one of them. 8
The headline is an Open Sans and the paragraph is set in Roboto. 9
The only contrast that is created is through their size and the weight of the headline. 10
If we put them in same weights and sizes, you'll see they are way too similar, but not the same. 11
If you're going with two very similar types, then why not just go with one of them? 12
That's a perfectly reasonable thing to do. 13
In this example, I replaced Open Sans with Playfair Display. 14
This looks significantly better. 15
The contrast between these two typefaces is very high. 16
First one is a Modern Serif and the second one is a neutral Sans Serif that has high readability 17
for a smaller text. Now, this looks deliberate and intentional. 18
You know, one of the best ways to make design look good, is to make it feel intentional. 19
Sometimes you can break the rules, and ignore the guidelines, and do something that is completely out 20
of line. But if it feels intentional, it will probably look good. 21
This is why learning and practising these design rules and guidelines is going to make you a very good 22
web designer, because your work will feel and look intentional. 23
It's gonna feel like you have put some work and thought process behind it and you weren't just throwing 24
things around. 25
Funny enough, Open Sans and Roboto is very commonly used pairing. Google fonts has this option to 26
show popular pairings for the fonts that you select. 27
This just points to the fact that there are a ton of web designers out there, who have no understanding 28
of good design principles. 29
And if you follow these simple typographic guidelines, you will make your designs much more superior. 30
This doesn't mean you can't pair 2 Sans Serif typefaces together. When you do, 31
it just has to make sense. 32
For instance, when a pair 2 Sans Serif types, it's usually because I want something with a personality 33
for the headline text, and then something neutral with excellent readability for the body text. For the 34
main body text, I often use the same typefaces across all projects. 35
Depending on what's my obsession for a certain period of time. I choose something that is 36
neutral and has a lot of font weights like Open Sans, Roboto or Muli. 37
This way then I have a lot of freedom with headlines. I can use fonts with limited weights, but a bit more 38
personality. And I will choose something that's most fitting with the personality of that particular 39
project and the brand.