0
1
00:00:00,240 --> 00:00:02,970
This is the opening title of the movie Gravity.
1

2
00:00:02,970 --> 00:00:06,180
Pay attention to how the type is set.
2

3
00:00:06,180 --> 00:00:11,400
Here's another one, from The Dark Knight Rises. Or this one, from Interstellar.
3

4
00:00:11,400 --> 00:00:12,990
Do you notice the similarity?
4

5
00:00:13,440 --> 00:00:19,470
All three have a very wide Letter-spacing. Letter-spacing is one of the attributes you can change about
5

6
00:00:19,470 --> 00:00:22,130
the font and customize it to your needs.
6

7
00:00:22,170 --> 00:00:26,900
You can make it very tight and snug, or you can make it nice and airy.
7

8
00:00:26,940 --> 00:00:30,580
This sort of extra wide spacing is called Panorama.
8

9
00:00:30,600 --> 00:00:38,040
It's a really cool design trick. And it kind of creates this nice, finished and refined look, and adds
9

10
00:00:38,040 --> 00:00:43,190
an extra importance to the text. And makes it feel like it's saying something very important.
10

11
00:00:43,230 --> 00:00:48,690
If you're ever stuck with a very boring and bland design, you can set your type in Panorama, and it will
11

12
00:00:48,720 --> 00:00:51,860
instantly going to give it a nice and refined look.
12

13
00:00:51,870 --> 00:00:57,720
For instance, if I need to add an extra title to a block of text, that already has a title, I can take
13

14
00:00:57,720 --> 00:01:00,660
that secondary title and set it in Panorama.
14

15
00:01:00,660 --> 00:01:04,560
There, secondary title now is very interesting, compared to what we had before.
15

16
00:01:04,590 --> 00:01:06,130
This feels more deliberate.
16

17
00:01:06,180 --> 00:01:09,330
It's secondary hence, not competing with our original headline.
17

18
00:01:09,330 --> 00:01:15,660
It has its own specific style, so I'll be able to repeat this on other similar blocks of text and be very
18

19
00:01:15,660 --> 00:01:16,770
identifiable.
19

20
00:01:16,770 --> 00:01:22,740
One big benefit of the Panorama type setting is that, it lets you shrink your font to a very small sizes,
20

21
00:01:23,070 --> 00:01:25,220
without losing readability.
21

22
00:01:25,230 --> 00:01:29,730
I've removed the Panoramic effect here and the text has become much less readable.
22

23
00:01:29,730 --> 00:01:35,190
This means I would have to increase the size of the font. But this now competes too much with the main
23

24
00:01:35,190 --> 00:01:36,150
headline.
24

25
00:01:36,150 --> 00:01:40,880
I want it to be the secondary information, but it has almost become the primary title.
25

26
00:01:40,920 --> 00:01:45,330
One thing to note, when setting type in this way, most of the time, you should use Uppercase.
26

27
00:01:45,330 --> 00:01:49,230
This effect doesn't really work well in lowercase letters.
27

28
00:01:49,260 --> 00:01:52,970
Okay, so that's about wide space, but how about tighter spacing?
28

29
00:01:52,980 --> 00:02:00,240
When would we want to use that? One such case is when dealing with large, heavy text. On large texts spaces
29

30
00:02:00,240 --> 00:02:02,880
between letters are proportionally large.
30

31
00:02:02,880 --> 00:02:06,570
For instance, I was working on a website for a scooter sharing company.
31

32
00:02:06,570 --> 00:02:13,290
As you can see, I'm using an enormous font size that is quite bold and heavy. The default letter spacing
32

33
00:02:13,290 --> 00:02:18,430
for this felt a little too spaced out for me. So I've added a negative letter spacing.
33

34
00:02:18,510 --> 00:02:24,660
If I'm using a very bold and large headline, I want to create a text that looks bold, heavy and concentrated
34

35
00:02:24,660 --> 00:02:30,070
in one tight space. Airy, free letter spacing is the opposite of what I want to achieve.
35

36
00:02:30,240 --> 00:02:32,490
So, I tightened things up in this case.
36

37
00:02:32,550 --> 00:02:38,250
Most of the time, you want to keep the default letter spacing for your text. But in specific cases you
37

38
00:02:38,250 --> 00:02:41,100
have an ability to customize the font to your needs.
38

