Instructor: Now in this lesson,
we're gonna 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 wanna 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 size,
as you might have seen me do already,
but if we think about it,
what exactly does a 20 pixel font size mean?
How big is it, really?
Well, this is how big it is.
One pixel is about 1/96 of an inch,
and the reason why we're using Imperial units
is because a lot of this sizing for websites
and for design work
actually comes from the olden days
of book printing, bookbinding, and it was very traditional.
If you know how big an inch is,
then you know how big 1/96 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.26 millimeters.
That's about how big a pixel is.
It's 0.26 millimeters wide and 0.26 millimeters 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 slightly bigger than a pixel.
It's about 1/72 of an inch, so that's just slightly bigger.
If 1.96 of an inch is 0.26 millimeters,
1/72 of an inch is about naught 0.35 millimeters,
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 webpage,
you can expect that when a website's at 100%,
it'll 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 E-M,
it's pronounced em,
so it's pronounced in the same way
that this letter is in the alphabet.
Why is that?
Well, one em 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 one em,
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 20 pixels,
then this H1, if we set it to one em or one em,
then it means it's going to be 100% of the parent's size,
so it means it's gonna be 20 pixels.
Now, however, if we set it to two em instead,
then in this case,
it's going to be two times the parent's size,
so two times 20 pixels,
which is going to be 40 pixels instead.
It's basically a relative size,
and I'm gonna 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 two em,
and my footer had a font size of 20 pixels,
then two em is two times 20 pixels,
which is equal to 40 pixels, so this H2 is now 40 pixels.
However, if I go in here
and I change this footer to have 80 pixels,
then all of a sudden, this is going to change,
and it's no longer going to be 40 pixels,
but instead it's going to be two times 80,
which is now equal to 160 pixels,
so it's moving relative to its parent's size.
On the other hand, if I had set this H2
to have a size of two rem,
and I change the size of my footer
from 20 pixels to 80 pixels,
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 90 pixels,
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 who's parent we'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.
One rem is one X the root size,
two rem is two X the root size,
and this is a much easier way to control the different sizes
of various elements on your screen
and 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 extra 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 wanna 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 extra extra large down to say 20 pixels,
then you'll see that this paragraph changed 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 world,
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 feed 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 type faces 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'll 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 at 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 types 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 gonna 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, "Front 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's 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 serf,
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 wanna talk about
in terms of text styling is alignment.
So text alignment,
and there's 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 to-dos 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 to-dos
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 wanna 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 to-dos.
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 two rem.
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 changed 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 changed the root which is the HTML element,
to have a 30 pixel font.
And when that was changed, then the two rem 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 gonna 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.