0
1
00:00:00,600 --> 00:00:06,690
Now when you're combining different typefaces usually you will have a different typeface for the heading
1

2
00:00:07,050 --> 00:00:08,510
versus the body.
2

3
00:00:08,520 --> 00:00:14,520
So if you're thinking about a webpage, you know your your title will usually be different from the body
3

4
00:00:14,790 --> 00:00:16,780
in terms of the font or the typeface.
4

5
00:00:16,830 --> 00:00:22,170
And this is to create slight contrast an interest in your designs. So let's look at some of the common
5

6
00:00:22,170 --> 00:00:25,740
rules that designers use when they combine different fonts.
6

7
00:00:25,740 --> 00:00:30,120
The first rule is that serifs and San serifs work together really well.
7

8
00:00:30,120 --> 00:00:36,390
So if you have a heading that uses a serif typeface and a body that uses a san serif typeface then
8

9
00:00:36,390 --> 00:00:42,120
that tends to create a good design because san serifs have slightly increased readability compared to
9

10
00:00:42,120 --> 00:00:42,810
serifs.
10

11
00:00:42,840 --> 00:00:46,280
So they are great typeface for the body of text.
11

12
00:00:46,310 --> 00:00:52,140
And similarly the other way also works quite nicely if you have a san serif heading but with a serif
12

13
00:00:52,320 --> 00:00:56,960
body. And that little bit of contrast creates a beautiful design.
13

14
00:00:57,160 --> 00:01:03,120
Now just don't mix a san serif with san serif or serif with a serif because it can look a little bit
14

15
00:01:03,240 --> 00:01:05,850
bland and undifferentiated
15

16
00:01:05,880 --> 00:01:07,730
and hence it can look undesigned.
16

17
00:01:07,740 --> 00:01:12,930
And the other thing is that while we tend to say that two different typefaces or two different fonts
17

18
00:01:13,230 --> 00:01:18,190
will make your design look more elevated, to many fonts will ruin a good party.
18

19
00:01:18,330 --> 00:01:25,500
So, if you find yourself using three or more fonts, then really think hard about it and evaluate whether if
19

20
00:01:25,590 --> 00:01:32,020
you really need so many fonts. The rule to stick to is that two different fonts will look really good,
20

21
00:01:32,070 --> 00:01:36,300
three is really at a stretch but four is already way too many
21

22
00:01:36,330 --> 00:01:42,270
and you should be cutting down. So as we discussed with the different colors having different moods,
22

23
00:01:42,420 --> 00:01:49,220
so do fonts. And this designer actually came up with a different type face for each of the States of America.
23

24
00:01:49,230 --> 00:01:54,650
So for example Alaska is represented by this snowy kind of typeface
24

25
00:01:54,660 --> 00:01:57,780
and Texas is represented by the Western typeface.
25

26
00:01:57,780 --> 00:02:01,500
So each typeface has a personality and has a mood.
26

27
00:02:01,530 --> 00:02:07,820
If you use the wrong type face with the wrong mood for your designs it can look incredibly jarring.
27

28
00:02:07,830 --> 00:02:12,510
So always try to appreciate the mood of the typeface. Just as in the beginning of the talk when we
28

29
00:02:12,510 --> 00:02:18,140
compare these two love letters, appreciating the mood of the typeface is incredibly important.
29

30
00:02:18,180 --> 00:02:23,850
And if you mix together different moods your design can look incredibly strange.
30

31
00:02:23,850 --> 00:02:29,760
For example this one here where you've got a you know roaring 20s kind of fonts combined with the mechanical
31

32
00:02:29,760 --> 00:02:33,060
typeface, looks just odd and very out of place.
32

33
00:02:33,060 --> 00:02:38,430
And similarly here where you've got something that looks like it's from days of Chaucer versus the typeface
33

34
00:02:38,430 --> 00:02:40,560
for the Compaq computers branding
34

35
00:02:40,560 --> 00:02:42,750
then again it looks very strange.
35

36
00:02:42,810 --> 00:02:47,330
So try to make sure that the era of your typefaces are similar.
36

37
00:02:47,370 --> 00:02:53,160
So to remember previously when we spoke about the different families within the serif and san serif families
37

38
00:02:53,490 --> 00:02:59,950
where certain typefaces were from slightly older days versus some which were slightly more modern.
38

39
00:03:00,030 --> 00:03:06,480
If you mix different typefaces that are markedly from different eras it can look very strange as well. But
39

