Original subtitles

Now, in this lesson, we're going to talk a bit more about the different CSS properties that we can

set for fonts so we can change the appearance of the text in our websites.

And we've already seen some of them, for example, the color property which sets the text color, but

there's other ones as well, such as the font-weight, the font-size and also the font- family, which

is the typeface that we want to use.

Let's explore some of these newer ones.

The first one I'll talk about is the font- size.

We can change the size of a font by simply using the font-size property and then setting it to a particular

pixel(px) size, as you might have seen me do already.

But if we think about it, what exactly does a 20px font size mean?

How big is it really?

Well, this is how big it is,

1px is about 1/96th of an inch.

And the reason why we're using imperial units is because a lot of the sizing for websites and for design

work actually comes from the olden days of book printing, book binding

and it was very traditional.

If you know how big an inch is, then you know how big 1/96th of an inch is,

it's absolutely tiny, but if you have no idea how big an inch is, then in metric units it's about

0.26mm.

That's about how big a pixel is.

It's 0.26mm wide and 0.26mm tall.

So it's a small cube that's very, very tiny.

There are other ways that we can represent the font size when we're writing CSS.

One common way that you'll see in addition to pixels is using something called a point.

A "px" stands for a pixel and a "pt" stands for a point.

Now how big is a point?

Well, it's a slightly bigger than a pixel,

it's about 1/72nd of an inch.

So that's just slightly bigger.

If 1/96 of an inch is 0.26mm, 1/72 of an inch is about 0.35mm, just a tiny bit bigger.

Now the point is actually often used in many different applications.

So when you select a 12-size font in, say Word, you're actually selecting 12 points.

So that means when you're using 12 points on your web page, you can expect that when a website is at

100%, it will look about the same as a 12 font on your word document.

In addition, there are some other ways of representing font-size, the "em" and the "rem".

What are these units?

Well, the em is actually not pronounced em, it's pronounced "m", so it's pronounced in the same way that

this letter is in the alphabet.

Why is that?

Well, 1em is defined as the full width of an m.

The letter m is probably one of the widest letters in the English alphabet, and this unit simply represents

that entire width.

But what does it actually mean when we use it?

Well, what it means is that when you set an h1 to have the font-size of 1em, your CSS code would

look something like this.

Then it means that if it had a parent, for example, if we had a body tag that enclosed this h1

tag, then if this body had a font-size of say 20px, then this h1 if we set it to 1em or

1em, then it means it's going to be a 100% of the parent size.

So it means it's going to be 20px.

Now, however, if we set it to 2em instead, then in this case it's going to be two times the parent

size.

So 2*20px, which is going to be 40px instead.

It's basically a relative size.

And I'm going to explain to you why this is important very shortly.

But closely related to the em or the em is the rem, and it's got that extra word, "r".

And basically it works the same thing.

It's a relative size, but it's now relative instead of to the parent,

it's relative to the root of your HTML file, which if you remember, the root is usually an html element

that encloses everything inside.

What is the difference then, between the em and the rem?

If we take a look at this code where we've got a body tag that encloses an h1 and then we've got a footer

tag, which is one of the tags that you can use to define a section in your code for the footer area

of your website,

then inside here we've got an h2 that's enclosed.

If I set my h2 to have a font size of 2em and my footer had a font size of 20px, then

2em is 2*20px, which is equal to 40px.

So this h2 is now 40px.

However, if I go in here and I change this footer to have 80px, then all of a sudden this is

going to change and it's no longer going to be 40px, but instead, it's going to be 2*80,

which is now equal to 160px.

So it's moving relative to its parent size.

On the other hand, if I had set this h2 to have a size of 2rem and I change the size of my footer

from 20px to 80px, then it does not affect this

whatsoever,

it still remains the same size.

It's only if I change the root element, which if you take a look, it's the thing that encloses all

of the rest of the code, which is normally the html element.

If I change this size to something larger, say 90px, then that is the thing that will affect

this sizing.

So the main difference between the rem and the em is the fact that this is a more consistent way of changing

the sizing.

So I normally recommend that everybody who develops websites, when you're setting the font size to use

the rem. Because the way that you have different things embedded in others,

so this h2 is inside a footer which is inside the body, which is inside the html,

then the relationship to the parent can very quickly get very confusing and you don't know whose parent

