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