Weights and Styles

[SOUND] Now that we've looked at some principles and 0:00 have a background on typography, we'll get into how to 0:04 achieve good typography on the web in the next few stages. 0:09 In the previous stage, we learned how to choose and 0:13 serve up font families on the web. 0:16 In this session, we'll start with the basics of a font family's weight and 0:18 styles like bold and italics. 0:21 First, it will be good to mention here that faux bold and 0:24 faux italic are faux pas, which simply translates to, don 't do them. 0:27 Faux bold or faux italic means it's a false bold or a fake italic. 0:32 These can occur when you only have one weight and style of a typeface. 0:37 CSS has the ability to fake the bold or italic style of that web font. 0:41 But believe me, it ain't pretty and it can hinder legibility. 0:45 Without a bold web font called in CSS, 0:49 a faux bold is created by thickening up the original web font. 0:51 This can create issues with legibility as counters close up, 0:56 dark patches of color can appear, and letters get distorted. 0:59 Type designers carefully craft their bold weights to correct these issues. 1:03 Without an italic web font called in CSS, faux italics are created by obliquing or 1:07 slanting the original web font to a certain degree. 1:12 At first glance, you might think this looks okay, but let's take a closer look. 1:15 Italic versions of serif typefaces are actually created in a more cursive style. 1:20 They're not just slanted versions of their regular or roaming counter parts. 1:25 They're condensed sum and 1:28 often in their letter forms are entirely different altogether. 1:30 Notice the changes here. 1:33 Such as how the crossbar on the E becomes more fluid. 1:35 Or how the F elegantly descends below the baseline. 1:38 Because italics are often used for emphasis on the web, 1:41 true italics can better emphasize words or phrases than faux italics because of this. 1:45 For sans serifs, this cursive nature is less accentuated. 1:51 So you might think you can get away with a faux. 1:54 But you can't. 1:57 Any time you oblique a font, the weight of the letter forms gets 1:58 unevenly distributed which creates uneven color. 2:01 Also, certain layers can change entirely in a true italic. 2:05 Such as a two story Roman a changing to a one story italic a. 2:08 Again, type designers meticulously build italic versions of their 2:13 fonts correcting these issues. 2:17 So be sure to utilize web fonts that have bold and 2:18 italics, instead of trying to fake it. 2:21 This not only gives the user a better experience, but 2:24 it also creates better legibility and readability. 2:26 Be aware, too, that some typefaces online are sold as having italics. 2:29 But really, they're just uncorrected oblique versions of their fonts. 2:33 This is why when choosing a typeface you want to make sure it's 2:37 well built with all necessary weights and styles. 2:40 Now that we understand that, 2:44 let's talk about implementing various weights and styles. 2:45 Sometimes typefaces have a basic array of weights like normal and bold. 2:48 But other times, a family of fonts can range from thin to light to normal to 2:53 semi-bold to bold to black. 2:57 We know we can use normal or bold values for those two corresponding weights. 3:00 But what can we do for all the others? 3:04 CSS has the ability to call different weights through its font weight property. 3:07 For those weights outside your basic normal and bold, the best way to 3:11 call them is by setting a numerical value in their font weight property. 3:15 Weights can be assigned a numerical value ranging from 100, 200, 300 and 3:19 so forth to 900, giving us nine potential weights for one font family. 3:24 Let's look at a workspace I've set up for style linking with open sans. 3:30 I've already downloaded the family from Font Squirrel and 3:34 have uploaded the web fonts to our work space and 3:37 built a style sheet calling the web fonts through the @font-face declaration. 3:39 We've seen how to do this before. 3:43 But here, let's pay attention to the font weights and styles. 3:45 The family name is set as open sans which will stay the same for all of these. 3:48 But I've left the font weight and style properties blank so we can fill those in. 3:53 I've also made some comments letting me know which ones are which based on 3:58 the different URLs. 4:02 First, let's start to define the normal and 4:04 bold styles as those will give us reference to the others. 4:06 The normal style corresponds to a font weight of 400. 4:09 So we'll go to our normal style and add 400 here. 4:12 And we know that the font style is normal. 4:15 The bold weight corresponds to a font weight of 700. 4:20 So we can add that in here and add our font style as normal. 4:23 If we were to write 700 or bold here, those terms are interchangeable. 4:29 Same with 400 and normal. 4:33 So you're able to write either of those. 4:35 Great. 4:37 Now that we have that accomplished, let's look at the others. 4:38 The lightweight falls right between the normal at 400. 4:40 So let's head over to that. 4:43 And we'll set it at 300, because it's right below 400. 4:46 And we'll do our font style as normal. 4:49 And then the light italic will be the same thing as 300. 4:53 And then we'll do a font style of italic. 4:56 For our normal italic, we'll add 400 here, and a font style of italic. 5:01 Now let's move on to semi-bold. 5:08 We have a choice to make. 5:11 Semi-bold falls between normal and bold. 5:12 But there's two available numerical values of 500 or 600. 5:15 Because semi-bold leans closer to a bolder look, 5:18 let's choose 600 and set up its styles. 5:22 So we'll use 600, normal for it's font style. 5:24 And we'll do 600 for it's weight. 5:29 And italic for this one. 5:32 We can move on to extra bold, because bold's already been complete. 5:34 We'll just want to set up it's italic style. 5:38 Now we're at extra bold. 5:43 Since it's right above bold, we'll give it a weight of 800 and 5:44 a font style of normal for this one. 5:47 And then 800 and a font style of italic for this last one. 5:49 All right. 5:56 Now I've set up the body to be open sans at the normal or 400 weight. 5:56 We also have some classes to show you how you can call and 6:02 assign a weight to each class. 6:05 You can call these classes whatever you like. 6:07 I've just labeled them here as the intended font style that it 6:09 should be showing. 6:13 Now I've also used the font weight property to call the proper weight for 6:14 that font style. 6:18 Now, we'll save and head over to our HTML to check it out. 6:19 Here, we have a similar set up, except for 6:24 there's more terms because there's more styles here. 6:27 So we have open sans light, 6:29 and our class should be light, open sans light italic, and 6:30 our class should be light italic, and so forth all the way to open sans extra bold. 6:34 So, now that we have that, we'll view our work space and see how it turned out. 6:39 Our work space is set up because we're using two different styles. 6:43 And for this first one, I'm using the @font-face and 6:46 we'll later look at the Google Fonts one. 6:49 So we'll click that. 6:51 And it looks great. 6:52 Open Sans is displaying correctly on the computer, and 6:53 its weights are set up properly along with its italics. 6:56 You'd always wanna check to make sure these aren't just faux weights or 7:00 faux styles by seeing if the italic a you know, 7:03 has that one story a versus the two story a and so forth. 7:06 In places like Type Kit or 7:12 Google Fonts, where you are utilizing a hosted service to call your web fonts. 7:14 The service has already set all this up on their end and will provide you 7:18 with a numerical value for your CSS, which corresponds to the weight. 7:22 For example, on Google Fonts, we see that 7:26 the corresponding weight values follow the name like we've seen before. 7:29 We also see the numerical values we selected when self-hosting line up 7:33 with the values that are selected here. 7:37 To cover our bases, let's quickly see how to build the same example web page, 7:40 except this time, with Google Fonts. 7:44 I'll select all of our open sans weights and styles. 7:47 In a real world situation, this and 7:50 the previ example would be somewhat impractical, because calling so 7:51 many fonts can slow page load times as we see our meter is almost in the red. 7:55 But since we're looking at just how to understand this with our weights and 8:00 styles, it's okay in this learning environment. 8:02 I'll grab the snippet of code here. 8:05 And add it to the head of my HTML right before the style sheet. 8:08 I'll click Save. 8:13 Now let's go check out our CSS. 8:14 Our font family is set at Open Sans because that was what Google provided. 8:16 And then our weights are set up in the same way with light at 300, 8:21 semi-bold at 600, and so forth. 8:25 And these are just the classes that are setting called in our HTML here, 8:27 like bold, bold italic, and so forth. 8:31 We'll hit save and go preview that work space. 8:34 This time we're choosing the Google fonts one. 8:37 And great. 8:39 It worked. We 8:40 see that we have multiple weight showing here. 8:40 And each weight is correctly set up to its corresponding weight. 8:43 So you see we've accomplished the same web page, 8:48 except utilize Google font as a hosting service. 8:50 As you can see, this requires a lot less work and code than self-hosting, but 8:53 it gives you less customization. 8:58 Lastly, it should be noted that in Internet Explorer 8, the style linking 9:00 method for self-hosting web fonts can only call a total of four weights and styles. 9:04 If your target audience utilizes those browsers and you need more weights. 9:09 Then you'll need to tweak the code a bit. 9:13 So check out the combined method in the @font-face declaration article by 9:15 Laura Franz from the teachers notes. 9:19 If you're using a web font hosting service, 9:21 then they handle much of that on their end. 9:23 So you dont have to worry about browser support for multiple weights and styles. 9:25 Great. I hope you now understand how to 9:30 set up and call different weights and styles through CSS for your font families. 9:32 And whether you're self-hosting or using a hosted service, you should be good to go. 9:36 In the next video, we'll look at font size and line height. 9:40