Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,500 --> 00:00:05,993
So let's now add some nice typography to our project.
2
00:00:07,740 --> 00:00:10,950
And we're gonna start with the typeface itself.
3
00:00:10,950 --> 00:00:14,533
And so let's analyze this webpage actually a little bit.
4
00:00:15,830 --> 00:00:18,420
So this webpage is basically
5
00:00:18,420 --> 00:00:22,490
for a small chair design shop in Lisbon.
6
00:00:22,490 --> 00:00:26,250
So these guys are basically designers or architect
7
00:00:26,250 --> 00:00:29,580
who built these kind of minimalist chairs.
8
00:00:29,580 --> 00:00:32,150
So this and this.
9
00:00:32,150 --> 00:00:35,080
And so, clearly, we are going to want to give
10
00:00:35,080 --> 00:00:38,700
this interface here a clean and modern look.
11
00:00:38,700 --> 00:00:41,210
So, what that means is that we're gonna reach
12
00:00:41,210 --> 00:00:43,820
for a San Serif typeface.
13
00:00:43,820 --> 00:00:45,940
And one of the San Serif typefaces
14
00:00:45,940 --> 00:00:47,330
that I like the most,
15
00:00:47,330 --> 00:00:51,210
especially for something like designers or architects,
16
00:00:51,210 --> 00:00:53,150
would be Inter.
17
00:00:53,150 --> 00:00:56,410
So let's go here to Google Fonts,
18
00:00:56,410 --> 00:00:59,560
which at fonts.google.com.
19
00:00:59,560 --> 00:01:03,560
And once again, the link will also be on my resources page,
20
00:01:03,560 --> 00:01:07,570
which we cannot use right now because it's not ready yet.
21
00:01:07,570 --> 00:01:10,283
But once you're watching this course, it will be.
22
00:01:12,190 --> 00:01:16,430
Anyway, you can see that there are over a thousand typefaces
23
00:01:16,430 --> 00:01:18,370
right now on Google Fonts,
24
00:01:18,370 --> 00:01:20,710
and this number is always growing.
25
00:01:20,710 --> 00:01:22,850
And here is for example, Roboto,
26
00:01:22,850 --> 00:01:24,370
which is just one of the ones
27
00:01:24,370 --> 00:01:27,893
that I had recommended to you or Open Sans.
28
00:01:29,500 --> 00:01:33,460
Lato, I think, is also one of the really popular ones.
29
00:01:33,460 --> 00:01:38,460
But as I said, let's actually use Inter in this project
30
00:01:38,610 --> 00:01:41,833
and we can then also experiment with some other ones.
31
00:01:43,150 --> 00:01:44,870
So now here in Google Fonts,
32
00:01:44,870 --> 00:01:48,200
you just need to click on the typeface like this.
33
00:01:48,200 --> 00:01:49,033
And then here,
34
00:01:49,033 --> 00:01:51,690
we actually can select the styles that we need.
35
00:01:51,690 --> 00:01:54,650
And styles basically means different font weights
36
00:01:54,650 --> 00:01:55,623
that we want.
37
00:01:56,520 --> 00:01:58,030
So remember how I said
38
00:01:58,030 --> 00:02:01,350
that you shouldn't go, usually, below 400.
39
00:02:01,350 --> 00:02:04,550
So this here are really thin and light.
40
00:02:04,550 --> 00:02:06,630
So don't use those.
41
00:02:06,630 --> 00:02:09,650
So let's start with 400, which is regular.
42
00:02:09,650 --> 00:02:12,690
And so we need to select this style.
43
00:02:12,690 --> 00:02:14,840
So just click this button here,
44
00:02:14,840 --> 00:02:17,450
Now, by the time you're watching this lecture,
45
00:02:17,450 --> 00:02:19,430
this whole interface might actually
46
00:02:19,430 --> 00:02:21,080
look completely different
47
00:02:21,080 --> 00:02:24,630
because actually Google Fonts changes the way they look
48
00:02:24,630 --> 00:02:25,980
all the time.
49
00:02:25,980 --> 00:02:28,160
And so if it does look different,
50
00:02:28,160 --> 00:02:30,520
then you still need to look for some button
51
00:02:30,520 --> 00:02:34,393
with which you can basically add these different styles.
52
00:02:35,910 --> 00:02:38,220
So, usually, we want a 400.
53
00:02:38,220 --> 00:02:40,020
Then we also want a bold one,
54
00:02:40,020 --> 00:02:42,655
which is usually a 700.
55
00:02:42,655 --> 00:02:44,540
And then also one in between,
56
00:02:44,540 --> 00:02:48,740
like five or 600, which is medium and semi bold.
57
00:02:48,740 --> 00:02:52,113
And I will just go for the, let's say 500 here.
58
00:02:53,380 --> 00:02:54,570
Okay.
59
00:02:54,570 --> 00:02:57,760
Then once we are ready, we can click here.
60
00:02:57,760 --> 00:03:00,050
So see the selected families
61
00:03:00,050 --> 00:03:03,920
which are Inter four, five and 700.
62
00:03:03,920 --> 00:03:05,890
So that's all that we want.
63
00:03:05,890 --> 00:03:09,010
And we could add more typefaces here, actually,
64
00:03:09,010 --> 00:03:11,050
but for now, let's not do that.
65
00:03:11,050 --> 00:03:12,710
Let's just go with Inter.
66
00:03:12,710 --> 00:03:17,470
And then all we need to do is to copy this link here.
67
00:03:17,470 --> 00:03:19,100
So I'm copying it now.
68
00:03:19,100 --> 00:03:23,940
And then in our HTML, in the head, we can link that.
69
00:03:23,940 --> 00:03:27,543
And we need to do it before our own CSS file.
70
00:03:30,140 --> 00:03:30,973
Okay.
71
00:03:30,973 --> 00:03:31,963
Then, save it.
72
00:03:33,080 --> 00:03:36,530
And so now we get two new link elements here
73
00:03:36,530 --> 00:03:38,520
coming from Google Fonts.
74
00:03:38,520 --> 00:03:41,920
And the one that actually matters to us is this one,
75
00:03:41,920 --> 00:03:43,670
so the second one.
76
00:03:43,670 --> 00:03:46,860
Where basically a new style sheet is loaded in,
77
00:03:46,860 --> 00:03:48,423
but from Google Fonts.
78
00:03:49,540 --> 00:03:53,110
So remember that we link our own style sheet,
79
00:03:53,110 --> 00:03:55,110
also using the link element,
80
00:03:55,110 --> 00:03:58,583
and then href to our own CSS file.
81
00:03:59,680 --> 00:04:01,610
And so this one here is similar.
82
00:04:01,610 --> 00:04:05,940
So it's still a style sheet and we still have an href
83
00:04:05,940 --> 00:04:08,500
with the difference that this is a URL,
84
00:04:08,500 --> 00:04:10,710
which comes from another server.
85
00:04:10,710 --> 00:04:14,020
And in this case, that other server, is Google.
86
00:04:14,020 --> 00:04:16,823
So fonts.googleapis.com.
87
00:04:18,800 --> 00:04:23,020
And now, what we can do here is to set the font family
88
00:04:23,020 --> 00:04:25,113
on the body to Inter.
89
00:04:26,930 --> 00:04:31,590
So use quotes for that, which are actually not necessary,
90
00:04:31,590 --> 00:04:35,323
but I think it's a good practice to always use these quotes.
91
00:04:36,440 --> 00:04:38,010
So what this comma here means
92
00:04:38,010 --> 00:04:42,630
is that the priority font family will be Inter.
93
00:04:42,630 --> 00:04:45,160
But if for some reason that's not available,
94
00:04:45,160 --> 00:04:47,350
then use this second option here,
95
00:04:47,350 --> 00:04:49,573
which is simply the default San Serif.
96
00:04:51,120 --> 00:04:53,970
So for example, if there's no internet connection,
97
00:04:53,970 --> 00:04:57,250
then you will not be able to load Inter from Google Fonts
98
00:04:57,250 --> 00:05:00,660
and then simply San Serif will be used.
99
00:05:00,660 --> 00:05:02,110
And here, we could actually keep
100
00:05:02,110 --> 00:05:04,000
adding more and more options,
101
00:05:04,000 --> 00:05:06,230
but for now we just have these two.
102
00:05:06,230 --> 00:05:07,940
Now then, as you already know,
103
00:05:07,940 --> 00:05:11,170
all the elements will inherit the font family here
104
00:05:11,170 --> 00:05:14,090
from the body, which is the parent element.
105
00:05:14,090 --> 00:05:16,940
And so if we now take a look here,
106
00:05:16,940 --> 00:05:19,910
then you see that it already changed.
107
00:05:19,910 --> 00:05:21,440
And if you ask me,
108
00:05:21,440 --> 00:05:25,160
this actually looks a lot nicer than what we had before,
109
00:05:25,160 --> 00:05:27,083
so that default San Serif.
110
00:05:28,620 --> 00:05:30,260
We can inspect this actually,
111
00:05:30,260 --> 00:05:33,593
and turn it on and off just to see the result.
112
00:05:34,990 --> 00:05:36,333
So, here.
113
00:05:37,210 --> 00:05:38,690
Well then by default,
114
00:05:38,690 --> 00:05:41,453
we actually get the Serif typeface.
115
00:05:42,770 --> 00:05:45,050
But we can just delete this here
116
00:05:46,310 --> 00:05:48,550
and then watch what happens.
117
00:05:48,550 --> 00:05:51,250
So there's not a lot of difference there,
118
00:05:51,250 --> 00:05:54,160
but these small differences make all the difference
119
00:05:54,160 --> 00:05:55,930
between a well-designed
120
00:05:55,930 --> 00:05:59,973
and a, well let's say, medium designed interface.
121
00:06:01,010 --> 00:06:03,923
So that's of course put that back.
122
00:06:04,920 --> 00:06:09,343
And now let's talk a little bit about font sizes, actually.
123
00:06:10,530 --> 00:06:13,480
So one of the things that I mentioned in the last lecture
124
00:06:13,480 --> 00:06:16,140
is that when it comes to choosing font sizes,
125
00:06:16,140 --> 00:06:18,170
it's good to have a system.
126
00:06:18,170 --> 00:06:21,160
Because with that, we do not have to always think
127
00:06:21,160 --> 00:06:25,060
about what size we want to give to a certain element.
128
00:06:25,060 --> 00:06:26,820
That would be a lot of work,
129
00:06:26,820 --> 00:06:30,520
and it would also lead to inconsistent results.
130
00:06:30,520 --> 00:06:32,170
So I have this system here
131
00:06:32,170 --> 00:06:34,880
and whenever I need to choose a font size,
132
00:06:34,880 --> 00:06:37,593
I can only choose one of these different options.
133
00:06:38,950 --> 00:06:40,970
Now, this type scale, as it's called,
134
00:06:40,970 --> 00:06:43,790
comes from this tool that I also mentioned,
135
00:06:43,790 --> 00:06:46,290
so type-scale.com.
136
00:06:46,290 --> 00:06:49,960
And I actually didn't use one exact like this.
137
00:06:49,960 --> 00:06:51,300
So I built my own,
138
00:06:51,300 --> 00:06:52,970
which is the one that we will use
139
00:06:52,970 --> 00:06:54,740
in the Omnifood Project.
140
00:06:54,740 --> 00:06:57,490
And that's why we are also using it here.
141
00:06:57,490 --> 00:07:00,150
But you could also create your own.
142
00:07:00,150 --> 00:07:02,940
For example, you can choose one of these.
143
00:07:02,940 --> 00:07:03,940
Let's say this one.
144
00:07:03,940 --> 00:07:08,823
And then, well, you just need to copy these values here.
145
00:07:10,270 --> 00:07:13,200
And if you need more, you can just keep clicking here.
146
00:07:13,200 --> 00:07:15,750
And the lower the value here,
147
00:07:15,750 --> 00:07:18,160
the more different sizes you will get.
148
00:07:18,160 --> 00:07:21,063
So the more similar, actually, they will all be.
149
00:07:22,050 --> 00:07:24,620
If we do that again, now, then you see that each one
150
00:07:24,620 --> 00:07:27,263
is a lot bigger than the one before.
151
00:07:29,000 --> 00:07:31,840
But anyway, going back to our page now,
152
00:07:31,840 --> 00:07:34,130
we need to start by giving this heading
153
00:07:34,130 --> 00:07:35,593
a larger font size.
154
00:07:36,880 --> 00:07:39,073
So that is the h1.
155
00:07:40,830 --> 00:07:43,410
So right here.
156
00:07:43,410 --> 00:07:45,810
And so looking at our system,
157
00:07:45,810 --> 00:07:47,310
well which is now up here.
158
00:07:47,310 --> 00:07:49,120
Let's go back, actually.
159
00:07:49,120 --> 00:07:50,960
We can try different values.
160
00:07:50,960 --> 00:07:55,960
For example, let's say a 44, 52, and 62.
161
00:07:56,530 --> 00:07:57,683
Just grab these.
162
00:08:03,750 --> 00:08:06,653
So fonts size,
163
00:08:07,942 --> 00:08:10,403
let's start with the largest one, 62 pixels.
164
00:08:11,780 --> 00:08:14,460
And that is huge, right?
165
00:08:14,460 --> 00:08:15,720
That's way too big.
166
00:08:15,720 --> 00:08:17,773
And so let's simply go one down.
167
00:08:19,480 --> 00:08:23,820
So imagine that we didn't have this kind of limited choices,
168
00:08:23,820 --> 00:08:26,943
then you could say, well, maybe we want 40,
169
00:08:27,850 --> 00:08:29,280
something like this.
170
00:08:29,280 --> 00:08:33,343
But well, why not 45, like this.
171
00:08:34,890 --> 00:08:38,163
Or, well, since we're at it, why not 50.
172
00:08:39,520 --> 00:08:42,100
So you wouldn't really know what to choose.
173
00:08:42,100 --> 00:08:45,660
And with this again, you have your options very limited.
174
00:08:45,660 --> 00:08:49,540
And so yeah, we started at 62, doesn't work.
175
00:08:49,540 --> 00:08:51,330
Let's try, 52.
176
00:08:51,330 --> 00:08:54,670
It's also way too big, I guess.
177
00:08:54,670 --> 00:08:57,313
So, let's go with 44.
178
00:08:58,440 --> 00:09:00,253
So that looks nice.
179
00:09:01,920 --> 00:09:04,340
So I'm gonna keep that one here,
180
00:09:04,340 --> 00:09:08,093
but I also want to decrease a lot of the line spacing here.
181
00:09:09,020 --> 00:09:12,383
Actually, we move this here.
182
00:09:15,290 --> 00:09:17,140
So this is actually enough like this.
183
00:09:21,400 --> 00:09:24,020
So this is easier to work with.
184
00:09:24,020 --> 00:09:27,623
So let's see by default, what our line height is.
185
00:09:29,320 --> 00:09:34,320
So it should be somewhere in here.
186
00:09:34,660 --> 00:09:37,120
And if it's not, then let me show you a trick
187
00:09:37,120 --> 00:09:39,330
that I didn't show you before.
188
00:09:39,330 --> 00:09:42,690
Because this first tab here where it says Styles
189
00:09:42,690 --> 00:09:44,650
is simply the styles that are applied
190
00:09:44,650 --> 00:09:48,670
somewhere here in our code or maybe by default.
191
00:09:48,670 --> 00:09:50,490
But if you go to Computed,
192
00:09:50,490 --> 00:09:52,363
then you can see that even better.
193
00:09:53,430 --> 00:09:57,243
So you can now write here the line height.
194
00:09:59,700 --> 00:10:01,453
Well, that's nowhere to be found.
195
00:10:05,860 --> 00:10:07,430
Which is strange.
196
00:10:07,430 --> 00:10:09,233
Let's click here on Show All.
197
00:10:11,233 --> 00:10:13,810
So now you'll see line height is normal,
198
00:10:13,810 --> 00:10:16,270
which still is not really descriptive.
199
00:10:16,270 --> 00:10:21,270
so well anyway, let's just try some value here.
200
00:10:21,320 --> 00:10:26,320
So remember that's right here at h1.
201
00:10:26,400 --> 00:10:29,280
And so we should stay below one five,
202
00:10:29,280 --> 00:10:31,270
remember that from the last lecture,
203
00:10:31,270 --> 00:10:32,530
And for really big texts,
204
00:10:32,530 --> 00:10:34,800
we should actually go really small.
205
00:10:34,800 --> 00:10:39,003
So we could like go to 1.2, for example.
206
00:10:40,170 --> 00:10:41,003
1.2.
207
00:10:42,630 --> 00:10:45,730
Well, that actually doesn't look a lot different.
208
00:10:45,730 --> 00:10:49,300
So let's try 1.1, because I think the lines
209
00:10:49,300 --> 00:10:52,090
are still look a bit detached there.
210
00:10:52,090 --> 00:10:54,313
And well, I think that looks better.
211
00:10:55,710 --> 00:10:57,470
But many times what I actually do
212
00:10:57,470 --> 00:11:01,790
is to adjust these values right here in the inspector.
213
00:11:01,790 --> 00:11:04,470
So I can use the arrow keys, for example,
214
00:11:04,470 --> 00:11:06,990
which adds or subtracts one.
215
00:11:06,990 --> 00:11:09,073
Which in this case is way too much.
216
00:11:11,020 --> 00:11:14,700
Or I can also use Alt or Option up and down,
217
00:11:14,700 --> 00:11:18,093
which will only add or subtract a 0.1.
218
00:11:19,710 --> 00:11:21,990
So with this, we can easier make it look exactly
219
00:11:21,990 --> 00:11:23,670
what we want it to.
220
00:11:23,670 --> 00:11:27,375
So one, for example, would be too little I think.
221
00:11:27,375 --> 00:11:31,370
1.2 looks a bit detached, at least in my opinion,
222
00:11:31,370 --> 00:11:33,880
but of course this is a bit subjective.
223
00:11:33,880 --> 00:11:37,080
And then 1.1 looks just right,
224
00:11:37,080 --> 00:11:38,903
and so let's keep it at that.
225
00:11:40,380 --> 00:11:42,210
And now, also another thing that we can do
226
00:11:42,210 --> 00:11:45,793
is to add letter spacing, remember?
227
00:11:46,650 --> 00:11:49,810
Which basically is to make big texts like this here
228
00:11:49,810 --> 00:11:51,890
look a bit more natural.
229
00:11:51,890 --> 00:11:55,850
So there's some spacing between these individual characters.
230
00:11:55,850 --> 00:11:58,003
So let's maybe remove one pixel.
231
00:12:00,260 --> 00:12:02,340
And so one pixel, as you can see,
232
00:12:02,340 --> 00:12:03,743
makes a lot of a difference.
233
00:12:04,620 --> 00:12:06,840
So if we turn this on and off,
234
00:12:06,840 --> 00:12:09,280
then yeah, it changes a lot.
235
00:12:09,280 --> 00:12:12,463
And I think that this one looks a lot better, really.
236
00:12:14,000 --> 00:12:18,430
So this one I think is it's a nice like this,
237
00:12:18,430 --> 00:12:20,550
so we don't need to change it anymore.
238
00:12:20,550 --> 00:12:23,550
So let's go to the next one, which is this here.
239
00:12:23,550 --> 00:12:24,950
And the first thing I'm going to do
240
00:12:24,950 --> 00:12:27,923
is to maybe make it a little bit bigger.
241
00:12:29,160 --> 00:12:32,810
So remember how the default is 16 pixels.
242
00:12:32,810 --> 00:12:36,000
And right now, we don't have any font size on it
243
00:12:36,000 --> 00:12:37,530
as you see here.
244
00:12:37,530 --> 00:12:39,683
So this is the header text.
245
00:12:40,690 --> 00:12:43,363
And so let's go again here to our system.
246
00:12:44,490 --> 00:12:47,500
And so right now it's 16, remember?
247
00:12:47,500 --> 00:12:51,373
And so if we want to make it bigger, we can try 18 or 20.
248
00:12:53,140 --> 00:12:54,183
So,
249
00:12:55,610 --> 00:12:58,693
font-size: 18px.
250
00:13:01,080 --> 00:13:02,323
That looks about right.
251
00:13:03,170 --> 00:13:04,163
Let's go 20,
252
00:13:05,000 --> 00:13:07,383
and well that's maybe too big.
253
00:13:08,890 --> 00:13:10,560
So let's stay at 18.
254
00:13:10,560 --> 00:13:12,133
And then also the line height.
255
00:13:12,990 --> 00:13:14,810
Now, this one here is a lot smaller,
256
00:13:14,810 --> 00:13:18,773
so we can go like 1.5 or even bigger.
257
00:13:20,270 --> 00:13:22,873
All right, so that looks nice already.
258
00:13:24,380 --> 00:13:27,040
But again, let's experiment a little bit here
259
00:13:27,040 --> 00:13:30,683
and I'm hitting now all Alt or Option Up.
260
00:13:33,880 --> 00:13:36,010
So this or this.
261
00:13:36,010 --> 00:13:37,870
They are both nice.
262
00:13:37,870 --> 00:13:41,853
So let me just stay with 1.6 right here.
263
00:13:44,620 --> 00:13:47,150
Now about this button here,
264
00:13:47,150 --> 00:13:49,300
or actually this link here,
265
00:13:49,300 --> 00:13:52,190
I don't know yet how it will look like in the end.
266
00:13:52,190 --> 00:13:55,260
And so therefore I'm not going to mess with the size
267
00:13:55,260 --> 00:13:57,070
of this one just yet.
268
00:13:57,070 --> 00:14:00,410
And so let's go to this here, which is our h2.
269
00:14:00,410 --> 00:14:02,560
So that's actually this one and this one,
270
00:14:02,560 --> 00:14:05,240
and this one right here.
271
00:14:05,240 --> 00:14:07,840
So let's make those bigger.
272
00:14:07,840 --> 00:14:09,933
And for some reason, I put them up here.
273
00:14:10,900 --> 00:14:13,630
Ah, yeah, that's because these are reusable.
274
00:14:13,630 --> 00:14:16,430
So this is what I call the general styles,
275
00:14:16,430 --> 00:14:18,200
which are the reusable ones.
276
00:14:18,200 --> 00:14:21,313
And then down here, I have the like components styles.
277
00:14:23,490 --> 00:14:26,190
So let's go to our styles here.
278
00:14:26,190 --> 00:14:30,350
And usually we might have this like in some other window,
279
00:14:30,350 --> 00:14:33,100
for example, so we don't have to go up and down
280
00:14:33,100 --> 00:14:34,530
all the time.
281
00:14:34,530 --> 00:14:36,920
But anyway, let's try...
282
00:14:36,920 --> 00:14:38,130
Well, the 44, not.
283
00:14:38,130 --> 00:14:39,913
Let's try these three here, maybe.
284
00:14:41,310 --> 00:14:44,343
So I just copied those and gonna paste them here,
285
00:14:45,300 --> 00:14:47,300
but you don't have to do that of course.
286
00:14:50,320 --> 00:14:51,800
So font size,
287
00:14:51,800 --> 00:14:54,863
and the first one I'm gonna try is 24.
288
00:14:56,410 --> 00:15:00,430
And well, actually, that is probably the default.
289
00:15:00,430 --> 00:15:02,003
So nothing changed there.
290
00:15:03,290 --> 00:15:04,523
Let's go with 30.
291
00:15:05,510 --> 00:15:08,849
So that's a bit better, right?
292
00:15:08,849 --> 00:15:10,993
Let's maybe try also a 36.
293
00:15:13,130 --> 00:15:15,120
And nice.
294
00:15:15,120 --> 00:15:17,943
I think this is the one I like, except here.
295
00:15:19,540 --> 00:15:22,010
So we should somehow change this one
296
00:15:23,670 --> 00:15:27,233
and well, we will get there.
297
00:15:28,100 --> 00:15:30,020
We will do this a little bit later.
298
00:15:30,020 --> 00:15:32,470
For now, let's keep it at this size.
299
00:15:32,470 --> 00:15:34,370
And since this text is now so big,
300
00:15:34,370 --> 00:15:37,030
we can now again, decrease the letter spacing
301
00:15:37,030 --> 00:15:38,420
just a little bit.
302
00:15:38,420 --> 00:15:39,853
Let's say one pixel.
303
00:15:41,380 --> 00:15:44,090
Actually minus one pixel,
304
00:15:44,090 --> 00:15:47,050
and that is actually a bit too much.
305
00:15:47,050 --> 00:15:51,360
That now looks cramped, unlike this one.
306
00:15:51,360 --> 00:15:52,420
So if you look closely,
307
00:15:52,420 --> 00:15:54,950
this one now looks like very cramped.
308
00:15:54,950 --> 00:15:57,020
That's not so nice.
309
00:15:57,020 --> 00:15:59,490
And here we can even go with half pixels,
310
00:15:59,490 --> 00:16:01,850
so minus 0.5.
311
00:16:01,850 --> 00:16:03,393
So that's actually better.
312
00:16:07,180 --> 00:16:10,430
So let's go here to our features titles,
313
00:16:10,430 --> 00:16:11,663
which are these ones.
314
00:16:14,520 --> 00:16:15,450
And let's experiment
315
00:16:15,450 --> 00:16:18,683
with a font size of 20 pixels right here.
316
00:16:19,930 --> 00:16:22,500
And that looks about right.
317
00:16:22,500 --> 00:16:25,230
There's also 18 right below it,
318
00:16:25,230 --> 00:16:27,190
but that doesn't give enough contrast
319
00:16:27,190 --> 00:16:28,663
between these two headings.
320
00:16:29,600 --> 00:16:31,554
So establishing these font sizes
321
00:16:31,554 --> 00:16:34,970
is also a little bit about establishing hierarchy
322
00:16:34,970 --> 00:16:36,710
between the different headings,
323
00:16:36,710 --> 00:16:39,870
and in general, between all the different pieces of text
324
00:16:39,870 --> 00:16:41,810
on the site.
325
00:16:41,810 --> 00:16:43,050
So this text here, of course,
326
00:16:43,050 --> 00:16:45,080
is more important than this one
327
00:16:45,080 --> 00:16:49,123
and so it should be bigger, but not all too big.
328
00:16:52,400 --> 00:16:54,823
So anyway, let's now go to the next one.
329
00:16:57,460 --> 00:16:59,393
So let's maybe make this one 18.
330
00:17:01,220 --> 00:17:04,453
And then of course we need to increase its line height.
331
00:17:06,950 --> 00:17:09,653
So I used 1.6 up there,
332
00:17:10,570 --> 00:17:12,913
and so that should be nice here as well.
333
00:17:14,990 --> 00:17:19,710
Let's just try 1.7 and maybe that's even better.
334
00:17:19,710 --> 00:17:20,910
So why not?
335
00:17:20,910 --> 00:17:23,530
We're just giving it a lot of breathing space
336
00:17:23,530 --> 00:17:25,630
and that's not a bad thing.
337
00:17:25,630 --> 00:17:27,400
Now, just to keep things consistent.
338
00:17:27,400 --> 00:17:30,880
Let's then also give the other one, 1.7,
339
00:17:30,880 --> 00:17:32,410
because we don't want to have
340
00:17:32,410 --> 00:17:35,940
a lot of different of this values in our page.
341
00:17:35,940 --> 00:17:38,270
So if we use 1.7 in one,
342
00:17:38,270 --> 00:17:40,723
then let's go with that all the way.
343
00:17:43,870 --> 00:17:48,870
Next up, let's now actually change the size of this one.
344
00:17:49,010 --> 00:17:52,210
So I already have that selected her actually.
345
00:17:52,210 --> 00:17:53,900
So all of this element here
346
00:17:53,900 --> 00:17:55,593
is the testimonial box.
347
00:17:58,130 --> 00:18:01,183
As we can as always easily see with our inspector.
348
00:18:03,130 --> 00:18:05,690
So here we have grid-3-cols
349
00:18:05,690 --> 00:18:10,690
or maybe the testimonial box is, yeah, it's just this part.
350
00:18:10,700 --> 00:18:12,750
So this is the testimonial box.
351
00:18:12,750 --> 00:18:14,500
And so the h2 in there.
352
00:18:14,500 --> 00:18:16,453
Let's now make it a little bit smaller.
353
00:18:17,350 --> 00:18:20,913
And let's just see what options we have for doing that.
354
00:18:22,780 --> 00:18:24,833
So I'm gonna experiment with these three,
355
00:18:25,690 --> 00:18:28,053
which again, you do not need to copy of course.
356
00:18:30,150 --> 00:18:34,410
This is just so you can see what is happening here.
357
00:18:34,410 --> 00:18:36,730
So 20 pixels, for example,
358
00:18:36,730 --> 00:18:40,033
but now that looks a little bit too small.
359
00:18:40,970 --> 00:18:44,053
So 24, maybe.
360
00:18:44,980 --> 00:18:46,990
That is better.
361
00:18:46,990 --> 00:18:48,033
What about 30?
362
00:18:49,080 --> 00:18:51,600
Ah, that breaks it into two lines.
363
00:18:51,600 --> 00:18:54,333
And so, well, then we need to go back to 24.
364
00:18:56,170 --> 00:18:59,530
So you see that is very easy with a system like this.
365
00:18:59,530 --> 00:19:02,340
Otherwise, people would now have to like fiddle
366
00:19:02,340 --> 00:19:04,860
with all different numbers that we have in this range.
367
00:19:04,860 --> 00:19:07,130
For example like, well,
368
00:19:07,130 --> 00:19:10,870
what about 29 or 28
369
00:19:10,870 --> 00:19:13,353
or 27 or 26.
370
00:19:14,490 --> 00:19:16,090
You would have all these options,
371
00:19:16,090 --> 00:19:18,283
and that just takes too much time.
372
00:19:19,910 --> 00:19:22,363
And that's why I like a system so much.
373
00:19:23,420 --> 00:19:25,390
Next up, we have some more,
374
00:19:25,390 --> 00:19:28,200
let's say normal looking text,
375
00:19:28,200 --> 00:19:30,593
which is here, the testimonial texts.
376
00:19:32,450 --> 00:19:34,910
So that is this here.
377
00:19:34,910 --> 00:19:39,010
And so to keep things consistent with the rest of the page,
378
00:19:39,010 --> 00:19:42,360
so this is also some, let's say normal text here
379
00:19:42,360 --> 00:19:43,550
and this as well.
380
00:19:43,550 --> 00:19:45,830
And so let's use the same sizes
381
00:19:45,830 --> 00:19:47,923
and the same line height here.
382
00:19:49,170 --> 00:19:50,383
Just grab that.
383
00:19:54,633 --> 00:19:55,523
Ah, here we go.
384
00:19:56,950 --> 00:19:59,350
So of course this is a very simple page,
385
00:19:59,350 --> 00:20:01,720
so we can do things like that.
386
00:20:01,720 --> 00:20:05,650
So considering all this text here, like a normal text,
387
00:20:05,650 --> 00:20:07,430
with a real and bigger a page
388
00:20:07,430 --> 00:20:09,323
would, of course, not work like that.
389
00:20:10,520 --> 00:20:13,770
But anyway, here we are just practicing a little bit.
390
00:20:13,770 --> 00:20:17,253
And so finally, we have here these h3 elements.
391
00:20:18,120 --> 00:20:21,543
So let's give them some font size as well.
392
00:20:23,530 --> 00:20:25,193
Let's say 20 pixels.
393
00:20:27,560 --> 00:20:30,990
And this actually looked like the default here.
394
00:20:30,990 --> 00:20:33,103
Well, anyway.
395
00:20:34,180 --> 00:20:36,790
Next up here, we have these chair details,
396
00:20:36,790 --> 00:20:40,240
which are these four different texts here.
397
00:20:40,240 --> 00:20:42,163
And these for now look just fine.
398
00:20:43,460 --> 00:20:45,220
Well, actually these are the texts here,
399
00:20:45,220 --> 00:20:47,463
so the list items in there.
400
00:20:48,940 --> 00:20:51,070
But anyway, they look just fine for now,
401
00:20:51,070 --> 00:20:53,200
except maybe here for the price.
402
00:20:53,200 --> 00:20:55,990
So the price is a very important element here
403
00:20:55,990 --> 00:20:57,380
and it's already bold.
404
00:20:57,380 --> 00:20:59,203
And so let's also make it bigger,
405
00:21:00,130 --> 00:21:03,370
maybe the size here of the heading.
406
00:21:03,370 --> 00:21:08,200
So that's 20 pixels again, right here.
407
00:21:08,200 --> 00:21:12,870
So the chair price is probably actually all of this here.
408
00:21:12,870 --> 00:21:17,870
So since it is a flex container, I guess that,
409
00:21:18,210 --> 00:21:20,730
yeah, so all of this is the chair price.
410
00:21:20,730 --> 00:21:23,450
And so if we increase the font size on that,
411
00:21:23,450 --> 00:21:26,143
then these two child elements will inherit that.
412
00:21:29,280 --> 00:21:31,357
So let's do that 20 pixels.
413
00:21:34,250 --> 00:21:36,083
And so that looks just nice.
414
00:21:36,980 --> 00:21:40,520
And we will actually a bit later format this link here
415
00:21:40,520 --> 00:21:42,740
and so it will then be probably back
416
00:21:42,740 --> 00:21:44,770
to being a little bit smaller.
417
00:21:44,770 --> 00:21:46,290
So just like this one here,
418
00:21:46,290 --> 00:21:48,860
which we're also gonna size a bit later
419
00:21:48,860 --> 00:21:52,940
when we actually design these links or these buttons.
420
00:21:52,940 --> 00:21:55,260
And finally, we have here the footer text
421
00:21:55,260 --> 00:21:57,790
and this one is now actually too big.
422
00:21:57,790 --> 00:22:00,230
So this text is not so important
423
00:22:00,230 --> 00:22:01,793
and so let's make it smaller.
424
00:22:02,900 --> 00:22:06,070
So for small text, what options do we have?
425
00:22:06,070 --> 00:22:09,310
We have 12, 16.
426
00:22:09,310 --> 00:22:11,350
Oh, actually that's the spacing system,
427
00:22:11,350 --> 00:22:14,000
which we're gonna talk about later.
428
00:22:14,000 --> 00:22:16,110
So we have 12, 14, and 16.
429
00:22:16,110 --> 00:22:18,620
So the default is 16 right now.
430
00:22:18,620 --> 00:22:20,743
So let's try a 12 and 14.
431
00:22:25,020 --> 00:22:26,300
14.
432
00:22:26,300 --> 00:22:27,413
That looks good.
433
00:22:28,720 --> 00:22:31,490
That looks too small, so let's go back.
434
00:22:31,490 --> 00:22:33,693
And with that, we actually finished.
435
00:22:34,710 --> 00:22:37,090
So again, this is quite a small example.
436
00:22:37,090 --> 00:22:40,140
So, of course, we couldn't apply all the guidelines,
437
00:22:40,140 --> 00:22:43,800
but actually we did apply it more than it looks like.
438
00:22:43,800 --> 00:22:47,360
For example, we didn't justify any text
439
00:22:47,360 --> 00:22:49,750
and we didn't center any texts.
440
00:22:49,750 --> 00:22:52,070
And we probably don't have any texts
441
00:22:52,070 --> 00:22:54,660
that is longer than 75 lines,
442
00:22:54,660 --> 00:22:56,600
except maybe for this one.
443
00:22:56,600 --> 00:22:59,060
But again, this text is not important
444
00:22:59,060 --> 00:23:02,840
and so that is a good exception.
445
00:23:02,840 --> 00:23:05,320
So we're not gonna count here, of course,
446
00:23:05,320 --> 00:23:07,550
manually how many characters there are,
447
00:23:07,550 --> 00:23:11,040
but it sure looks like less than 75.
448
00:23:11,040 --> 00:23:12,660
So I think with this,
449
00:23:12,660 --> 00:23:16,220
we created a good reading experience for our users.
450
00:23:16,220 --> 00:23:18,440
And so let's now wrap up this video
451
00:23:18,440 --> 00:23:20,963
and talk about colors in the next one.
32093
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.