39
00:02:41,100 --> 00:02:49,170
As a rule of thumb, if you're ever adjusting the letter spacing then, increase spacing as font gets smaller
39

40
00:02:49,230 --> 00:02:57,800
or lighter, and decreased spacing when it gets bigger and bolder. Let's compare this to identical text
40

41
00:02:57,800 --> 00:02:58,880
blocks.
41

42
00:02:58,880 --> 00:03:03,320
It's same font size and the text is exactly the same.
42

43
00:03:03,320 --> 00:03:08,330
Their difference is in their Line Spacing or Line Height.
43

44
00:03:08,410 --> 00:03:12,810
The type is set in Arial, 25 pixel size.
44

45
00:03:12,860 --> 00:03:20,030
The left paragraph has a default line height, but on the right one I've increased it. The default line height
45

46
00:03:20,030 --> 00:03:22,670
value of Ariel is very tight.
46

47
00:03:22,670 --> 00:03:29,090
This makes the text harder to read and follow. The increase line spacing on the second block, makes text
47

48
00:03:29,210 --> 00:03:35,840
more airy. It feels less heavy, easier to read. And even though it's longer in size, it still feels less
48

49
00:03:35,840 --> 00:03:42,290
intimidating than the original. Intimidating text is something to actually lookout for, people don't usually
49

50
00:03:42,290 --> 00:03:47,600
read text on websites, they scan. They are frantically scanning for keywords and phrases, to find what
50

51
00:03:47,600 --> 00:03:52,970
they are looking for, or to decide if the website is relevant for them altogether.
51

52
00:03:53,120 --> 00:03:58,300
The text on the right will help them scan text easier and find what they are looking for.
52

53
00:03:58,370 --> 00:04:02,600
You can try it yourself. Pause the video and try to read each text, as fast as you can.
53

54
00:04:02,900 --> 00:04:07,740
You'll notice that, you will have much easier and faster speed on the text on the right.
54

55
00:04:07,790 --> 00:04:13,100
The original line spacing will feel like running on a sandy beach, a little draggy and slow.
55

56
00:04:13,190 --> 00:04:17,920
This issue gets extremely evident when we deal with wide text blocks.
56

57
00:04:17,990 --> 00:04:23,180
When you finish reading one line of text in this block, jumping on the left to find the following line
57

58
00:04:23,210 --> 00:04:23,870
is a challenge.
58

59
00:04:23,930 --> 00:04:30,740
It's very easy to get lost and you'll have to rely on connecting lines with context, or a finger, or a ruler.
59

60
00:04:30,770 --> 00:04:36,080
All fonts come with their own default line spacing and it changes based on the font size.
60

61
00:04:36,110 --> 00:04:41,560
Some fonts that are very well-made and well-balanced, will have better line spacing than others.
61

62
00:04:41,570 --> 00:04:45,310
This, for example, is one of my favorite typefaces called Avenir.
62

63
00:04:45,500 --> 00:04:50,210
The default line height is 34 pixels on this specific font size.
63

64
00:04:50,360 --> 00:04:55,080
As you can see, it's not very different from the adjustment that I made for Arial.
64

65
00:04:55,100 --> 00:04:59,160
So in this case, I might even leave the line spacing, as its default value.
65

66
00:04:59,180 --> 00:05:03,300
Now, there are times when you need to shrink the line spacing instead of increasing it.
66

67
00:05:03,440 --> 00:05:08,960
And that's usually when dealing with large and very bold text. Especially in uppercase. The default line
67

68
00:05:08,960 --> 00:05:12,020
height on this text is a little airy for me.
68

69
00:05:12,020 --> 00:05:19,820
I chose all capitals and heavy font to make the headline super bold, heavy and strong, concentrated
69

70
00:05:19,820 --> 00:05:21,530
in one place.
70

71
00:05:21,530 --> 00:05:25,660
So, in this case, I am going to decrease the line height just a little bit.
71

72
00:05:25,700 --> 00:05:27,920
Now this version is exactly what I was looking for.
72

73
00:05:28,020 --> 00:05:34,670
We can think of this as a gravity, heavier objects have stronger gravity so they pull each other closer.
73

74
00:05:35,060 --> 00:05:39,580
And lighter objects not as much, so they are floating in space and feel more airy.
74

75
00:05:39,590 --> 00:05:42,460
Speaking of font weights...Light and regular, semi-bold,
75

76
00:05:42,470 --> 00:05:42,890
bold,
76