you're referring to, especially when you're working in a separate CSS file.

So understand how the rem works,

remember, it is a scaled size of the root,

1rem is 1x the root size, 2rem is 2x the root size,

and this is a much easier way to control the different sizes of various elements on your screen and to

have more clarity around what's going on. In the starting file that you downloaded previously,

I've got some sample code for you.

If we take a look at all the different ways of setting font-size, you can see that we can use the pixel

size, we can use point size, we can use em, rem and we can also use named font sizes such as

x-large or large

and when all of this is rendered, you'll see the different sizes in play.

The fact that a pixel is much smaller than a point, but these two are static font sizes and then the

em is relative to the parent and the rem is relative to the root,

but these are relative sizes.

If you want to see this code and be able to edit it and change it and see it working, then download

the zipped file from this current lesson called "6.1 Font Properties."

Once you've extracted it, open it up inside VS Code.

Head over to font-size.html and you'll see exactly the same code as in the demo,

but in this case it's of course in VS Code.

So you can change things such as the rem, the em, the different font sizes, the root font size, and

you'll see it reflected on the screen.

For example, if I change this root font size from xx-large down to say, 20px, then

you'll see that this paragraph change accordingly because its size is based on rem.

So have a play around with that so that you can understand what's going on.

There are some other font properties that I want to briefly cover.

One is the font-weight, which is relatively simple.

You can have normal or you can have bold, and we all know what that means,

It just makes the font look a bit heavier.

But out in the wild you might see some other ways that people use to change the font-weight

in addition to the basic keywords. You can have a relative font-weight which is relative to the parent

to have the font lighter or have it be bolder.

In addition, you can also use a number from 100 up to 900 to determine how light or how bold you want

the font to be.

And similarly, when we say lighter it basically minuses the number by 100.

And if we say bolder, it just makes it bolder by 100.

Somewhere along this range. In addition to font-size and font-weight, there's also the all important

font-family,

and this determines what you want your text to look like.

For example, in this first example, we've got the font-family that is set to Helvetica.

This is a particular typeface and the name is called Helvetica, but this is a Mac-specific typeface.

So there are many Windows computers that do not own this typeface.

That's why very often when we write a font-family, we don't just write the font name, we have a comma,

and then we have a backup generic font type.

So in this case it's a sans-serif.

A sans-serif is simply the type of font where all the edges are pretty much at right angles.

If you had these little feet or these little decorations at the edges

of your letters, then very often what you're looking at is a serif-type font.

So that's the main two types of different typefaces.

And in later lessons, we

cover typefaces in more detail.

So you can either search for that lesson or wait until it comes up to learn more about that.

What is important though, is having this generic typeface.

This means that when you have this set that Mac users will see this font, but Windows users will see

something that's relatively equivalent and it will be automatically displayed for them when it doesn't

work.

Now what if you have a font that has many words in it?

For example, "Times New Roman" consists of three words.

Well, in this case, we can't simply just type it out like this and then have a comma.

We actually need the quotation marks around it so that we can tell the CSS file that there are spaces

in the name of the font- family.

So just be careful about that when you're using it.

And because "Times New Roman" is a serif-type font, then the backup, the generic type is also a serif.

Now what if you want a completely custom font that maybe the user doesn't have?

Well, one of the best places to find free fonts is going over to fonts.google.com.

And here you can find all sorts of different fonts and there are so, so many for you to choose from

and you can browse to your heart's content.

Now I want you to do this with me,

go over to fonts.google.com, find a font that you like.

So maybe I really like a particular font and if you click on it, sometimes you'll see that it has different

font faces for the different weights.

So there's bold, which is 700 or regular 400.

But then other fonts you might see in here doesn't actually have any weight other than just the regular

one that you can use. Depending on which of these type you have,

simply select the weight that you're interested in.

For example, with this font, maybe I want the medium size, and with this font, maybe I'm just going

to select a regular one.

And once you've selected that, if you go to the top right corner, you can see all of your selections.

So you can remove all or you can remove the ones that you're not interested in,

but either way, you should end up with a font that you want to include.

Now make sure that that link is selected and then copy that over to your starting file.

So select the font-family.html inside the head element just after the style tag,

go ahead and paste all of that in and this is basically a link that is going to pull in the Google font

