0 1 00:00:00,890 --> 00:00:01,230 All right. 1 2 00:00:01,230 --> 00:00:07,680 So now that we've got all of our content together, we can go ahead and style all of the text that 2 3 00:00:07,680 --> 00:00:09,370 we've got on our web site. 3 4 00:00:09,750 --> 00:00:15,750 So in this lesson I'm going to cover a number of font properties so that we can further style and make 4 5 00:00:15,750 --> 00:00:18,360 our web site look the way that we want it to. 5 6 00:00:18,360 --> 00:00:24,660 So the first thing I'm going to talk about is the font size, and to begin with I want my h1 to be a 6 7 00:00:24,660 --> 00:00:27,280 lot bigger than my h2s 7 8 00:00:27,320 --> 00:00:33,950 and my h3s, so that it really stands out as the title of this front page. 8 9 00:00:33,960 --> 00:00:37,860 So let's head over to Atom and implement that change. 9 10 00:00:37,860 --> 00:00:44,670 So, inside my h1 I'm going to tap into the font size property, and I'm going to set the font size to 10 11 00:00:44,670 --> 00:00:46,190 90 pixels. 11 12 00:00:46,320 --> 00:00:52,510 So this is the equivalent of selecting 90 in the dropdown menu when you're selecting a font size. 12 13 00:00:52,740 --> 00:01:01,200 And now if I hit refresh then my title is going to get a lot bigger and it's going to fill most of that 13 14 00:01:01,260 --> 00:01:02,740 top page. 14 15 00:01:02,760 --> 00:01:08,580 Now at this point make sure that you're not zoomed in or zoomed out and that your browser is at 100 15 16 00:01:08,580 --> 00:01:15,900 percent zoom, and you can check this by just going to Zoom In or Zoom Out, and you can see whether 16 17 00:01:15,980 --> 00:01:19,720 you're on 100 percent or 110 percent. 17 18 00:01:19,740 --> 00:01:25,020 So we want it to be 100 percent so we can see what everybody else should see by default. 18 19 00:01:25,020 --> 00:01:29,760 Now currently our font size is set to be 90 pixels. 19 20 00:01:30,030 --> 00:01:38,130 So on certain browsers, if the user goes into Preferences and they change their default font size for 20 21 00:01:38,190 --> 00:01:45,390 their web page, for example if they need super large text in order to see, then you'll notice that font 21 22 00:01:45,390 --> 00:01:50,380 size does not change even though the rest of the text does. 22 23 00:01:50,400 --> 00:01:54,070 And this is because this is not a dynamic size. 23 24 00:01:54,480 --> 00:01:58,160 So in order to make it dynamic there's two options. 24 25 00:01:58,170 --> 00:02:04,710 So let's head back over here and just go back to the medium size and if we go into Atom, then instead 25 26 00:02:04,710 --> 00:02:09,690 of using pixels, instead we can use something like a percentage. 26 27 00:02:09,730 --> 00:02:16,720 So 100 percent in terms of font size is actually a 16 pixel size. 27 28 00:02:17,130 --> 00:02:21,220 And so that means if we want 90 pixels, 28 29 00:02:21,420 --> 00:02:27,910 so that means 90 divided by 16, and that would be equal to 562.5, 29 30 00:02:28,140 --> 00:02:36,690 then we would need 562.5 percent in order to get the equivalent of 90 30 31 00:02:36,690 --> 00:02:37,520 pixels. 31 32 00:02:37,740 --> 00:02:45,120 So if we hit save and we go back to our web site and I hit refresh, you'll notice that absolutely nothing 32 33 00:02:45,120 --> 00:02:49,440 happens, because we're specifying exactly the same font size, 33 34 00:02:49,440 --> 00:02:53,040 but instead we're using a percentage this time. 34 35 00:02:53,040 --> 00:03:01,260 So that means that if we go into, say, Preferences, and we change our font size to very small, very large, 35 36 00:03:01,620 --> 00:03:04,440 than that font size will scale with it. 36 37 00:03:04,450 --> 00:03:10,780 Now the other way of specifying a dynamic font size is by using a unit called the em. 37 38 00:03:10,920 --> 00:03:17,730 For example if we head back onto our favorite web site, techcrunch.com, and we highlight this title 38 39 00:03:17,730 --> 00:03:19,630 here and we inspect it. 39 40 00:03:19,750 --> 00:03:26,610 Then if you select this h2 here, you'll see that it's got the class called live-title, and its font size 40 41 00:03:26,700 --> 00:03:32,930 is specified as 2em, rather than however many pixels they want it to be. 41 42 00:03:32,940 --> 00:03:42,540 Now we've seen em before inside our HTML, and we used it as a tag in order to emphasize a particular 42 43 00:03:42,540 --> 00:03:48,430 section of text, and that stylistically means that it'll make something italicised. 43 44 00:03:48,540 --> 00:03:56,850 Now in this case this is actually a completely different em, and the em in this case is actually the 44 45 00:03:56,850 --> 00:04:05,760 phonetic pronunciation of the letter M, and the reason is because in typesetting in the olden days that 45 46 00:04:05,930 --> 00:04:15,660 em, or the M, rather, M is the width of the capital letter M, and so that means that when you say 1em, 46 47 00:04:15,990 --> 00:04:21,490 then you want the font size to be 1 times the width of the capital letter M. 47 48 00:04:21,780 --> 00:04:25,320 And if you want two then that's double the size of the M, 48 49 00:04:25,320 --> 00:04:26,420 etc., etc.. 49 50 00:04:26,580 --> 00:04:34,680 Now in modern days this is no longer true, but what is true is that one em or one M is 16 pixels, as we've 50 51 00:04:34,680 --> 00:04:36,070 seen with our percentages. 51 52 00:04:36,090 --> 00:04:39,690 So 16 pixels is equal to 100 percent 52 53 00:04:39,690 --> 00:04:47,010 when you're talking about fonts, and it's equal to 1 M or 1em, and that means that you can achieve whatever 53 54 00:04:47,010 --> 00:04:51,570 size you want dynamically using either of these methods. 54 55 00:04:51,780 --> 00:05:00,580 So for example as we calculated before ninety pixels is equal to 5.625em. And so it means that 55 56 00:05:00,640 --> 00:05:09,820 if we replace our font size with that number and we hit save and we go back to our site and we hit refresh 56 57 00:05:10,120 --> 00:05:14,340 then you'll see again the font size does not change because they are all the same. 57 58 00:05:14,350 --> 00:05:19,480 It's just using different ways of specifying the same size. 58 59 00:05:19,840 --> 00:05:24,130 So then the question you might have is why would you use one over the other. 59 60 00:05:24,130 --> 00:05:25,470 What does it matter? 60 61 00:05:25,840 --> 00:05:32,800 And if you look on different web sites, for example take uber.com, and, you know, if we inspect on their 61 62 00:05:32,800 --> 00:05:39,290 title here, then you'll notice that their font size is specified in pixels, whereas on Tech Crunch it’s 62 63 00:05:39,290 --> 00:05:44,390 specified in ems, and on other sites you might get percentages. 63 64 00:05:44,410 --> 00:05:50,260 Now as we mentioned before if we change the font size, for example, say, somebody with accessibility issues, 64 65 00:05:50,530 --> 00:05:55,110 to very large, then these static sized fonts do not change, 65 66 00:05:55,170 --> 00:05:59,770 it stays exactly the same size, whereas the things that are dynamically sized, 66 67 00:05:59,770 --> 00:06:06,880 for example things using em or percentages, they do scale up so that users who have maybe visual impairments 67 68 00:06:07,190 --> 00:06:12,570 etc., who might want to have a higher font setting, will be able to view the web site more comfortably. 68 69 00:06:12,760 --> 00:06:17,760 And that's quite important in terms of making your web site accessible to everybody. 69 70 00:06:17,980 --> 00:06:22,780 Now the argument against that is some web designers say that people with visual impairment these days 70 71 00:06:22,930 --> 00:06:29,410 are more likely to zoom in rather than changing their default font size and they're more likely to have 71 72 00:06:29,470 --> 00:06:34,600 a higher zoom in order to read all the text on page, and with zoom 72 73 00:06:34,600 --> 00:06:41,410 it doesn't actually matter whether your text is statically or dynamically sized, because it will just 73 74 00:06:41,470 --> 00:06:46,050 scale up the web site depending on what you’re asking it to do. 74 75 00:06:46,270 --> 00:06:52,460 So maybe that's not such an important distinction between statically and dynamically sized fonts anymore, 75 76 00:06:52,750 --> 00:06:58,510 but there is one thing that is really important and that's the fact that when you are using em or when 76 77 00:06:58,510 --> 00:07:02,740 you're using percentages, that value is inherited. 77 78 00:07:02,740 --> 00:07:10,420 So if I go into the body here and I specify a font size for everything inside the body, so that's everything 78 79 00:07:10,420 --> 00:07:13,420 on my web site, to be, say, 2em, 79 80 00:07:14,170 --> 00:07:20,860 and then in my h1 I leave my font size as the previous dynamic size, I hit save, 80 81 00:07:20,900 --> 00:07:25,010 and let's head back to our web site and we refresh, 81 82 00:07:25,030 --> 00:07:30,280 then you'll notice that our h1 has now become absolutely gigantic. 82 83 00:07:30,520 --> 00:07:39,540 And that's because the font size gets inherited and added on top of whatever it got from its parent. 83 84 00:07:39,730 --> 00:07:47,560 So the parent of the h1 is the body here, because it's contained inside the body, and in the body we 84 85 00:07:47,560 --> 00:07:52,200 said that font size should be 2em across the entire body of the website. 85 86 00:07:52,420 --> 00:07:58,400 Now when it gets to the h1, it's already got that 2em applied, and then it adds that 5.625 86 87 00:07:58,410 --> 00:08:04,660 on top of the 2em, which is why we end up with something so gigantic. 87 88 00:08:04,690 --> 00:08:07,180 And this is exactly the same with percentages. 88 89 00:08:07,180 --> 00:08:17,160 So if I said say 200 percent in our font size and I changed this to 562.5 percent, 89 90 00:08:17,260 --> 00:08:25,510 then again we still get this gigantic font size. But say if I said, you know, the font size should be 20 90 91 00:08:25,510 --> 00:08:26,120 pixels. 91 92 00:08:26,140 --> 00:08:30,760 And over here it should 90 pixels and we go over here, 92 93 00:08:30,760 --> 00:08:32,830 We head back and we refresh, 93 94 00:08:32,860 --> 00:08:37,450 then you see that the font size is staying as 90 pixels. 94 95 00:08:37,450 --> 00:08:43,690 It does not matter what its parent’s font size was, because these are static sizes. 95 96 00:08:43,690 --> 00:08:46,650 So that means it can get a little bit dangerous. 96 97 00:08:46,720 --> 00:08:54,400 For example if you wanted all the text inside your body to be 200 percent, which remember is two times 97 98 00:08:54,460 --> 00:08:58,500 16 pixels which is 32 pixels, 98 99 00:08:58,510 --> 00:09:04,150 now that works fine until you get to a point and you forgot that you did that. 99 100 00:09:04,360 --> 00:09:13,660 And over here you ended up setting your 5.625em, or your percent, and then all of sudden, 100 101 00:09:13,720 --> 00:09:16,580 ‘Oh, what's going on? Why does it look like this?’. 101 102 00:09:16,600 --> 00:09:21,430 And you have to go and debug and try and figure out where did it get this font size from. 102 103 00:09:21,430 --> 00:09:25,500 So for example we can inspect in our Chrome Developer Tools and you see, 103 104 00:09:25,510 --> 00:09:28,260 ‘OK, so it's got font size 5.625, 104 105 00:09:28,270 --> 00:09:32,770 that’s what I want, but do I have any font sizes anywhere else?’. 105 106 00:09:32,770 --> 00:09:38,760 And here in the body, even though it's crossed out, that 200 percent is still being applied. 106 107 00:09:38,770 --> 00:09:45,580 So in order to avoid this, one of the things that we’ve got in the latest version of CSS, which is the version 107 108 00:09:45,580 --> 00:09:52,180 that we are using currently, or the version that I'm teaching you about, is CSS3, and inside CSS3 108 109 00:09:52,270 --> 00:09:54,320 there is something called the rem, 109 110 00:09:54,350 --> 00:10:04,400 and that refers to the root em, so that means, ignore all of the parent’s settings for the font size 110 111 00:10:04,760 --> 00:10:11,810 and just set it to this relative to the root. So that means that it doesn't matter what we've done 111 112 00:10:11,810 --> 00:10:20,570 here or in its enclosing containers or parents. It will be 5.625, times 16 pixels, as long as we add 112 113 00:10:20,570 --> 00:10:22,650 the r in front of the em. 113 114 00:10:22,700 --> 00:10:28,460 So if we hit save and we head back over to our web site, hit refresh, then you can see that we still get 114 115 00:10:28,460 --> 00:10:33,100 that size that we wanted which is the 115 116 00:10:33,190 --> 00:10:34,320 5.625rem. 116 117 00:10:34,370 --> 00:10:43,130 So, the beauty of the root em is that it does not get affected by upstream size changes and it means 117 118 00:10:43,130 --> 00:10:47,840 that it's easier to debug and it's less likely that something will go wrong. 118 119 00:10:48,050 --> 00:10:57,470 So when sizing text my personal recommendation to you is to use rem instead of em or percentages or 119 120 00:10:57,470 --> 00:11:05,410 pixels, because that is the most adaptable and also the most reliable and least error prone. 120 121 00:11:05,780 --> 00:11:13,040 So now if we head back over to our site and refresh and also change our font size in our Preferences 121 122 00:11:13,040 --> 00:11:19,970 back to the Medium that's recommended, then you can see that we've got the exact size that we were looking 122 123 00:11:19,970 --> 00:11:24,800 for, which is the same as the 90 pixels that we specified, 123 124 00:11:24,800 --> 00:11:29,450 but this is done using rem rather than em or percentages. 124 125 00:11:29,450 --> 00:11:31,010 Now here's a challenge for you. 125 126 00:11:31,160 --> 00:11:33,140 Now at the moment our h2, 126 127 00:11:33,170 --> 00:11:36,160 so, for example, this part where it says ‘a programmer’, 127 128 00:11:36,200 --> 00:11:44,430 it looks a little bit too small, and I want you, as a challenge, to set the font size of the h2 to 128 129 00:11:44,450 --> 00:11:52,720 be equivalent to 40 pixels, but I want you to do that using rem. So pause the video. 129 130 00:11:52,820 --> 00:11:54,970 Go ahead and see if you can figure it out. 130 131 00:11:54,980 --> 00:11:57,170 So that's pretty easy to calculate. 131 132 00:11:57,170 --> 00:12:01,670 So our target is 40 pixels for the font size, 132 133 00:12:01,850 --> 00:12:05,830 and we know that one em is 16 pixels. 133 134 00:12:06,020 --> 00:12:11,850 So we can simply divide 40 by 16 and we end up with 2.5. 134 135 00:12:11,870 --> 00:12:20,540 So it'll be 2.5 rem in order to achieve the equivalent of 40 pixels for the font size of our h2. 135 136 00:12:20,570 --> 00:12:23,150 So let's go over to Atom and implement that. 136 137 00:12:23,330 --> 00:12:25,100 So inside our h2, 137 138 00:12:25,280 --> 00:12:34,220 let’s go ahead and set the font size to 2.5rem, hit save and refresh, and voila we've now got 138 139 00:12:34,280 --> 00:12:39,800 a much larger subtitle and heading by changing the font size. 139 140 00:12:39,860 --> 00:12:45,590 So if that was confusing at all make sure that you rewind and re-watch some of the parts we spoke about 140 141 00:12:45,590 --> 00:12:48,660 dynamic font sizing and how it all worked. 141 142 00:12:48,680 --> 00:12:53,220 But now there's just one thing that I want to change about the layout of this web site. 142 143 00:12:53,270 --> 00:12:59,240 I would love for this h1 to have a little bit more padding from the top so that it gets pushed down 143 144 00:12:59,330 --> 00:13:06,410 more towards the center of the page. So, we can do that by simply adding a 50 pixel margin to the top 144 145 00:13:06,410 --> 00:13:10,000 of our h1 rather than having it as zero pixels. 145 146 00:13:10,010 --> 00:13:15,200 So let's go into Atom and change the margin-top to 50 pixels. 146 147 00:13:15,200 --> 00:13:20,130 This is what we end up with. Now with margin-top and padding 147 148 00:13:20,180 --> 00:13:23,170 and all of those other things where we specify a size, 148 149 00:13:23,330 --> 00:13:30,770 you can also use the em, the rem, or the percentage values, but in this case I actually prefer to stick 149 150 00:13:30,770 --> 00:13:37,640 to using pixels because it's more precise and it's much easier to see what's going on when you inspect 150 151 00:13:37,640 --> 00:13:40,020 it in using the box model. 151 152 00:13:40,040 --> 00:13:44,520 So that's just a personal preference and it's stylistic choice of your own. 152 153 00:13:44,540 --> 00:13:52,940 So if you want to use rem or em or percentages, that's absolutely fine as well, and it works exactly 153 154 00:13:52,940 --> 00:13:53,840 the same way 154 155 00:13:53,960 --> 00:13:57,100 as we mentioned with the font sizing. 155 156 00:13:57,140 --> 00:14:03,320 So basically as long as you insert a 50 pixel equivalent margin then we should end up with something 156 157 00:14:03,320 --> 00:14:05,000 that looks a little bit like this. 157 158 00:14:05,000 --> 00:14:10,730 Now there's one more thing that I would like to change here after we've specified our font sizes and 158 159 00:14:10,730 --> 00:14:17,170 that's to have a little bit less space between the h1 and the h2 here, because at the moment, if I hit 159 160 00:14:17,180 --> 00:14:25,370 Inspect, you can see that the h1 has a significant amount of margin before and after. 160 161 00:14:25,370 --> 00:14:29,520 And I would just like to get rid of that bottom margin. 161 162 00:14:29,570 --> 00:14:38,010 So instead of specifying the margin-top we can just specify a margin using the circle shorthand. 162 163 00:14:38,030 --> 00:14:42,440 So we start off with the top which is going to have 50 pixel margin. 163 164 00:14:42,440 --> 00:14:46,890 Then we go to the right which I'm going to keep as auto to keep it centered. 164 165 00:14:47,000 --> 00:14:49,610 Then we get to the bottom which I want to be zero. 165 166 00:14:49,820 --> 00:14:54,230 And finally we have the left which I'm going to leave as auto as well. 166 167 00:14:54,230 --> 00:15:01,640 Now if we hit save and we head back and close down our Chrome Developer Tools, now we hit refresh, you'll 167 168 00:15:01,680 --> 00:15:06,740 see that we've got a little bit less space between the h1 and the h2, and it just looks a little bit more 168 169 00:15:07,010 --> 00:15:07,650 put together. 169 170 00:15:07,670 --> 00:15:12,490 Now these are minor tweaks and it's totally up to you if you want to implement them or not. 170 171 00:15:12,530 --> 00:15:14,920 I'm just adjusting it to my eye. 171 172 00:15:15,040 --> 00:15:21,440 Now in the next lesson I've got a number of challenges for you and I want you to use the developer docs 172 173 00:15:21,830 --> 00:15:27,260 on MDN or on W3 Schools in order to figure out what these properties are and how you should set 173 174 00:15:27,260 --> 00:15:27,690 them. 174 175 00:15:27,800 --> 00:15:33,670 But you should be fully equipped in order to discover some of these other font related properties that 175 176 00:15:33,670 --> 00:15:34,720 I want to talk about. 176 177 00:15:34,730 --> 00:15:38,360 So head over to the next lesson and complete the challenge.