- Weights and Styles 9:44
- Weights and Styles: Review 5 questions
- Font-Sizing: Px, Em, and Rem 5:20
- Font-Sizing: Px, Em, and Rem - Part 2 4:41
- Font-sizing: Review 6 questions
- Horizontal Space: Measure and Margins 4:44
- Horizontal Space: Review 5 questions
- Vertical Space: Line-Height and Vertical Rhythm 8:42
- Vertical Space: Review 5 questions
Preview
Video Player
00:00
00:00
Weights and Styles
9:44Properly 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