Now one of the most important decisions that you will have to make when you are designing your web site 1
is what are the fonts that you're going to choose. And a lot of web designers will start off by figuring 2
out a color palette as well as a font scheme. 3
So in this lesson we're going to learn about how we can change the fonts for all of our text in our 4
web site. 5
Now there are two major font families and that is the Serif and the Sans-serif fonts. 6
So you can tell Serif and Sans-serif fonts 7
apart from each other by looking for these little feet at the edges of all of the letters and these 8
little feet are called serifs. 9
Now we can broadly define whether we want a Sans-serif or a Serif typeface for any text on our website. 10
So let's go ahead and do that. 11
If we go into our stylesheet and we change the font-family property for our body, then we actually affect 12
all the text on our web page, and you can see that there's five major families listed here, now only three 13
of which are you actually going to use. 14
So we've seen Serif and Sans-serif. 15
Now monospace is when each of the characters inside the text take up the same amount of width and that's 16
usually a typeface that we use for coding because it makes everything super easy to read. 17
For example if this word 'align' was styled in a Serif or Sans-serif typeface, then the i would be squished 18
right next to the l and the g. 19
But because our code is represented in a monospaced font, then you can more easily read each of the letters. 20
So you use these two for your normal web site styling. 21
And when you do have code on your web page sometimes people like to style it using monospace. 22
Now cursive and fantasy are two families that you're never really going to use, firstly because they have 23
low readability, and secondly because they generally don't look that great when used in the body of a 24
web site. 25
So cursive is meant to be handwritten style of fonts. 26
And fantasy is meant to remind you of Avatar, 27
basically. So let's take a look at what each of these families look like. 28
So let's first define a font family of Serif. And let's head back over to our web site and we hit refresh. 29
You'll notice that nothing happens. By default 30
we already have a Serif family. 31
You can see that at the end of the I's 32
we've already got these little feet. 33
Now if we change that to Sans-serif, however, we will get a noticeable change. 34
And those little feet or those little serifs now disappear, and we have a different style. 35
Now for most browsers the default Serif is the Times font and the default Sans-serif is Arial, and this 36
is the Arial font. 37
Now if we changed this to fantasy then it will still work, 38
it just now looks like I'm producing the next Avatar. 39
So let's head back to a Sans-serif typeface, and I'm not really satisfied with just an Arial 40
font. 41
What if I want a different Sans-serif font? 42
Let's say that, instead of Arial, I would rather have Verdana as the font for my website. 43
Now what I can do is instead of specifying just the Sans-serif broad stroke family, I can add a specific 44
font or typeface in front. 45
For example, if I wanted the Verdana font, then I can simply type verdana, and then have a comma, and then 46
separate that from the sans-serif family. 47
And now if we head back over here and refresh you can see I'm now using the Verdana font. 48
And what this line of code does is that it sets the font family for all the text inside the body but 49
it first asks the browser to try and render all the text in the Verdana font. 50
Now if for some reason the browser or the operating system that the user is using doesn't have this 51
font installed, then it will default to whatever is the Sans-serif font that is installed on their system. 52
Now that's a little bit scary because that kind of means that I might think that I've designed my web 53
site to look like this, 54
and I think it looks perfect just like this, but on somebody else's system or browser they might be getting 55
a completely different style with different font heights and just a different look and feel. 56
So there is such a thing called web safe fonts. 57
Now what this means is that there is a set of font families where most operating systems will be able 58
to render it correctly. 59
And for the Serifs that includes Georgia, Times New Roman, for the Sans-serif that includes Arial, Comic 60
Sans, Impact, etc.. 61
Although these are called web safe fonts and it's basically saying that if you choose these sets of 62
fonts then you have the maximum chance of getting it rendered correctly as you're seeing yourself when 63
you're designing it, 64
but actually no font is actually 100 percent web safe. 65
And if you had ever to see cssfontstack.com, then somebody has actually painstakingly listed all 66
of the fonts that are in common usage and what is the percentage of users who have it installed, separated 67
by their operating system. 68
So as you can see the font that most people have is Arial. 69
So 99.8 percent installation of Windows, 98.7 percent on the Mac. 70
Now that is really really high. 71
But for some other fonts you'll see a difference between the Mac and the Windows operating systems and 72
we're not even including Linux users here. 73
So for example if you look at something like Helvetica which is a Apple specific thing, then on Windows 74
installation rate is really really low. 75
And on Mac it's 100 percent because it comes pre-installed with all Mac OS. 76
So what can you do if you want to use a font but you're not sure if everyone has it installed, right? 77
For example if I want to use Helvetica then there's only 7 percent of users on Windows who are going 78
to see it rendered in that font. 79
Well then you would need fallbacks. 80
So if we click on this little icon here on Font Stack, then we actually copy a set of fallbacks for this 81
Helvetica font. 82
And if I go ahead and paste that and replace our font family, then you can see that we have a stack of 83
fallbacks. 84
So I'm basically saying that I want the font family to be Helvetica Neue if they have it, and if they 85
have an Apple system then it's very likely that they will have this font installed. If they don't have 86
it, then default to the next best thing which is Helvetica. 87
And if they don't have that then default to Arial. 88
And finally just go with whatever Sans-serif they've got installed 89
if they don't even have Arial, which is very unlikely, but you can see how we're going from specific 90
to less specific and all the while ensuring that we're getting roughly a similar sort of typeface and 91
similar sort of feel no matter which fonts the users have installed or not installed. 92
So if we hit save and we go back to our web site, then you can see that on the Mac I do indeed have Helvetica 93
Neue installed. 94
And that's what's currently being rendered on screen. 95
But if I was on Windows then I might be seeing Arial 96
in this case. 97
And you can go ahead and give it a go and have a look at these font stacks and copy them over to your 98
web page and see what you're able to get. 99
Now what if we were even more picky as designers? 100
What if I really want everybody who looks at my web site to see exactly the same thing as I designed 101
it? 102
I want them to see the design that I intended instead of whatever font it is that they happened to have 103
installed. 104
And for example if I was using Helvetica then pretty much like 93 percent of Windows users are just 105
going to see Arial. 106
What if I really hate Arial? 107
What can I do to ensure that everybody has the same viewing experience with regards to the fonts on 108
my web site? 109
Well, you could use something called font embedding. 110
So if we head over to fonts.google.com, then you can see that they've got a whole bunch of font 111
families that you can choose from. 112
And these are all fonts that are free for commercial use that you can simply embed into your website. 113
And there's a large choice of font families that you can pick through so you can choose whether you 114
want just Serif fonts to look through, or Sans-serif, they have these cool articles about which fonts 115
go well with which and a whole bunch of really really useful stuff actually. 116
But in my case I already know what it is that I want. I want a font called Merriweather for my body. 117
So I'm just going to add this plus sign, and this is a pretty kind of Serif font. If you click on it, it actually 118
shows you what the characters look like, 119
who designed it, 120
what is it about, 121
what is the usage currently, 122
what are the different styles, different weights, 123
what do they all look like? 124
It's even got things like loading speed and popular pairings, for example. 125
So this is one of the fonts that I want and that's going to be for the body text. 126
So I'm just going to go ahead and click add. Now I'm going to go ahead and add a few more different fonts 127
before I show you how we're going to incorporate this. 128
So the other one that I'm going to pick up is a handwriting font actually. 129
It's called Sacramento and this I'm going to use as the font for my h1, 130
so a very stylish sort of font where we don't really need people to read it that clearly. 131
So it's not like a body font, where it would be quite painful to try and read through, you know, 300 words all styled 132
like this. 133
So let's go ahead and add that to. 134
So we've got now two selected, and the last thing that I want is my main heading font, and that is going 135
to be a Sans-serif, and one that I'm quite partial to is the Montserrat, 136
so I'm going to go ahead and add that as well. 137
So now I've got three font families selected. 138
And I can embedd it into my website as easily as copying this link and pasting that at the top of my 139
index.html. I'm just going to paste that link in there. 140
And this specifies a location where, if users don't have these fonts already installed or cached on their 141
system, then the browser will take them to this location and grab those fonts for them. 142
And then if we go into the styles.css, then I can specify a font family that I want to use. 143
So the one that I want for my body is the Merriweather font, and I'm going to paste that in here and it 144
will default to Serif 145
if something terrible happens, say the Internet connection went down in the middle of downloading the 146
font etc., but you can see it's not a large font stack because in pretty much 99.9999 147
percent of the time this is the font that everybody is going to see because we are embedding 148
it instead of presuming that people already have it. 149
Now for my h1 I'm going to use the Sacramento and for my h2 and also h3s 150
I'm going to use the Montserrat. 151
So let's go ahead and put those in there. 152
And let's just hit beautify to rearrange everything. 153
Let's hit save, take ourselves back over to our web site, 154
hit refresh and voila. 155
Our text is now beautifully styled using the fonts that we chose from Google Fonts. 156
So feel free to have a mess around with the different fonts that you might like or you might want to 157
incorporate to your web site and then simply add them to your selection, 158
include the link in your index.html, and start using them in your CSS like so. Now in the next 159
lesson, 160
I want to go and do a deep dive on different fonts and different typefaces, what are the different families 161
and how they came about. 162
So just a lesson on one of the most crucial parts of digital design and that's of course typography. 163
So if you're interested then that is what you will get on the next lesson. 164
If you're not interested then you can feel free and go ahead and skip ahead to the next lesson where 165
we explore some of the other font and text properties that we can use to style our text on our web site. 166
So I'll see you on the next lesson.