1 00:00:01,773 --> 00:00:02,945 Welcome back. 2 00:00:02,945 --> 00:00:07,112 This is our very important lecture about typography. 3 00:00:08,043 --> 00:00:12,526 According to Wikipedia, typography is the art and technique 4 00:00:12,526 --> 00:00:14,854 of arranging type to make written language 5 00:00:14,854 --> 00:00:17,270 readable and beautiful. 6 00:00:17,270 --> 00:00:20,157 This means that typography is an essential part 7 00:00:20,157 --> 00:00:21,819 of any design. 8 00:00:21,819 --> 00:00:24,606 And that's because most of your website 9 00:00:24,606 --> 00:00:26,440 will be text content. 10 00:00:26,440 --> 00:00:29,365 And so it's quite important to make that content 11 00:00:29,365 --> 00:00:32,988 good-looking and easy to read for the user 12 00:00:32,988 --> 00:00:35,519 Good typography can make every design 13 00:00:35,519 --> 00:00:37,899 look very professional. 14 00:00:37,899 --> 00:00:39,966 So let's look at a couple of guidelines 15 00:00:39,966 --> 00:00:42,323 to achieve exactly that. 16 00:00:42,323 --> 00:00:44,482 I will start with some simple rules. 17 00:00:44,482 --> 00:00:48,649 And after that, I will go over choosing some good fonts, 18 00:00:49,880 --> 00:00:53,178 how to get them and how to choose the right font for 19 00:00:53,178 --> 00:00:54,261 your website. 20 00:00:56,962 --> 00:00:59,018 For the first couple of guidelines, 21 00:00:59,018 --> 00:01:03,603 I will use this website to show you good and bad things. 22 00:01:03,603 --> 00:01:08,186 So first, use a font size between 15 and 25 pixels 23 00:01:08,186 --> 00:01:09,935 for body text. 24 00:01:09,935 --> 00:01:12,315 It really depends on the typeface you choose, 25 00:01:12,315 --> 00:01:16,355 how much text you got and how much you want that text 26 00:01:16,355 --> 00:01:17,438 to stand out. 27 00:01:18,375 --> 00:01:22,520 Here in this example, we have a font size of 22 pixels, 28 00:01:22,520 --> 00:01:24,603 and it looks really good. 29 00:01:26,097 --> 00:01:27,512 And this is what it looks like 30 00:01:27,512 --> 00:01:30,589 without using these guidelines. 31 00:01:30,589 --> 00:01:34,199 The first example has only 14 pixels font size, 32 00:01:34,199 --> 00:01:36,998 and it's clearly way too small, right? 33 00:01:36,998 --> 00:01:39,738 And down here in the second paragraph, 34 00:01:39,738 --> 00:01:43,035 the text looks unnaturally big and exaggerated 35 00:01:43,035 --> 00:01:45,775 with those 30 pixels font size. 36 00:01:45,775 --> 00:01:48,525 So wipe both of these situations. 37 00:01:50,918 --> 00:01:54,459 Now for headlines and titles, you can and should, of course, 38 00:01:54,459 --> 00:01:58,372 use bigger font sizes to show that it's important text 39 00:01:58,372 --> 00:02:01,634 that you really want the user to read. 40 00:02:01,634 --> 00:02:05,675 There are no real size limits for headlines, like this one. 41 00:02:05,675 --> 00:02:08,159 So here we have the headline of the website 42 00:02:08,159 --> 00:02:09,854 we've been seeing before. 43 00:02:09,854 --> 00:02:12,896 And it has a font size of 60 pixels, 44 00:02:12,896 --> 00:02:15,646 and I think looks great actually. 45 00:02:17,273 --> 00:02:20,058 This website here has an extremely big headline, 46 00:02:20,058 --> 00:02:22,141 with 90 pixels font size. 47 00:02:23,217 --> 00:02:25,957 And sometimes when you use such a big headline, 48 00:02:25,957 --> 00:02:29,835 you will want to decrease the font weight of that text. 49 00:02:29,835 --> 00:02:34,212 This ensures that the text doesn't steal too much attention 50 00:02:34,212 --> 00:02:36,209 from the rest of the content. 51 00:02:36,209 --> 00:02:39,112 And it makes the text look less bulky 52 00:02:39,112 --> 00:02:41,909 and more modern and elegant. 53 00:02:41,909 --> 00:02:46,611 And that is exactly what this website here is doing right. 54 00:02:46,611 --> 00:02:50,778 Next up, use a line spacing between 120 and 150% 55 00:02:52,034 --> 00:02:53,451 of the font size. 56 00:02:54,459 --> 00:02:57,838 Line spacing is the vertical distance between lines 57 00:02:57,838 --> 00:03:00,915 and makes text easier to read. 58 00:03:00,915 --> 00:03:03,399 Back to our example, this web page here 59 00:03:03,399 --> 00:03:07,566 uses a line spacing of 150% to make the text easy to read. 60 00:03:09,356 --> 00:03:12,523 This is an example of good typography. 61 00:03:13,361 --> 00:03:16,867 And this is what it looks like with bad typography. 62 00:03:16,867 --> 00:03:19,967 With 100% line spacing, which is what happens 63 00:03:19,967 --> 00:03:22,951 when you don't define any line spacing at all, 64 00:03:22,951 --> 00:03:26,631 you see this big block of text, which is not easy to read 65 00:03:26,631 --> 00:03:29,510 because the lines almost overlap. 66 00:03:29,510 --> 00:03:32,029 This is a really bad practice. 67 00:03:32,029 --> 00:03:36,591 Now at 200%, it's also not pleasant to read the text 68 00:03:36,591 --> 00:03:38,566 because it's way too spaced out, 69 00:03:38,566 --> 00:03:40,412 and our eyes have a difficult time 70 00:03:40,412 --> 00:03:43,651 processing the text like this. 71 00:03:43,651 --> 00:03:47,651 So leave line spacing between 120 and 150%, 72 00:03:48,736 --> 00:03:50,548 and you will be fine. 73 00:03:50,548 --> 00:03:55,191 45 to 90 characters per line is the optimal line length 74 00:03:55,191 --> 00:03:57,293 that is easy to read. 75 00:03:57,293 --> 00:03:59,406 45 to 90 characters is like 76 00:03:59,406 --> 00:04:02,831 two to three lowercase alphabets, 77 00:04:02,831 --> 00:04:04,653 just as a reference for you. 78 00:04:04,653 --> 00:04:08,845 So here, for example, our first line has 78 characters. 79 00:04:08,845 --> 00:04:12,014 So its easy to follow the text. 80 00:04:12,014 --> 00:04:14,487 And here again, some bad examples. 81 00:04:14,487 --> 00:04:17,912 In the first example, we have just 36 characters. 82 00:04:17,912 --> 00:04:19,933 And it looks kind of weird. 83 00:04:19,933 --> 00:04:21,976 You can, of course, do this 84 00:04:21,976 --> 00:04:24,611 if you have some columns with some text. 85 00:04:24,611 --> 00:04:28,953 But not in a situation like this with a lot of text. 86 00:04:28,953 --> 00:04:32,088 And down here, the text line is way too long. 87 00:04:32,088 --> 00:04:34,072 And our eyes find it difficult to travel 88 00:04:34,072 --> 00:04:37,290 such a long distance from the end of one line 89 00:04:37,290 --> 00:04:40,296 to the beginning of the next line. 90 00:04:40,296 --> 00:04:43,768 And finally, the most important thing is probably 91 00:04:43,768 --> 00:04:46,414 to choose good-looking fonts. 92 00:04:46,414 --> 00:04:51,268 Now, there are no real rules for selecting the right font. 93 00:04:51,268 --> 00:04:54,089 But since this is a very practical guide, 94 00:04:54,089 --> 00:04:57,050 I will just tell you to use good fonts. 95 00:04:57,050 --> 00:04:59,766 I will show you a couple of good fonts that will look good 96 00:04:59,766 --> 00:05:01,647 in every design. 97 00:05:01,647 --> 00:05:04,747 You can use one of those or of course, 98 00:05:04,747 --> 00:05:08,694 go for some other font that you like better. 99 00:05:08,694 --> 00:05:10,471 But let's first distinguish between 100 00:05:10,471 --> 00:05:12,971 serif and sans-serif typeface. 101 00:05:14,232 --> 00:05:17,355 On the left side, sans-serif typefaces 102 00:05:17,355 --> 00:05:19,713 are more neutral, looking more clean 103 00:05:19,713 --> 00:05:21,233 and more simple. 104 00:05:21,233 --> 00:05:25,773 They are widely used in most modern websites or apps. 105 00:05:25,773 --> 00:05:29,116 On the other side, a serif typeface is one that has 106 00:05:29,116 --> 00:05:33,295 those small extensions or strokes, called serifs 107 00:05:33,295 --> 00:05:34,747 at the end of the letters, 108 00:05:34,747 --> 00:05:38,915 just as you can see here on the right side. 109 00:05:38,915 --> 00:05:40,502 Serif typefaces are usually used 110 00:05:40,502 --> 00:05:43,822 for more traditional purposes that encourage 111 00:05:43,822 --> 00:05:46,405 long reading and story telling. 112 00:05:47,451 --> 00:05:50,077 And this is how sans-serif text looks like 113 00:05:50,077 --> 00:05:52,388 on an actual website. 114 00:05:52,388 --> 00:05:55,534 You're probably used to see sans-serif text everywhere 115 00:05:55,534 --> 00:05:59,634 because it's more used than serif font styles. 116 00:05:59,634 --> 00:06:02,178 Also look how the heading uses bigger text, 117 00:06:02,178 --> 00:06:04,358 but with a very low font weight 118 00:06:04,358 --> 00:06:06,551 as I explained to you before. 119 00:06:06,551 --> 00:06:08,827 This website is absolutely beautiful 120 00:06:08,827 --> 00:06:13,065 and uses all the typography rules that I showed you before. 121 00:06:13,065 --> 00:06:16,323 And here are a couple of very good sans-serif fonts 122 00:06:16,323 --> 00:06:18,490 available on Google fonts. 123 00:06:19,597 --> 00:06:22,697 Now Google fonts is a very good free resource, 124 00:06:22,697 --> 00:06:25,122 where you can get web fonts. 125 00:06:25,122 --> 00:06:28,258 And web fonts are fonts that you can include directly 126 00:06:28,258 --> 00:06:33,001 into your projects without having to download any files. 127 00:06:33,001 --> 00:06:36,296 All of these fonts you see here are broadly used. 128 00:06:36,296 --> 00:06:39,558 You can't get wrong when choosing any of them. 129 00:06:39,558 --> 00:06:42,438 And Lato is actually the font that I used 130 00:06:42,438 --> 00:06:45,479 for this presentation in this course. 131 00:06:45,479 --> 00:06:48,243 Please take a look at the Google fonts website. 132 00:06:48,243 --> 00:06:51,377 You can find it in the course e-book. 133 00:06:51,377 --> 00:06:53,044 And now, serif font. 134 00:06:54,083 --> 00:06:57,322 Here is again the website we've been looking at before 135 00:06:57,322 --> 00:07:00,201 because it's a great example of really beautiful use 136 00:07:00,201 --> 00:07:03,835 of a serif font, at least in the body part. 137 00:07:03,835 --> 00:07:07,876 For the headings, this website actually uses a serif font. 138 00:07:07,876 --> 00:07:09,477 So you see that you can actually mix 139 00:07:09,477 --> 00:07:12,937 serif and sans-serif fonts in one website 140 00:07:12,937 --> 00:07:15,758 and make it look gorgeous. 141 00:07:15,758 --> 00:07:18,440 Here are three beautiful serif typefaces, 142 00:07:18,440 --> 00:07:20,634 also from Google fonts. 143 00:07:20,634 --> 00:07:22,458 I encourage you to use these 144 00:07:22,458 --> 00:07:24,721 if you have a lot of text to show, 145 00:07:24,721 --> 00:07:28,982 like a blog website that should have more traditional look. 146 00:07:28,982 --> 00:07:32,882 So how should you actually choose a typeface? 147 00:07:32,882 --> 00:07:35,843 The most important thing is that the font you choose 148 00:07:35,843 --> 00:07:40,000 depends strongly on the website you're designing. 149 00:07:40,000 --> 00:07:43,077 You need to choose a font, which best helps to reflect 150 00:07:43,077 --> 00:07:46,083 the look and feel you want for your website 151 00:07:46,083 --> 00:07:47,919 that you're designing. 152 00:07:47,919 --> 00:07:51,644 Because ultimately, the goal of choosing the right typeface 153 00:07:51,644 --> 00:07:54,199 is to engage your audience. 154 00:07:54,199 --> 00:07:57,439 Based on that, you can decide if you're better off 155 00:07:57,439 --> 00:08:01,304 with a sans-serif or with a serif typeface. 156 00:08:01,304 --> 00:08:04,776 And after you decided that, use a good font. 157 00:08:04,776 --> 00:08:08,723 You can start with one after ones that I showed you before. 158 00:08:08,723 --> 00:08:10,778 And if you're a complete beginner, 159 00:08:10,778 --> 00:08:13,600 then please only use one typeface. 160 00:08:13,600 --> 00:08:15,735 If you want to use more than one, 161 00:08:15,735 --> 00:08:18,463 please take a look at the course e-book. 162 00:08:18,463 --> 00:08:22,585 You will find a tool there which helps repairing fonts, 163 00:08:22,585 --> 00:08:26,777 which means to choose two good fonts for a website. 164 00:08:26,777 --> 00:08:28,285 The best you can do is to play around 165 00:08:28,285 --> 00:08:31,641 with different typefaces and see which best helps 166 00:08:31,641 --> 00:08:34,997 to achieve what you want for your website. 167 00:08:34,997 --> 00:08:37,004 And that's it for typography. 168 00:08:37,004 --> 00:08:39,838 This was quite a long lecture actually. 169 00:08:39,838 --> 00:08:43,158 And next up, we have another very important aspect 170 00:08:43,158 --> 00:08:44,505 of web design, 171 00:08:44,505 --> 00:08:45,724 colors. 172 00:08:45,724 --> 00:08:48,807 So join me right in the next lecture.