40
00:03:06,480 --> 00:03:12,210
if you get the mood of your typefaces right then you start creating some incredibly beautiful designs.
40

41
00:03:12,210 --> 00:03:18,360
So to summarize the things that you should try to keep similar are the moods of the typeface as well
41

42
00:03:18,360 --> 00:03:19,930
as the time era,
42

43
00:03:20,040 --> 00:03:26,520
so combining something that's old with old and new with new. And the things that you should contrast
43

44
00:03:26,580 --> 00:03:32,030
is the serifness, so a san serif heading with a serif body and vice versa.
44

45
00:03:32,340 --> 00:03:35,910
And the other thing that you should contrast is the weight of your typeface.
45

46
00:03:35,910 --> 00:03:41,680
So for example when you're working in a word processor, you only get the choice between regular and bold.
46

47
00:03:41,790 --> 00:03:48,630
But actually when you download fonts in its entirety, you get a whole range of weights from light to
47

48
00:03:48,630 --> 00:03:54,750
thin to medium to bold extra thick et cetera and you can play around with these different weights
48

49
00:03:55,050 --> 00:03:59,940
contrasting them between the title and the body to create interest in your designs.
49

50
00:03:59,940 --> 00:04:07,620
And finally these six fonts just never ever ever use them and stay as far away from them as you can because
50

51
00:04:07,620 --> 00:04:13,110
no matter what you do they will pretty much never ever look good in design. And even if we're just designing
51

52
00:04:13,110 --> 00:04:18,930
for the neighborhood bake sale, remember that practice is everywhere so don't relapse and go back to
52

53
00:04:18,930 --> 00:04:19,870
comic sans.
53

54
00:04:19,950 --> 00:04:20,990
It's not worth it.
54

55
00:04:21,060 --> 00:04:21,590
OK.
55

56
00:04:21,600 --> 00:04:28,770
And similar to- so similar to the tools I mentioned in the color theory part of the lesson,
56

57
00:04:28,800 --> 00:04:32,900
I have some really nice tools that I like to use for typography as well.
57

58
00:04:33,090 --> 00:04:34,500
There's one called WhatFont
58

59
00:04:34,530 --> 00:04:41,490
which is a free tool for Chrome and Firefox I believe which allows you to essentially spy on the web
59

60
00:04:41,490 --> 00:04:43,570
pages that you come across day to day.
60

61
00:04:43,740 --> 00:04:49,530
So if you are reading the New Yorker and you're suddenly thinking "Oh you know what? That that font will
61

62
00:04:49,530 --> 00:04:52,850
work really nicely for the project that I've got in mind."
62

63
00:04:52,950 --> 00:04:58,780
Then you can use WhatFont to just highlight it and see what is the typeface they using, what's the size, what
63

64
00:04:58,830 --> 00:04:59,930
the color, what's the
64

65
00:05:00,090 --> 00:05:03,650
line height, what's the thickness of it,
65

66
00:05:03,680 --> 00:05:05,280
what's the weight of it etc.
66

67
00:05:05,310 --> 00:05:06,890
And it's really really useful.
67

68
00:05:06,900 --> 00:05:09,000
Now what if you find a font that you like
68

69
00:05:09,000 --> 00:05:11,560
how do you go about downloading it?
69

70
00:05:11,580 --> 00:05:16,810
Well there's quite a lot of websites that cater to download.
70

71
00:05:16,830 --> 00:05:19,440
So font.com is one such example.
71

72
00:05:19,530 --> 00:05:22,720
But in most of them you do have to pay for commercial use.
72

73
00:05:22,740 --> 00:05:28,440
But this website Font Squirrel has a whole bunch of fonts that are free for commercial use.
73

74
00:05:28,500 --> 00:05:34,860
Then I like to use a tool called Sky Fonts which is a Mac app which allows you to incorporate a new
74

75
00:05:34,860 --> 00:05:38,940
font into any of your application pretty much in two taps.
75

76
00:05:38,940 --> 00:05:45,300
So it's a really really easy way of starting to use some of these new fonts that you come across.
76

77
00:05:45,300 --> 00:05:49,870
All right so that was a whirlwind tour of typographic relating to digital design.
77

78
00:05:50,130 --> 00:05:56,100
In the next section we're going to talk about user interface design and some of its intricacies relating
78

79
00:05:56,100 --> 00:05:57,680
to mobile development.
79

80
00:05:57,690 --> 00:05:59,260
So I'll see on the next lesson.