77
00:05:42,890 --> 00:05:44,180
extra-bold,
77

78
00:05:44,180 --> 00:05:51,350
heavy, black, skinny, hairline and so on. These are what's called font weights or styles, or thickness. Every typeface
78

79
00:05:51,410 --> 00:05:54,880
will have their own set of weights. Some more than others.
79

80
00:05:54,890 --> 00:06:01,430
These, for example, are font weights of a very popular Google font called Open Sans. Has 5 different
80

81
00:06:01,430 --> 00:06:02,060
weights.
81

82
00:06:02,180 --> 00:06:05,770
Ariel on the other hand, has only 2. Regular and Bold.
82

83
00:06:05,930 --> 00:06:11,080
The typeface that has this little weights is very difficult to work with. On a modern website
83

84
00:06:11,090 --> 00:06:17,000
you have so many different places that you need to put text: on paragraphs, on buttons, navigation bar,
84

85
00:06:17,000 --> 00:06:21,620
dropdown menus, headlines, secondary headlines, footer links and more.
85

86
00:06:21,620 --> 00:06:27,320
If you pick one typeface that has only two weights, regular and bold, you will struggle a lot. When you
86

87
00:06:27,320 --> 00:06:31,970
need to create a hierarchy, and contrast between a headline and a subhead,
87

88
00:06:31,970 --> 00:06:36,770
you're basically left with a text size to do all the heavy lifting.
88

89
00:06:36,770 --> 00:06:43,280
Regular white text on dark background sometimes looks bolder. To compensate for this optical illusion,
89

90
00:06:43,280 --> 00:06:48,620
you may want to use a lighter weight. The text on these two cards now look like they are same weight, but on
90

91
00:06:48,620 --> 00:06:53,410
the previous example, the right text looked heavier.
91

92
00:06:53,420 --> 00:06:54,830
Let me show you that one more time.
92

93
00:06:54,830 --> 00:07:03,860
Light...and regular...Another situation, where we might need to adjust the weight of the font, is on a large text.
93

94
00:07:03,860 --> 00:07:07,940
As you increase the size of the font, it becomes heavier.
94

95
00:07:08,000 --> 00:07:09,440
Both of these are regular weight in this case.
95

96
00:07:09,440 --> 00:07:15,580
But because the first is much larger, its body is thicker and heavier.
96

97
00:07:15,710 --> 00:07:22,010
Sometimes we want it to look similar weight, just different sizes. In such scenario we will have to pair
97

98
00:07:22,010 --> 00:07:24,350
the light and regular styles.
98

99
00:07:24,350 --> 00:07:28,610
Now the large text and smaller text feel more like they are of same weight.
99

100
00:07:28,610 --> 00:07:33,320
You can do this in the other direction too, by making the smaller text a little bolder.
100

101
00:07:33,500 --> 00:07:35,390
You'll need something like semi-bold in this case.
101

102
00:07:35,390 --> 00:07:40,520
If your typeface doesn't have enough weight, then your hands are tight and you won't be able
102

103
00:07:40,520 --> 00:07:42,020
to achieve optimal results.
103

104
00:07:42,050 --> 00:07:46,220
Pick typefaces that are versatile and have sufficient number of weights.
104

105
00:07:46,280 --> 00:07:52,730
Most modern, general used typefaces, today will have at least 4 weights. Which is decent enough. Some complete
105

106
00:07:52,760 --> 00:07:57,860
typefaces will have 9 different weights. Like this typeface called Monsteratt
106

107
00:07:57,890 --> 00:08:00,060
you're not going to run out of weights here, are you?
107

108
00:08:00,260 --> 00:08:01,590
So we have Letter Spacing,
108

109
00:08:01,640 --> 00:08:03,900
Line Height and Font Weights.
109

110
00:08:04,010 --> 00:08:07,120
These attributes help us with two things mainly:
110

111
00:08:07,130 --> 00:08:12,110
1. One is to make text easy to read, especially on the body and big text.
111

112
00:08:12,170 --> 00:08:21,350
2. And second, to achieve a really good visual hierarchy between different elements, text elements obviously, on the page.
112

113
00:08:21,800 --> 00:08:27,170
In the upcoming lesson, we're going to practice this exact typesetting between line heights,
113

114
00:08:27,170 --> 00:08:29,450
weights and all that stuff.
114

115
00:08:29,570 --> 00:08:30,050
Stick around.