Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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.
Open Sans on Font Squirrel
Open Sans on Google Fonts
Say No to Faux Bold, Alan Stearns
Avoiding Faux Weight and Styles with Google Web Fonts, Laura Franz
Setting Weights and Styles with the @fontface Declaration, Laura Franz
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up