Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Web Typography

Well done!

You have completed Web Typography!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Weights and Styles

9:44 with Mattox Shuler

Properly choosing and setting up our font family’s weights and styles will make all the difference when displaying them on our site. Remember, faux is no way to go.

[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