1 00:00:00,008 --> 00:00:04,320 [SOUND] Now that we've looked at some principles and 2 00:00:04,320 --> 00:00:09,032 have a background on typography, we'll get into how to 3 00:00:09,032 --> 00:00:13,957 achieve good typography on the web in the next few stages. 4 00:00:13,957 --> 00:00:16,397 In the previous stage, we learned how to choose and 5 00:00:16,397 --> 00:00:18,718 serve up font families on the web. 6 00:00:18,718 --> 00:00:21,980 In this session, we'll start with the basics of a font family's weight and 7 00:00:21,980 --> 00:00:24,510 styles like bold and italics. 8 00:00:24,510 --> 00:00:27,730 First, it will be good to mention here that faux bold and 9 00:00:27,730 --> 00:00:32,990 faux italic are faux pas, which simply translates to, don 't do them. 10 00:00:32,990 --> 00:00:37,350 Faux bold or faux italic means it's a false bold or a fake italic. 11 00:00:37,350 --> 00:00:41,530 These can occur when you only have one weight and style of a typeface. 12 00:00:41,530 --> 00:00:45,690 CSS has the ability to fake the bold or italic style of that web font. 13 00:00:45,690 --> 00:00:48,770 But believe me, it ain't pretty and it can hinder legibility. 14 00:00:49,840 --> 00:00:51,820 Without a bold web font called in CSS, 15 00:00:51,820 --> 00:00:56,100 a faux bold is created by thickening up the original web font. 16 00:00:56,100 --> 00:00:59,670 This can create issues with legibility as counters close up, 17 00:00:59,670 --> 00:01:03,390 dark patches of color can appear, and letters get distorted. 18 00:01:03,390 --> 00:01:07,620 Type designers carefully craft their bold weights to correct these issues. 19 00:01:07,620 --> 00:01:12,400 Without an italic web font called in CSS, faux italics are created by obliquing or 20 00:01:12,400 --> 00:01:15,620 slanting the original web font to a certain degree. 21 00:01:15,620 --> 00:01:19,210 At first glance, you might think this looks okay, but let's take a closer look. 22 00:01:20,520 --> 00:01:25,070 Italic versions of serif typefaces are actually created in a more cursive style. 23 00:01:25,070 --> 00:01:28,995 They're not just slanted versions of their regular or roaming counter parts. 24 00:01:28,995 --> 00:01:30,340 They're condensed sum and 25 00:01:30,340 --> 00:01:33,980 often in their letter forms are entirely different altogether. 26 00:01:33,980 --> 00:01:35,530 Notice the changes here. 27 00:01:35,530 --> 00:01:38,680 Such as how the crossbar on the E becomes more fluid. 28 00:01:38,680 --> 00:01:41,930 Or how the F elegantly descends below the baseline. 29 00:01:41,930 --> 00:01:45,380 Because italics are often used for emphasis on the web, 30 00:01:45,380 --> 00:01:49,739 true italics can better emphasize words or phrases than faux italics because of this. 31 00:01:51,140 --> 00:01:54,830 For sans serifs, this cursive nature is less accentuated. 32 00:01:54,830 --> 00:01:57,380 So you might think you can get away with a faux. 33 00:01:57,380 --> 00:01:58,520 But you can't. 34 00:01:58,520 --> 00:02:01,700 Any time you oblique a font, the weight of the letter forms gets 35 00:02:01,700 --> 00:02:05,130 unevenly distributed which creates uneven color. 36 00:02:05,130 --> 00:02:08,850 Also, certain layers can change entirely in a true italic. 37 00:02:08,850 --> 00:02:13,470 Such as a two story Roman a changing to a one story italic a. 38 00:02:13,470 --> 00:02:17,160 Again, type designers meticulously build italic versions of their 39 00:02:17,160 --> 00:02:18,990 fonts correcting these issues. 40 00:02:18,990 --> 00:02:21,320 So be sure to utilize web fonts that have bold and 41 00:02:21,320 --> 00:02:24,260 italics, instead of trying to fake it. 42 00:02:24,260 --> 00:02:26,570 This not only gives the user a better experience, but 43 00:02:26,570 --> 00:02:29,650 it also creates better legibility and readability. 44 00:02:29,650 --> 00:02:33,220 Be aware, too, that some typefaces online are sold as having italics. 45 00:02:33,220 --> 00:02:36,460 But really, they're just uncorrected oblique versions of their fonts. 46 00:02:37,500 --> 00:02:40,580 This is why when choosing a typeface you want to make sure it's 47 00:02:40,580 --> 00:02:44,570 well built with all necessary weights and styles. 48 00:02:44,570 --> 00:02:45,850 Now that we understand that, 49 00:02:45,850 --> 00:02:48,970 let's talk about implementing various weights and styles. 50 00:02:48,970 --> 00:02:53,370 Sometimes typefaces have a basic array of weights like normal and bold. 51 00:02:53,370 --> 00:02:57,945 But other times, a family of fonts can range from thin to light to normal to 52 00:02:57,945 --> 00:03:00,370 semi-bold to bold to black. 53 00:03:00,370 --> 00:03:04,580 We know we can use normal or bold values for those two corresponding weights. 54 00:03:04,580 --> 00:03:06,109 But what can we do for all the others? 55 00:03:07,440 --> 00:03:11,950 CSS has the ability to call different weights through its font weight property. 56 00:03:11,950 --> 00:03:15,460 For those weights outside your basic normal and bold, the best way to 57 00:03:15,460 --> 00:03:19,550 call them is by setting a numerical value in their font weight property. 58 00:03:19,550 --> 00:03:24,970 Weights can be assigned a numerical value ranging from 100, 200, 300 and 59 00:03:24,970 --> 00:03:30,390 so forth to 900, giving us nine potential weights for one font family. 60 00:03:30,390 --> 00:03:34,390 Let's look at a workspace I've set up for style linking with open sans. 61 00:03:34,390 --> 00:03:37,120 I've already downloaded the family from Font Squirrel and 62 00:03:37,120 --> 00:03:39,750 have uploaded the web fonts to our work space and 63 00:03:39,750 --> 00:03:43,750 built a style sheet calling the web fonts through the @font-face declaration. 64 00:03:43,750 --> 00:03:45,440 We've seen how to do this before. 65 00:03:45,440 --> 00:03:48,950 But here, let's pay attention to the font weights and styles. 66 00:03:48,950 --> 00:03:53,750 The family name is set as open sans which will stay the same for all of these. 67 00:03:53,750 --> 00:03:58,670 But I've left the font weight and style properties blank so we can fill those in. 68 00:03:58,670 --> 00:04:02,490 I've also made some comments letting me know which ones are which based on 69 00:04:02,490 --> 00:04:04,190 the different URLs. 70 00:04:04,190 --> 00:04:06,430 First, let's start to define the normal and 71 00:04:06,430 --> 00:04:09,720 bold styles as those will give us reference to the others. 72 00:04:09,720 --> 00:04:12,470 The normal style corresponds to a font weight of 400. 73 00:04:12,470 --> 00:04:15,420 So we'll go to our normal style and add 400 here. 74 00:04:15,420 --> 00:04:18,460 And we know that the font style is normal. 75 00:04:20,370 --> 00:04:23,080 The bold weight corresponds to a font weight of 700. 76 00:04:23,080 --> 00:04:27,840 So we can add that in here and add our font style as normal. 77 00:04:29,150 --> 00:04:33,460 If we were to write 700 or bold here, those terms are interchangeable. 78 00:04:33,460 --> 00:04:35,020 Same with 400 and normal. 79 00:04:35,020 --> 00:04:37,560 So you're able to write either of those. 80 00:04:37,560 --> 00:04:38,180 Great. 81 00:04:38,180 --> 00:04:40,800 Now that we have that accomplished, let's look at the others. 82 00:04:40,800 --> 00:04:43,480 The lightweight falls right between the normal at 400. 83 00:04:43,480 --> 00:04:45,410 So let's head over to that. 84 00:04:46,420 --> 00:04:49,160 And we'll set it at 300, because it's right below 400. 85 00:04:49,160 --> 00:04:51,650 And we'll do our font style as normal. 86 00:04:53,500 --> 00:04:56,400 And then the light italic will be the same thing as 300. 87 00:04:56,400 --> 00:04:59,300 And then we'll do a font style of italic. 88 00:05:01,560 --> 00:05:05,960 For our normal italic, we'll add 400 here, and a font style of italic. 89 00:05:08,710 --> 00:05:11,130 Now let's move on to semi-bold. 90 00:05:11,130 --> 00:05:12,245 We have a choice to make. 91 00:05:12,245 --> 00:05:15,090 Semi-bold falls between normal and bold. 92 00:05:15,090 --> 00:05:18,560 But there's two available numerical values of 500 or 600. 93 00:05:18,560 --> 00:05:22,350 Because semi-bold leans closer to a bolder look, 94 00:05:22,350 --> 00:05:24,888 let's choose 600 and set up its styles. 95 00:05:24,888 --> 00:05:29,340 So we'll use 600, normal for it's font style. 96 00:05:29,340 --> 00:05:32,030 And we'll do 600 for it's weight. 97 00:05:32,030 --> 00:05:33,040 And italic for this one. 98 00:05:34,940 --> 00:05:38,680 We can move on to extra bold, because bold's already been complete. 99 00:05:38,680 --> 00:05:40,360 We'll just want to set up it's italic style. 100 00:05:43,090 --> 00:05:44,530 Now we're at extra bold. 101 00:05:44,530 --> 00:05:47,205 Since it's right above bold, we'll give it a weight of 800 and 102 00:05:47,205 --> 00:05:49,640 a font style of normal for this one. 103 00:05:49,640 --> 00:05:54,740 And then 800 and a font style of italic for this last one. 104 00:05:56,100 --> 00:05:56,860 All right. 105 00:05:56,860 --> 00:06:02,310 Now I've set up the body to be open sans at the normal or 400 weight. 106 00:06:02,310 --> 00:06:05,110 We also have some classes to show you how you can call and 107 00:06:05,110 --> 00:06:07,360 assign a weight to each class. 108 00:06:07,360 --> 00:06:09,410 You can call these classes whatever you like. 109 00:06:09,410 --> 00:06:13,160 I've just labeled them here as the intended font style that it 110 00:06:13,160 --> 00:06:14,015 should be showing. 111 00:06:14,015 --> 00:06:18,070 Now I've also used the font weight property to call the proper weight for 112 00:06:18,070 --> 00:06:18,810 that font style. 113 00:06:19,950 --> 00:06:23,390 Now, we'll save and head over to our HTML to check it out. 114 00:06:24,930 --> 00:06:27,230 Here, we have a similar set up, except for 115 00:06:27,230 --> 00:06:29,670 there's more terms because there's more styles here. 116 00:06:29,670 --> 00:06:30,860 So we have open sans light, 117 00:06:30,860 --> 00:06:34,170 and our class should be light, open sans light italic, and 118 00:06:34,170 --> 00:06:38,440 our class should be light italic, and so forth all the way to open sans extra bold. 119 00:06:39,600 --> 00:06:43,930 So, now that we have that, we'll view our work space and see how it turned out. 120 00:06:43,930 --> 00:06:46,710 Our work space is set up because we're using two different styles. 121 00:06:46,710 --> 00:06:49,410 And for this first one, I'm using the @font-face and 122 00:06:49,410 --> 00:06:51,330 we'll later look at the Google Fonts one. 123 00:06:51,330 --> 00:06:52,530 So we'll click that. 124 00:06:52,530 --> 00:06:53,650 And it looks great. 125 00:06:53,650 --> 00:06:56,680 Open Sans is displaying correctly on the computer, and 126 00:06:56,680 --> 00:07:00,140 its weights are set up properly along with its italics. 127 00:07:00,140 --> 00:07:03,090 You'd always wanna check to make sure these aren't just faux weights or 128 00:07:03,090 --> 00:07:06,480 faux styles by seeing if the italic a you know, 129 00:07:06,480 --> 00:07:10,490 has that one story a versus the two story a and so forth. 130 00:07:12,660 --> 00:07:14,170 In places like Type Kit or 131 00:07:14,170 --> 00:07:18,260 Google Fonts, where you are utilizing a hosted service to call your web fonts. 132 00:07:18,260 --> 00:07:22,210 The service has already set all this up on their end and will provide you 133 00:07:22,210 --> 00:07:26,650 with a numerical value for your CSS, which corresponds to the weight. 134 00:07:26,650 --> 00:07:29,490 For example, on Google Fonts, we see that 135 00:07:29,490 --> 00:07:33,520 the corresponding weight values follow the name like we've seen before. 136 00:07:33,520 --> 00:07:37,500 We also see the numerical values we selected when self-hosting line up 137 00:07:37,500 --> 00:07:40,020 with the values that are selected here. 138 00:07:40,020 --> 00:07:44,090 To cover our bases, let's quickly see how to build the same example web page, 139 00:07:44,090 --> 00:07:46,060 except this time, with Google Fonts. 140 00:07:47,390 --> 00:07:50,390 I'll select all of our open sans weights and styles. 141 00:07:50,390 --> 00:07:51,960 In a real world situation, this and 142 00:07:51,960 --> 00:07:55,450 the previ example would be somewhat impractical, because calling so 143 00:07:55,450 --> 00:08:00,040 many fonts can slow page load times as we see our meter is almost in the red. 144 00:08:00,040 --> 00:08:02,930 But since we're looking at just how to understand this with our weights and 145 00:08:02,930 --> 00:08:05,810 styles, it's okay in this learning environment. 146 00:08:05,810 --> 00:08:08,430 I'll grab the snippet of code here. 147 00:08:08,430 --> 00:08:12,430 And add it to the head of my HTML right before the style sheet. 148 00:08:13,550 --> 00:08:14,920 I'll click Save. 149 00:08:14,920 --> 00:08:16,210 Now let's go check out our CSS. 150 00:08:16,210 --> 00:08:21,370 Our font family is set at Open Sans because that was what Google provided. 151 00:08:21,370 --> 00:08:25,135 And then our weights are set up in the same way with light at 300, 152 00:08:25,135 --> 00:08:27,450 semi-bold at 600, and so forth. 153 00:08:27,450 --> 00:08:31,330 And these are just the classes that are setting called in our HTML here, 154 00:08:31,330 --> 00:08:34,250 like bold, bold italic, and so forth. 155 00:08:34,250 --> 00:08:36,550 We'll hit save and go preview that work space. 156 00:08:37,570 --> 00:08:39,200 This time we're choosing the Google fonts one. 157 00:08:39,200 --> 00:08:40,380 And great. 158 00:08:40,380 --> 00:08:40,970 It worked. We 159 00:08:40,970 --> 00:08:43,860 see that we have multiple weight showing here. 160 00:08:43,860 --> 00:08:47,050 And each weight is correctly set up to its corresponding weight. 161 00:08:48,170 --> 00:08:50,450 So you see we've accomplished the same web page, 162 00:08:50,450 --> 00:08:53,500 except utilize Google font as a hosting service. 163 00:08:53,500 --> 00:08:58,050 As you can see, this requires a lot less work and code than self-hosting, but 164 00:08:58,050 --> 00:08:59,590 it gives you less customization. 165 00:09:00,600 --> 00:09:04,410 Lastly, it should be noted that in Internet Explorer 8, the style linking 166 00:09:04,410 --> 00:09:09,870 method for self-hosting web fonts can only call a total of four weights and styles. 167 00:09:09,870 --> 00:09:13,400 If your target audience utilizes those browsers and you need more weights. 168 00:09:13,400 --> 00:09:15,570 Then you'll need to tweak the code a bit. 169 00:09:15,570 --> 00:09:19,600 So check out the combined method in the @font-face declaration article by 170 00:09:19,600 --> 00:09:21,630 Laura Franz from the teachers notes. 171 00:09:21,630 --> 00:09:23,650 If you're using a web font hosting service, 172 00:09:23,650 --> 00:09:25,600 then they handle much of that on their end. 173 00:09:25,600 --> 00:09:28,910 So you dont have to worry about browser support for multiple weights and styles. 174 00:09:30,260 --> 00:09:32,170 Great. I hope you now understand how to 175 00:09:32,170 --> 00:09:36,790 set up and call different weights and styles through CSS for your font families. 176 00:09:36,790 --> 00:09:40,430 And whether you're self-hosting or using a hosted service, you should be good to go. 177 00:09:40,430 --> 00:09:43,360 In the next video, we'll look at font size and line height.