Original subtitles

1 1

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.