0
1
00:00:00,150 --> 00:00:06,000
Typography is huge for web design. And learning how to set type properly is going to make you a superior
1

2
00:00:06,000 --> 00:00:07,060
web designer.
2

3
00:00:07,080 --> 00:00:14,010
In this video, we are going to do a little fun exercise, on setting type. Which basically means, simply
3

4
00:00:14,010 --> 00:00:22,720
said, it's choosing the right font size, right line-heights,  weights for the font, and letter spacing.
4

5
00:00:22,720 --> 00:00:23,010
That's all.
5

6
00:00:23,010 --> 00:00:28,720
It's just combining all these 4 different elements to make something look deliberate.
6

7
00:00:28,770 --> 00:00:34,830
As usual, you'll find this Figma file under the resources. Either on the page, that I have linked or
7

8
00:00:34,830 --> 00:00:39,020
under the resources of this video. And in this Figma file
8

9
00:00:39,180 --> 00:00:41,520
I have arranged 5 blocks of text.
9

10
00:00:41,580 --> 00:00:43,730
Each one has a headline and a paragraph.
10

11
00:00:43,740 --> 00:00:48,690
Each of these blocks are set up in a different typefaces: the same typeface for the headline and the
11

12
00:00:48,690 --> 00:00:49,960
paragraph pair.
12

13
00:00:50,100 --> 00:00:53,030
The name of the typeface is right here on the corner.
13

14
00:00:53,040 --> 00:00:56,560
Don't worry about the content it's a dummy text that I've generated randomly.
14

15
00:00:56,640 --> 00:01:01,500
I want you to go through each of these blocks and improve the typesetting for each pair.
15

16
00:01:01,500 --> 00:01:08,280
Your goal is to achieve two things: 1. First good text readability. It's gona be achieved by mainly adjusting
16

17
00:01:08,280 --> 00:01:14,370
font sizes and line heights. All the text blocks are set in their default line heights. For some of these
17

18
00:01:14,370 --> 00:01:20,910
fonts, their default line height might have pretty good readability, like Crimson text here. But for others
18

19
00:01:20,910 --> 00:01:22,540
it might be a little too tight.
19

20
00:01:22,590 --> 00:01:27,840
There are no specific rules for a line heights, just measure it based on your eye. And increase it up and
20

21
00:01:27,840 --> 00:01:31,410
down. And see what feels the most pleasant to you,
21

22
00:01:31,410 --> 00:01:34,300
when you read it. The same goes for the font size,
22

23
00:01:34,310 --> 00:01:40,130
they are all set in 16 pixels. But as you can see, 16 pixel is quite different from one to another.
23

24
00:01:40,140 --> 00:01:44,030
For example 16 on Crimson text is way too small.
24

25
00:01:44,040 --> 00:01:49,350
2. And second, your goal is to achieve good hierarchy between headline and the paragraph.
25

26
00:01:49,350 --> 00:01:51,410
Remember our lesson about hierarchy, right?
26

27
00:01:51,510 --> 00:01:56,290
The visual hierarchy makes design easier to follow and more pleasing to an eye.
27

28
00:01:56,400 --> 00:02:02,340
You can achieve this hierarchy between the headline and text by making the headline very large, or very
28

29
00:02:02,360 --> 00:02:03,900
heavy or both.
29

30
00:02:03,900 --> 00:02:09,840
To achieve both of these goals, you are allowed to adjust: 1. The font size.
30

31
00:02:09,840 --> 00:02:16,080
2. Second, the font weights. 3. And the line heights. No need to worry about the letter spacing.
31

32
00:02:16,080 --> 00:02:17,480
Just keep them as they are.
32

33
00:02:17,490 --> 00:02:19,680
Also don't change the typeface or the color.
33

34
00:02:19,680 --> 00:02:21,610
Keep it as they are.
34

35
00:02:21,610 --> 00:02:24,390
You're free to adjust the position of each text box.
35

36
00:02:24,390 --> 00:02:28,830
In fact, you will most likely need to adjust it. Because as you start setting your type things will have
36

37
00:02:28,830 --> 00:02:30,490
to be moved around accordingly.
37

38
00:02:30,510 --> 00:02:33,690
But I want you to keep the width of each text box as it is.
38

39
00:02:33,730 --> 00:02:36,870
They're all 500 pixels wide right now.
39

40
00:02:37,020 --> 00:02:42,940
I want you to work within those constraints and set your type in a best way, within those dimensions.
40

41
00:02:43,140 --> 00:02:45,800
The height of the box will adjust automatically.
41

42
00:02:45,870 --> 00:02:47,490
Let me demonstrate the first one.
42

43
00:02:47,610 --> 00:02:54,750
First, make sure that you have zoomed your canvas to 100%. Otherwise, you won't see the realistic
43

44
00:02:54,750 --> 00:02:55,770
size.
44

45
00:02:55,800 --> 00:03:00,720
There are many different ways to zoom in and out in Figma. Two most common ways is either pinching your
45

46
00:03:00,720 --> 00:03:02,700
mouse pad on laptop.
46

47
00:03:02,730 --> 00:03:08,280
This will probably work only on newer laptops that has the support of multi-touch and pinching
47

48
00:03:08,280 --> 00:03:17,070
action. Or another way, which is with your mouse wheel and while holding control (or a command on Mac). And
48

49
00:03:17,070 --> 00:03:22,200
with your mouse wheel, just go scroll up and down. And while you hold on control or command, then it's going
49

50
00:03:22,200 --> 00:03:30,540
to zoom in or out. Or my favourite way, which is just to hit the shortcut Shift+0 and that's going
50

51
00:03:30,540 --> 00:03:34,650
to instantly zoom into 100%.
51

