Up next in 10
CSS Tutorial For Beginners 30 - Font Weight
2K views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers delve into the concept of font weight, a crucial aspect of typography and web design. The video likely covers how to adjust the weight or thickness of text elements using CSS properties such as font-weight, allowing for the creation of various levels of emphasis and hierarchy within text content. Viewers can expect to learn how to specify font weights ranging from normal to bold, as well as how to use numerical values or predefined keywords to achieve desired visual effects. Practical examples and demonstrations may be included to illustrate the impact of font weight on the readability and appearance of text within web pages. This tutorial serves as a foundational resource for beginners seeking to enhance their typography skills and create visually engaging web designs using CSS.
View Video Transcript
0:00
Yo guys what the hell's going on this is CSS for beginners lesson 30
0:10
and today we're going to talk all about the font weight property in CSS that's coming up
0:15
all right so before we dive into the code i just want to take a look at this sample web page
0:20
and can you see here we've got a h1 and it's much bolder bit chunkier darker than the rest of the
0:26
text here would you say and that is the font weight in action. So if I right click this here and I go to Google DevTools, we can see the user
0:35
agent style sheet. That's the default browser styles and it's got this H1 rule here and it's
0:40
given it a font weight property of bold. So that's what the font weight property is all about
0:43
We can control how chunky if you like or how dark the font displays on your webpage
0:48
Wow! Okay so we're back here in the code and we're going to take a look at the font weight
0:53
property in more detail. So that H1 we just saw in the browser, we're going to target that and
0:59
we're going to overwrite that style, that default browser style, and give that a different
1:03
font weight. So, the property name is font weights, which is font dash weight, then we'll put
1:09
our colon. And then brackets is giving me all these different options. I'll talk about all these
1:14
numbers later on, but you can see down here the key words, bold, this is what we saw in the
1:19
browser, bolder, which to be honest, nine times out of 10 or even 99 times out of 100 is going
1:24
to give you the same effect as bolder. Inherit, we've seen all about that before in the last
1:28
video just inherits the parents elements style for this property lighter which is
1:34
going to go to a nice crisp light thin font and normal so what we'll do is we'll use this
1:40
normal keyword to override that default browser style that we just saw in the browser and give
1:46
all of our h1s a normal font weight so I'm going to save that and I'm going to open this up in
1:52
the browser Okay there we go So now it no longer bolder or chunkier It just normal Yeah it still bigger and it looks a little darker than these but that is purely because of the font size not the font weight
2:10
We've lost the chunkiness and the boldness and the darkness. Okay, so that's font weight normal
2:16
Which, by the way, all of these P tags by default have applied to them
2:21
So now that we've seen normal, we'll look at something else. We'll look at the P tags and we'll make these
2:28
Boulder. So font weight, colon, scroll down through our keywords and we'll go to Boulder
2:37
here and we'll save that out, open this up in a browser. And there we go, guys, we can
2:49
now see that all of the P tags here are bold. So I'm just going to jump back again and
2:55
I'm going to change this back to normal just to see that all of our P tags have gone
3:01
back to the default state. Open this back up in Chrome. Okay, yeah, cool
3:09
So they're now all the default normal size, or default normal weight rather
3:15
So let's look at this lighter one. We saw here that there's a keyword lighter, and that generally means more crisp or thinner
3:23
text okay so we'll save that and see what it does in the browser
3:27
okay doesn't seem to have done anything if I compare this window
3:36
to the window we just had for normal which is this you can see
3:40
absolutely nothing is changing with the p-text now why is that and it's because of the font family that we're using now the default font family
3:48
in my browser is Times New Roman and that doesn't have a light option attached to it
3:53
So that's an important point. Not all fonts have a bold and lighter version attached to them
4:01
Now one font that does have all of those three attached to it on Windows 8 is called YU Gothic Or it could be called U Gothic I don know how to pronounce it But either way we try using that font family
4:14
And because there's two words in this font, you have to use these little quotation marks
4:20
So it's YU Gothic. Okay? Because if we didn't have these quotes, then it wouldn't recognize this because of the space here
4:28
We have to put it in quotes because it's two words. Alright so let's save that and just to begin with we're going to change this back to normal
4:38
Save that and view it in a browser. Okay so now we can see this new font, this UGothic or YUGothic and this is how the normal font weight looks like
4:56
So let's go back and change it to lighter. and open this up again in a browser
5:09
And now we can see that it's different. If I switch between this one, which is lighter
5:14
and this one, which is normal, you can see there's a subtle difference. Okay, these have got a little smaller
5:21
thinner lines, and they just look a little more delicate. So that's what lighter is all about
5:26
Let's just see, bolder, just to make sure that this font. has all three and view this in a browser again. Cool, there we go, so this is
5:42
nice and bold now. So just be wary when you're using certain fonts, they don't
5:46
always have all three options attached to them. Now I said earlier we saw some numbers
5:51
and I'll show you those again. It's these things here. So they range from 100 right
5:57
the way down to 900. Now these are numbers which represent how bold the font is and
6:05
100 would be the lightest and 900 would be the boldest Okay now pretty much nearly every font will not have values for 200 300 300 400 500 500 600 700 800 and 900 okay you
6:19
probably going to get at best three font weights out of all of them and generally
6:23
speaking 100 to 300 is in the lighter range 400 600 is in the normal range and 700 to 900
6:32
is going to be in a bolder range so we'll just see what this looks like we'll go to 100 first of all so this should be similar to what we saw with the lighter keyword view this in a
6:41
browser and get that there so yeah we can see now these are all lighter and instead
6:49
of going back to the code I'm just going to inspect the element and I'm going to change it in the console here so I put 100 there let's change it to 300 see what
6:58
changes no not changed at all that's because like I say they don't have values
7:05
attached to all of the numbers. So 100 to 300 are generally just going to be that lighter range
7:10
Let's try 500. That should be the kind of regular range. Yep, you can see that jump then
7:14
It's got the normal font weight to it now. And we'll try 900, which is bold. So cool. There you see
7:23
We've got the keywords, which are lighter, normal, and bold and bolder. And bold and bolder, by the way, are pretty much the same
7:31
and you've got the numbers which range from 100 to 900 and the 100 to 300 range is the lighter versions
7:38
400 to 600 the normal versions and 700 to 900 the bold versions
7:43
so that about covers it for font weight if you have any questions whatsoever feel free to throw a comment down below
7:50
and I'm going to answer all of those as soon as I can otherwise if you enjoy these videos please like share and subscribe
7:55
and I'll see you guys in the next one You know
#Online Video