0
1
00:00:00,160 --> 00:00:04,490
Here is one important rule to follow, when choosing typefaces for your projects.
1

2
00:00:04,500 --> 00:00:09,840
Use maximum 2 fonts for each project. And make sure they look different.
2

3
00:00:09,840 --> 00:00:12,080
Let's discuss first half of this rule.
3

4
00:00:12,090 --> 00:00:19,710
Why only 2? Because deciphering too many font styles is overwhelming. And 2 will give you enough room
4

5
00:00:19,710 --> 00:00:23,050
for any specific personality, that you want to portray,
5

6
00:00:23,130 --> 00:00:29,460
say through some Display typeface. And have something more neutral for the paragraph and other text.
6

7
00:00:29,460 --> 00:00:36,480
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

8
00:00:36,480 --> 00:00:39,750
and accidentally picked a wrong font for one of them.
8

9
00:00:39,750 --> 00:00:44,300
The headline is an Open Sans and the paragraph is set in Roboto.
9

10
00:00:44,310 --> 00:00:48,930
The only contrast that is created is through their size and the weight of the headline.
10

11
00:00:48,930 --> 00:00:54,370
If we put them in same weights and sizes, you'll see they are way too similar, but not the same.
11

12
00:00:54,390 --> 00:00:58,050
If you're going with two very similar types, then why not just go with one of them?
12

13
00:00:58,050 --> 00:01:00,380
That's a perfectly reasonable thing to do.
13

14
00:01:00,450 --> 00:01:04,260
In this example, I replaced Open Sans with Playfair Display.
14

15
00:01:04,260 --> 00:01:05,980
This looks significantly better.
15

16
00:01:06,000 --> 00:01:09,120
The contrast between these two typefaces is very high.
16

17
00:01:09,120 --> 00:01:15,140
First one is a Modern Serif and the second one is a neutral Sans Serif that has high readability
17

18
00:01:15,150 --> 00:01:19,030
for a smaller text. Now, this looks deliberate and intentional.
18

19
00:01:19,080 --> 00:01:23,910
You know, one of the best ways to make design look good, is to make it feel intentional.
19

20
00:01:23,910 --> 00:01:28,950
Sometimes you can break the rules, and ignore the guidelines, and do something that is completely out
20

21
00:01:28,950 --> 00:01:34,620
of line. But if it feels intentional, it will probably look good.
21

22
00:01:34,620 --> 00:01:38,790
This is why learning and practising these design rules and guidelines is going to make you a very good
22

23
00:01:38,790 --> 00:01:43,230
web designer, because your work will feel and look intentional.
23

24
00:01:43,230 --> 00:01:49,050
It's gonna feel like you have put some work and thought process behind it and you weren't just throwing
24

25
00:01:49,050 --> 00:01:49,760
things around.
25

26
00:01:49,770 --> 00:01:54,750
Funny enough, Open Sans and Roboto is very commonly used pairing. Google fonts has this option to
26

27
00:01:54,750 --> 00:01:57,420
show popular pairings for the fonts that you select.
27

28
00:01:57,420 --> 00:02:01,800
This just points to the fact that there are a ton of web designers out there, who have no understanding
28

29
00:02:01,800 --> 00:02:03,000
of good design principles.
29

30
00:02:03,120 --> 00:02:08,340
And if you follow these simple typographic guidelines, you will make your designs much more superior.
30

31
00:02:08,490 --> 00:02:12,560
This doesn't mean you can't pair 2 Sans Serif typefaces together. When you do,
31

32
00:02:12,600 --> 00:02:14,010
it just has to make sense.
32

33
00:02:14,070 --> 00:02:20,250
For instance, when a pair 2 Sans Serif types, it's usually because I want something with a personality
33

34
00:02:20,250 --> 00:02:25,560
for the headline text, and then something neutral with excellent readability for the body text. For the
34

35
00:02:25,560 --> 00:02:28,910
main body text, I often use the same typefaces across all projects.
35

36
00:02:28,920 --> 00:02:34,980
Depending on what's my obsession for a certain period of time. I choose something that is
36

37
00:02:34,980 --> 00:02:40,650
neutral and has a lot of font weights like Open Sans, Roboto or Muli.
37

38
00:02:40,680 --> 00:02:45,480
This way then I have a lot of freedom with headlines. I can use fonts with limited weights, but a bit more
38

39
00:02:45,480 --> 00:02:50,310
personality. And I will choose something that's most fitting with the personality of that particular
39

40
00:02:50,310 --> 00:02:51,620
project and the brand.