52
00:03:34,710 --> 00:03:40,290
You can see this shortcut, if you go to this view options. And then under the dropdown, you can see that
52

53
00:03:40,290 --> 00:03:41,550
zoom to 100%
53

54
00:03:41,550 --> 00:03:47,520
has this shortcut of Shift+0. Most of your design work should be done in this normal state.
54

55
00:03:47,520 --> 00:03:51,720
Otherwise, you won't be seeing the realistic picture of sizes and proportion.
55

56
00:03:51,720 --> 00:03:54,630
However it is ok to zoom in and out when you need to.
56

57
00:03:54,630 --> 00:03:55,510
For some reason.
57

58
00:03:55,770 --> 00:04:01,270
Okay, so once we've made sure we're working in the normal zoom state, first I will adjust the headline.
58

59
00:04:01,530 --> 00:04:07,170
I want it to be thin. Underneath the font name, you can select the font weight. As I previously mentioned,
59

60
00:04:07,200 --> 00:04:12,660
available options here depend on the font family itself, and if you have installed all the available
60

61
00:04:12,660 --> 00:04:19,890
styles on your computer, or if it came with Figma. So I select thin. Now to achieve a good visual hierarchy
61

62
00:04:19,890 --> 00:04:26,160
between the headline and the paragraph, I should increase the headline size. And since I went with a thin
62

63
00:04:26,160 --> 00:04:32,460
headline, I should make it even bigger than what I would do for a heavier text style.
63

64
00:04:32,460 --> 00:04:38,250
I am pressing up an arrow key, which increases the font size by 1 pixel. As I'm enlarging my text
64

65
00:04:38,250 --> 00:04:41,340
I am also paying attention to where my text breaks.
65

66
00:04:41,340 --> 00:04:46,860
Since the width of my text box is fixed, I can break the text only based on its size or weight.
66

67
00:04:46,920 --> 00:04:51,810
The breaking of the text is important because you don't want the text to break on an odd place. Like for
67

68
00:04:51,810 --> 00:04:54,180
example at an article "A"
68

69
00:04:54,180 --> 00:04:59,280
and the word jumping on the second line. That doesn't make a good readability.
69

70
00:04:59,430 --> 00:05:07,080
In this sentence, the best line break is when "A Telescope" is on the second line, or when "Buying A Telescope"
70

71
00:05:07,080 --> 00:05:08,300
is on the second line.
71

72
00:05:08,310 --> 00:05:11,700
I even prefer the second version, because there is a logic break in the sentence.
72

73
00:05:11,700 --> 00:05:15,140
The basics of... What? Buying a telescope.
73

74
00:05:15,150 --> 00:05:15,380
Okay.
74

75
00:05:15,390 --> 00:05:17,490
I quite like how the headline looks.
75

76
00:05:17,640 --> 00:05:21,180
Now I'm going to adjust the paragraph text. In most cases,
76

77
00:05:21,180 --> 00:05:27,240
I wouldn't touch the paragraph weight and keep in regular. Regular is usually the best option for a paragraph text.
77

78
00:05:27,240 --> 00:05:34,210
But because I have made the headline quite skinny, the paragraph feels heavy in a comparison and
78

79
00:05:34,220 --> 00:05:38,910
is stealing a lot of attention from the headline. Remembering visual hierarchy,
79

80
00:05:38,910 --> 00:05:45,690
we clearly define, what should be the most noticeable element, then 2nd most noticeable and so on.
80

81
00:05:45,690 --> 00:05:48,980
Now, I'm going to increase the line height of this paragraph.
81

82
00:05:49,050 --> 00:05:54,170
The default line height of this font which is Roboto.
82

83
00:05:54,180 --> 00:05:55,550
I'm not sure how you pronounce that.
83

84
00:05:55,550 --> 00:06:01,980
Is very tight, doesn't make a good readability experience, so I'm going to increase it from this line
84

85
00:06:01,980 --> 00:06:02,730
height field.
85

86
00:06:06,050 --> 00:06:07,260
All right this looks great.
86

87
00:06:07,260 --> 00:06:11,910
The headline is thin and slick, but still grabs the main attention. And paragraph text
87

88
00:06:11,910 --> 00:06:13,450
is airy and easy to read.
88

89
00:06:13,800 --> 00:06:16,190
What an improvement to what it was before.
89

90
00:06:16,200 --> 00:06:20,020
Let me show you, what would I change if I went with a heavy headline instead.
90

91
00:06:20,040 --> 00:06:25,250
In this case, I would actually decrease the line height of the headline text. Remember, as I explained
91

92
00:06:25,250 --> 00:06:31,080
in the lesson, when dealing with a large and very bold text, we might need to shrink the line height.
92

93
00:06:31,110 --> 00:06:36,870
That's because the letters have gravitational pull, and heavier objects pull each other together.
93

94
00:06:36,900 --> 00:06:41,070
In this case, I'm going to return the paragraph text back to regular weight.
94

95
00:06:41,160 --> 00:06:48,030
I generally avoid using thin weights for a paragraph text. On desktop screens, that don't have very high
95

96
00:06:48,390 --> 00:06:49,340
pixel density,
96

97
00:06:49,350 --> 00:06:52,340
they can be hard to read. All right.
97

98
00:06:52,360 --> 00:06:52,730
That's it.
98

99
00:06:52,750 --> 00:06:57,550
Very simple and fun exercise to practice setting type, and messing around with different values of heights,
99

100
00:06:57,550 --> 00:06:59,380
and phone sizes, and whatnot.
100

101
00:06:59,380 --> 00:07:03,570
And in the upcoming assignment, I'm going to check out your submissions.