1 00:00:02,060 --> 00:00:05,870 For fonts, we have three core properties 2 00:00:05,870 --> 00:00:08,520 or three core topics that we can use 3 00:00:08,520 --> 00:00:11,970 to make our page look as good as possible. 4 00:00:11,970 --> 00:00:14,890 The first one is, of course, the font type 5 00:00:14,890 --> 00:00:17,310 and if you closely inspect the card here, 6 00:00:17,310 --> 00:00:20,710 you can see that we used two different font types, 7 00:00:20,710 --> 00:00:22,653 two different font families. 8 00:00:23,660 --> 00:00:27,530 We have a serif font for the H1 element, 9 00:00:27,530 --> 00:00:30,710 So this serif part can be seen with this line. 10 00:00:30,710 --> 00:00:33,570 So to say at the end here, for example. 11 00:00:33,570 --> 00:00:35,490 The rest for the rest of the element, 12 00:00:35,490 --> 00:00:38,130 we decided to use a sans serif font, 13 00:00:38,130 --> 00:00:40,200 which is a more rounded font types so to say, 14 00:00:40,200 --> 00:00:42,430 you can see right here, right there, 15 00:00:42,430 --> 00:00:45,540 and also for the remainder of this card. 16 00:00:45,540 --> 00:00:48,393 So font type, font family, is one option. 17 00:00:49,380 --> 00:00:53,520 The second option is the font size. 18 00:00:53,520 --> 00:00:56,880 The font size obviously is different on this card. 19 00:00:56,880 --> 00:00:58,440 We'll dive into the different font 20 00:00:58,440 --> 00:01:00,560 sizes used in a few seconds. 21 00:01:00,560 --> 00:01:03,793 And as a third point, we have the font weight. 22 00:01:04,870 --> 00:01:06,730 As you see for our H1 element, 23 00:01:06,730 --> 00:01:09,610 we have a bigger font weight, 24 00:01:09,610 --> 00:01:11,970 this part of the page here, 25 00:01:11,970 --> 00:01:13,570 and also the other texts like this one 26 00:01:13,570 --> 00:01:16,560 here has a thinner font weight. 27 00:01:16,560 --> 00:01:19,300 Whereas the price and this join now button 28 00:01:19,300 --> 00:01:23,713 have a thicker font weight, a bigger font weight, applied. 29 00:01:24,820 --> 00:01:27,920 Let's get started with the font family. 30 00:01:27,920 --> 00:01:32,620 If we check out our HTML element up here, maybe, 31 00:01:32,620 --> 00:01:36,810 you see that in general, we use the font family named Crop 32 00:01:36,810 --> 00:01:39,740 which is a sans serif font family. 33 00:01:39,740 --> 00:01:41,563 And where did we find that font? 34 00:01:42,760 --> 00:01:45,150 Well, on Google fonts. 35 00:01:45,150 --> 00:01:47,890 We used Google fonts already in the course, 36 00:01:47,890 --> 00:01:51,530 and you learned how to use these fonts in your own projects. 37 00:01:51,530 --> 00:01:55,330 Therefore, I don't want to dive too deep into this part now, 38 00:01:55,330 --> 00:01:57,670 but, let's say that you want to have a nice 39 00:01:57,670 --> 00:02:01,343 looking sans serif font and that you go to Google fonts. 40 00:02:02,970 --> 00:02:07,970 What you then see is that you have 1,200 font families, 41 00:02:08,800 --> 00:02:11,550 and then you probably see that, well, this is too much. 42 00:02:12,680 --> 00:02:16,330 What you can then do is you can go to categories and 43 00:02:16,330 --> 00:02:21,130 unselect, everything besides the sans serif font family. 44 00:02:21,130 --> 00:02:22,910 Okay, nice. 45 00:02:22,910 --> 00:02:27,023 Now we have 484 fonts. Still a bit too much, 46 00:02:27,910 --> 00:02:32,260 therefore, a nice little trick or tip that 47 00:02:32,260 --> 00:02:33,730 you can use right here to quickly 48 00:02:33,730 --> 00:02:36,000 find a nice looking sans serif font, 49 00:02:36,000 --> 00:02:39,660 in this case, is to go to the font properties here 50 00:02:40,870 --> 00:02:44,860 and there, play around with the number of styles. 51 00:02:44,860 --> 00:02:46,400 As you saw in Google fonts, 52 00:02:46,400 --> 00:02:49,680 for example, if I go to this Roboto font, 53 00:02:49,680 --> 00:02:52,750 you see that we have 12 styles available. 54 00:02:52,750 --> 00:02:54,850 And if you click onto the font, 55 00:02:54,850 --> 00:02:57,440 you see that you have the files being different 56 00:02:57,440 --> 00:02:59,860 in the thickness or whether it is 57 00:02:59,860 --> 00:03:02,270 an Italic style or not and so on. 58 00:03:02,270 --> 00:03:04,988 So here we have 12 styles available. 59 00:03:04,988 --> 00:03:09,988 If we go back now and go again to the font properties, 60 00:03:10,170 --> 00:03:13,613 right here, then you can change the number of styles. 61 00:03:14,530 --> 00:03:18,180 And whilst there is no right or wrong number 62 00:03:18,180 --> 00:03:19,650 about this option here, 63 00:03:19,650 --> 00:03:23,280 what we typically do is, when choosing our fonts is, 64 00:03:23,280 --> 00:03:27,720 we select this option here and then limit this from all 65 00:03:28,600 --> 00:03:33,600 to maybe six plus or, here, eight plus for example, 66 00:03:34,510 --> 00:03:38,003 or even 10 plus, like this. 67 00:03:38,860 --> 00:03:41,040 With this, we can quickly reduce 68 00:03:41,040 --> 00:03:43,810 the amount of styles available. 69 00:03:43,810 --> 00:03:46,370 Now we only have 62 styles. 70 00:03:46,370 --> 00:03:48,660 And we can also say that typically, 71 00:03:48,660 --> 00:03:53,420 if a font family offers more styles, it's a better crafted, 72 00:03:53,420 --> 00:03:55,990 a more detailed, a better looking font. 73 00:03:55,990 --> 00:03:58,470 Of course, this is not true in general, 74 00:03:58,470 --> 00:04:02,610 but it's a good proxy to narrow down the font families. 75 00:04:02,610 --> 00:04:05,980 In our case here, we are using this crop font family. 76 00:04:05,980 --> 00:04:07,890 Therefore, if you now scroll through 77 00:04:07,890 --> 00:04:10,170 these options you have, then you see that, 78 00:04:10,170 --> 00:04:12,740 if we look down a bit further, 79 00:04:13,860 --> 00:04:17,540 then we can find the crop font style right here. 80 00:04:17,540 --> 00:04:19,800 And if you then select this font, 81 00:04:19,800 --> 00:04:22,600 then you can always see different styles you need. 82 00:04:22,600 --> 00:04:24,460 For example, here for the project, 83 00:04:24,460 --> 00:04:28,790 we used the regular 400 style and we used a style 84 00:04:28,790 --> 00:04:30,230 which is a bit bolder. 85 00:04:30,230 --> 00:04:33,250 So the semi bold one, and then we add this one. 86 00:04:33,250 --> 00:04:34,860 And what you can then do afterwards, 87 00:04:34,860 --> 00:04:39,090 is you can simply copy this entire link here. 88 00:04:39,090 --> 00:04:43,180 This one over there and add it in your 89 00:04:43,180 --> 00:04:46,440 HTML file here in the head. 90 00:04:46,440 --> 00:04:48,740 As I said, this is nothing new to you. 91 00:04:48,740 --> 00:04:50,620 You can see the Crop font by the way, 92 00:04:50,620 --> 00:04:52,160 with the two different weights. 93 00:04:52,160 --> 00:04:55,520 But, this is how we typically narrow down the amount of font 94 00:04:55,520 --> 00:04:59,253 families to find a good looking one as quick as possible, 95 00:05:00,200 --> 00:05:02,200 by the way, the same thing also applies 96 00:05:02,200 --> 00:05:06,760 for the other font family we are using on our website here. 97 00:05:06,760 --> 00:05:09,220 So if you go back to the past courses page 98 00:05:09,220 --> 00:05:12,763 and now go to the H1 element, right here. 99 00:05:14,490 --> 00:05:18,770 You see that there, we have the Zilla Slab font family. 100 00:05:18,770 --> 00:05:23,770 And if we go back to Google fonts here and scroll up a bit 101 00:05:25,160 --> 00:05:29,050 and now switch from the sans serif font to the serif font 102 00:05:29,050 --> 00:05:32,100 family and unselect sans serif, 103 00:05:32,100 --> 00:05:34,360 you see with the same filter applied, 104 00:05:34,360 --> 00:05:37,180 so only 10 styles and more being displayed, 105 00:05:37,180 --> 00:05:40,750 you can find the last lap immediately right there. 106 00:05:40,750 --> 00:05:43,790 So this is one option to quickly find a nice looking 107 00:05:43,790 --> 00:05:46,790 font family for your website. 108 00:05:46,790 --> 00:05:49,180 Besides the font family, we are obviously 109 00:05:49,180 --> 00:05:52,023 also using different front font sizes. 110 00:05:52,900 --> 00:05:55,810 For this, I now use this inspect option here 111 00:05:55,810 --> 00:05:57,750 to make it better visible. 112 00:05:57,750 --> 00:06:00,130 Up here you see that for the H1 element, 113 00:06:00,130 --> 00:06:03,253 We have a font size of 32 pixels. 114 00:06:04,350 --> 00:06:06,320 We have a different font size, 115 00:06:06,320 --> 00:06:08,600 obviously, for the text below. 116 00:06:08,600 --> 00:06:12,360 Here we also use a font size of 16 pixels, 117 00:06:12,360 --> 00:06:14,640 which makes, obviously, the monthly subscription 118 00:06:14,640 --> 00:06:18,220 headline more obvious at first sight. 119 00:06:18,220 --> 00:06:21,250 We use the same concept here for the pricing. 120 00:06:21,250 --> 00:06:24,770 Here, we even use a larger font size, 121 00:06:24,770 --> 00:06:26,170 which is, of course, also related to 122 00:06:26,170 --> 00:06:28,120 the font family used here. 123 00:06:28,120 --> 00:06:30,770 So you have to find your own sizes. 124 00:06:30,770 --> 00:06:33,940 We'll dive into this also throughout this module, 125 00:06:33,940 --> 00:06:35,930 but if we jump to the text below, 126 00:06:35,930 --> 00:06:39,080 you see it, again, has 16 pixels. 127 00:06:39,080 --> 00:06:42,700 Same thing applies to information about the courses. 128 00:06:42,700 --> 00:06:47,560 Inside here, we also use a 16 pixels font size. 129 00:06:47,560 --> 00:06:50,210 The button down here though, so this last one, 130 00:06:50,210 --> 00:06:53,053 uses an 18 pixels font size. 131 00:06:54,180 --> 00:06:55,810 But what you basically see is 132 00:06:55,810 --> 00:06:59,410 we are working with different font sizes on this card, 133 00:06:59,410 --> 00:07:01,230 but not with too many. 134 00:07:01,230 --> 00:07:05,380 We are basically working with 42 pixels for the headline 135 00:07:05,380 --> 00:07:09,580 here, for example, and this 50 pixel here for the pricing. 136 00:07:09,580 --> 00:07:13,860 And then we are working in the 16 pixels range for the text 137 00:07:13,860 --> 00:07:16,880 and 18 pixels for this button. 138 00:07:16,880 --> 00:07:20,510 So the font size is also a great helper to 139 00:07:20,510 --> 00:07:23,130 improve the look of your website, 140 00:07:23,130 --> 00:07:26,490 but typically you shouldn't use too many different font 141 00:07:26,490 --> 00:07:30,943 sizes because then this can also quickly look quite messy. 142 00:07:31,810 --> 00:07:33,770 Nevertheless, the font size is a 143 00:07:33,770 --> 00:07:36,210 great helper to emphasize specific 144 00:07:36,210 --> 00:07:38,300 information on your page. 145 00:07:38,300 --> 00:07:41,020 Besides the font family and the font size, 146 00:07:41,020 --> 00:07:44,220 we also have the font weight, of course. 147 00:07:44,220 --> 00:07:47,380 As you can see it for our price here, 148 00:07:47,380 --> 00:07:50,470 we are using a 600 font weight here, 149 00:07:50,470 --> 00:07:52,490 which would be a semi bold font 150 00:07:52,490 --> 00:07:54,790 as we saw it on Google fonts. 151 00:07:54,790 --> 00:07:57,830 Whereas the normal texts, like the card info 152 00:07:58,840 --> 00:08:01,030 or also the price information here, 153 00:08:01,030 --> 00:08:03,760 doesn't use this bold text. 154 00:08:03,760 --> 00:08:06,850 If we go down to the button though, for example, 155 00:08:06,850 --> 00:08:09,370 here into the actual button 156 00:08:10,210 --> 00:08:12,210 there you can also see that we are again 157 00:08:12,210 --> 00:08:16,010 using this bold or this 600 font weight. 158 00:08:16,010 --> 00:08:17,870 If I would under this, you would see 159 00:08:17,870 --> 00:08:20,430 it would be a bit too thin maybe. 160 00:08:20,430 --> 00:08:23,610 Therefore the font weight is also a great helper 161 00:08:23,610 --> 00:08:26,400 to improve the design of your website. 162 00:08:26,400 --> 00:08:30,550 And again, as I said, these are just some general tips. 163 00:08:30,550 --> 00:08:33,659 So don't use too many font families. 164 00:08:33,659 --> 00:08:35,710 For example, choose two to get started, 165 00:08:35,710 --> 00:08:39,380 and use a serif one and the sans serif one in combination, 166 00:08:39,380 --> 00:08:42,570 which can provide quite good look actually. 167 00:08:42,570 --> 00:08:46,060 Use different font sizes for specific areas, 168 00:08:46,060 --> 00:08:47,780 but don't get too crazy. 169 00:08:47,780 --> 00:08:52,780 And use the font weight to emphasize specific highlights. 170 00:08:53,070 --> 00:08:54,640 So we talked about the space. 171 00:08:54,640 --> 00:08:57,500 For example, with margins and petting. 172 00:08:57,500 --> 00:09:00,440 We talked about fonts, but there is one other 173 00:09:00,440 --> 00:09:04,420 very important core aspect when it comes to website design. 174 00:09:04,420 --> 00:09:07,053 And this is, of course, the color choice.