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