Voiceover: Welcome back. 2 2
This is our very important lecture about typography. 3 3
According to Wikipedia, typography is the art and technique 4 4
of arranging type to make written language 5 5
readable and beautiful. 6 6
This means that typography is an essential part 7 7
of any design. 8 8
And that's because most of your website 9 9
will be text content. 10 10
And so it's quite important to make that content 11 11
good-looking and easy to read for the user 12 12
Good typography can make every design 13 13
look very professional. 14 14
So let's look at a couple of guidelines 15 15
to achieve exactly that. 16 16
I will start with some simple rules. 17 17
And after that, I will go over choosing some good fonts, 18 18
how to get them and how to choose the right font for 19 19
your website. 20 20
For the first couple of guidelines, 21 21
I will use this website to show you good and bad things. 22 22
So first, use a font size between 15 and 25 pixels 23 23
for body text. 24 24
It really depends on the typeface you choose, 25 25
how much text you got and how much you want that text 26 26
to stand out. 27 27
Here in this example, we have a font size of 22 pixels, 28 28
and it looks really good. 29 29
And this is what it looks like 30 30
without using these guidelines. 31 31
The first example has only 14 pixels font size, 32 32
and it's clearly way too small, right? 33 33
And down here in the second paragraph, 34 34
the text looks unnaturally big and exaggerated 35 35
with those 30 pixels font size. 36 36
So wipe both of these situations. 37 37
Now for headlines and titles, you can and should, of course, 38 38
use bigger font sizes to show that it's important text 39 39
that you really want the user to read. 40 40
There are no real size limits for headlines, like this one. 41 41
So here we have the headline of the website 42 42
we've been seeing before. 43 43
And it has a font size of 60 pixels, 44 44
and I think looks great actually. 45 45
This website here has an extremely big headline, 46 46
with 90 pixels font size. 47 47
And sometimes when you use such a big headline, 48 48
you will want to decrease the font weight of that text. 49 49
This ensures that the text doesn't steal too much attention 50 50
from the rest of the content. 51 51
And it makes the text look less bulky 52 52
and more modern and elegant. 53 53
And that is exactly what this website here is doing right. 54 54
Next up, use a line spacing between 120 and 150% 55 55
of the font size. 56 56
Line spacing is the vertical distance between lines 57 57
and makes text easier to read. 58 58
Back to our example, this web page here 59 59
uses a line spacing of 150% to make the text easy to read. 60 60
This is an example of good typography. 61 61
And this is what it looks like with bad typography. 62 62
With 100% line spacing, which is what happens 63 63
when you don't define any line spacing at all, 64 64
you see this big block of text, which is not easy to read 65 65
because the lines almost overlap. 66 66
This is a really bad practice. 67 67
Now at 200%, it's also not pleasant to read the text 68 68
because it's way too spaced out, 69 69
and our eyes have a difficult time 70 70
processing the text like this. 71 71
So leave line spacing between 120 and 150%, 72 72
and you will be fine. 73 73
45 to 90 characters per line is the optimal line length 74 74
that is easy to read. 75 75
45 to 90 characters is like 76 76
two to three lowercase alphabets, 77 77
just as a reference for you. 78 78
So here, for example, our first line has 78 characters. 79 79
So its easy to follow the text. 80 80
And here again, some bad examples. 81 81
In the first example, we have just 36 characters. 82 82
And it looks kind of weird. 83 83
You can, of course, do this 84 84
if you have some columns with some text. 85 85
But not in a situation like this with a lot of text. 86 86
And down here, the text line is way too long. 87 87
And our eyes find it difficult to travel 88 88
such a long distance from the end of one line 89 89
to the beginning of the next line. 90 90
And finally, the most important thing is probably 91 91
to choose good-looking fonts. 92 92
Now, there are no real rules for selecting the right font. 93 93
But since this is a very practical guide, 94 94
I will just tell you to use good fonts. 95 95
I will show you a couple of good fonts that will look good 96 96
in every design. 97 97
You can use one of those or of course, 98 98
go for some other font that you like better. 99 99
But let's first distinguish between 100 100
serif and sans-serif typeface. 101 101
On the left side, sans-serif typefaces 102 102
are more neutral, looking more clean 103 103
and more simple. 104 104
They are widely used in most modern websites or apps. 105 105
On the other side, a serif typeface is one that has 106 106
those small extensions or strokes, called serifs 107 107
at the end of the letters, 108 108
just as you can see here on the right side. 109 109
Serif typefaces are usually used 110 110
for more traditional purposes that encourage 111 111
long reading and story telling. 112 112
And this is how sans-serif text looks like 113 113
on an actual website. 114 114
You're probably used to see sans-serif text everywhere 115 115
because it's more used than serif font styles. 116 116
Also look how the heading uses bigger text, 117 117
but with a very low font weight 118 118
as I explained to you before. 119 119
This website is absolutely beautiful 120 120
and uses all the typography rules that I showed you before. 121 121
And here are a couple of very good sans-serif fonts 122 122
available on Google fonts. 123 123
Now Google fonts is a very good free resource, 124 124
where you can get web fonts. 125 125
And web fonts are fonts that you can include directly 126 126
into your projects without having to download any files. 127 127
All of these fonts you see here are broadly used. 128 128
You can't get wrong when choosing any of them. 129 129
And Lato is actually the font that I used 130 130
for this presentation in this course. 131 131
Please take a look at the Google fonts website. 132 132
You can find it in the course e-book. 133 133
And now, serif font. 134 134
Here is again the website we've been looking at before 135 135
because it's a great example of really beautiful use 136 136
of a serif font, at least in the body part. 137 137
For the headings, this website actually uses a serif font. 138 138
So you see that you can actually mix 139 139
serif and sans-serif fonts in one website 140 140
and make it look gorgeous. 141 141
Here are three beautiful serif typefaces, 142 142
also from Google fonts. 143 143
I encourage you to use these 144 144
if you have a lot of text to show, 145 145
like a blog website that should have more traditional look. 146 146
So how should you actually choose a typeface? 147 147
The most important thing is that the font you choose 148 148
depends strongly on the website you're designing. 149 149
You need to choose a font, which best helps to reflect 150 150
the look and feel you want for your website 151 151
that you're designing. 152 152
Because ultimately, the goal of choosing the right typeface 153 153
is to engage your audience. 154 154
Based on that, you can decide if you're better off 155 155
with a sans-serif or with a serif typeface. 156 156
And after you decided that, use a good font. 157 157
You can start with one after ones that I showed you before. 158 158
And if you're a complete beginner, 159 159
then please only use one typeface. 160 160
If you want to use more than one, 161 161
please take a look at the course e-book. 162 162
You will find a tool there which helps repairing fonts, 163 163
which means to choose two good fonts for a website. 164 164
The best you can do is to play around 165 165
with different typefaces and see which best helps 166 166
to achieve what you want for your website. 167 167
And that's it for typography. 168 168
This was quite a long lecture actually. 169 169
And next up, we have another very important aspect 170 170
of web design, 171 171
colors. 172 172
So join me right in the next lecture.