for any user on the internet.

So it doesn't matter if they have a Mac or a PC or which fonts they have downloaded on their computer,

they'll all be able to access this font because we're including it in the link.

And then let's go ahead and copy the CSS rule, which Google has very helpfully included for us.

And if you scroll up, you'll see that I've again got an internal style set in here so that we can more

easily see the CSS alongside the HTML on the same file

while we're doing the exercise.

Let's go ahead and create an h1 here and I'm simply going to write the words font-family because that

is what this page is all about.

And then let's right-click and show it in the preview.

Now, I want you to set the h1 CSS style to the one that you just copied over.

Pause the video and do that right now.

All right.

So we need to target the h1 of which we've only got one so we can use the element selector and

then we paste in our CSS style as easy as that.

And you'll notice immediately that updates that font into our custom font from Google,

and it doesn't matter what you've chosen, this should always work as long as you've included all of

the links that are required and added in the relevant CSS.

Also on this page you'll see the different font families, for example, the Helvetica and the

sans-serif

or on a Windows

the default sans-serif will be an Arial-type font.

And then you've got serif-type fonts, which are the ones with the little feet that I mentioned.

You've got these sans-serif fonts and you've got all of these other generics such as cursive, monospace,

and fantasy. Cursive is a little bit curly.

That's how I remember it.

Monospace has all the letters occupying the same width, so similar to a typewriter or code, and fantasy

is usually something kind of wild.

And these generic fonts will be different depending on the computer that you use and the browser that

you use.

So you might not see the same type of fonts that I have here, but if you specify a specific font and

you make sure that it's linked to, then we should all be looking at the same font face right up here.

And notice how when we copy that over it specified the specific font, but also a backup font in case

these links didn't work or something messed up and it would default to a cursive font.

The generic cursive font would then look like this.

So the final thing I want to talk about in terms of text styling is alignment.

So text alignment.

And there is this property called text-align where you can set it to say, centered, or you can set it to

the left or to the right.

And you've also got some values like start and end.

And basically start is when you have text that maybe starts, writing from the right to left, such as

in Arabic,

and so in this case, the start is actually here and the end is here.

But then if you're working with Western text, then the start will be right here and the end will be

right here.

That's just a more flexible way of determining the text- align.

But all in all, this is a pretty simple property and you can take a look at it in the MDN Docs to learn

more about what the other values in addition to start/end are, and try the demo to see how they work.

Now once you've done all of that, I've got a final exercise for you and that's located in the index.html

here.

There's a number of TODOs I want you to complete, and I want you to go through them one by one.

It involves changing some colors, changing some font sizes, font-weight, font-family, the

text-align and also changing a root element font-size.

The important thing is that you don't change any of the CSS that's already included, but instead write

your CSS below in this internal style element so that you can quickly refer to the TODOs and see what

you need to write in the CSS.

Don't worry too much about setting external CSS.

We're just completing this as a quick exercise.

And remember, while you're doing this, if you want to see what the end result should look like, go

ahead into the goal.png

to see all the colors and layout and relative sizes of everything.

Pause the video now and go through each of these TODOs.

All right.

So let's go through the solution together.

Now, step one was to change the color of this particular element to a named color called coral.

And the solution should look something like this.

The second one is to change the font-size of this element to two times the size of the root element.

Remember, to do that, we have to use the rem and two times the size is 2rem.

I've selected it based on the size ID and I've changed the font-size to that.

The next step

I've changed the font weight of this element to 900 by using the font-weight property and then we change

the font family of this element to use the caveat font with a regular font-weight.

So I selected that font from there and then I added in all the required links just before the end of

the head section.

But outside of the style section, this is very important in terms of placement.

And then I added in the font-family and a backup font in case it goes wrong.

Next I changed this particular paragraph element so that it's right aligned.

And finally I change the root, which is the html element to have a 30px font.

And when that was changed, then the 2rem one, which is the font-size element here, actually changes

with it.

So it gets bigger or it gets smaller depending on the root size.

So hopefully, that was easy enough for you to complete and it tested you on all the things that we learned

in this lesson so far.

Once you're ready, head over to the next lesson where we're going to learn more about CSS inspection

and how you can find out what is happening with your CSS using the Chrome Developer Tools.

So for all of that and more, I'll see you there.