For fonts, we have three core properties
or three core topics that we can use
to make our page look as good as possible.
The first one is, of course, the font type
and if you closely inspect the card here,
you can see that we used two different font types,
two different font families.
We have a serif font for the H1 element,
So this serif part can be seen with this line.
So to say at the end here, for example.
The rest for the rest of the element,
we decided to use a sans serif font,
which is a more rounded font types so to say,
you can see right here, right there,
and also for the remainder of this card.
So font type, font family, is one option.
The second option is the font size.
The font size obviously is different on this card.
We'll dive into the different font
sizes used in a few seconds.
And as a third point, we have the font weight.
As you see for our H1 element,
we have a bigger font weight,
this part of the page here,
and also the other texts like this one
here has a thinner font weight.
Whereas the price and this join now button
have a thicker font weight, a bigger font weight, applied.
Let's get started with the font family.
If we check out our HTML element up here, maybe,
you see that in general, we use the font family named Crop
which is a sans serif font family.
And where did we find that font?
Well, on Google fonts.
We used Google fonts already in the course,
and you learned how to use these fonts in your own projects.
Therefore, I don't want to dive too deep into this part now,
but, let's say that you want to have a nice
looking sans serif font and that you go to Google fonts.
What you then see is that you have 1,200 font families,
and then you probably see that, well, this is too much.
What you can then do is you can go to categories and
unselect, everything besides the sans serif font family.
Okay, nice.
Now we have 484 fonts. Still a bit too much,
therefore, a nice little trick or tip that
you can use right here to quickly
find a nice looking sans serif font,
in this case, is to go to the font properties here
and there, play around with the number of styles.
As you saw in Google fonts,
for example, if I go to this Roboto font,
you see that we have 12 styles available.
And if you click onto the font,
you see that you have the files being different
in the thickness or whether it is
an Italic style or not and so on.
So here we have 12 styles available.
If we go back now and go again to the font properties,
right here, then you can change the number of styles.
And whilst there is no right or wrong number
about this option here,
what we typically do is, when choosing our fonts is,
we select this option here and then limit this from all
to maybe six plus or, here, eight plus for example,
or even 10 plus, like this.
With this, we can quickly reduce
the amount of styles available.
Now we only have 62 styles.
And we can also say that typically,
if a font family offers more styles, it's a better crafted,
a more detailed, a better looking font.
Of course, this is not true in general,
but it's a good proxy to narrow down the font families.
In our case here, we are using this crop font family.
Therefore, if you now scroll through
these options you have, then you see that,
if we look down a bit further,
then we can find the crop font style right here.
And if you then select this font,
then you can always see different styles you need.
For example, here for the project,
we used the regular 400 style and we used a style
which is a bit bolder.
So the semi bold one, and then we add this one.
And what you can then do afterwards,
is you can simply copy this entire link here.
This one over there and add it in your
HTML file here in the head.
As I said, this is nothing new to you.
You can see the Crop font by the way,
with the two different weights.
But, this is how we typically narrow down the amount of font
families to find a good looking one as quick as possible,
by the way, the same thing also applies
for the other font family we are using on our website here.
So if you go back to the past courses page
and now go to the H1 element, right here.
You see that there, we have the Zilla Slab font family.
And if we go back to Google fonts here and scroll up a bit
and now switch from the sans serif font to the serif font
family and unselect sans serif,
you see with the same filter applied,
so only 10 styles and more being displayed,
you can find the last lap immediately right there.
So this is one option to quickly find a nice looking
font family for your website.
Besides the font family, we are obviously
also using different front font sizes.
For this, I now use this inspect option here
to make it better visible.
Up here you see that for the H1 element,
We have a font size of 32 pixels.
We have a different font size,
obviously, for the text below.
Here we also use a font size of 16 pixels,
which makes, obviously, the monthly subscription
headline more obvious at first sight.
We use the same concept here for the pricing.
Here, we even use a larger font size,
which is, of course, also related to
the font family used here.
So you have to find your own sizes.
We'll dive into this also throughout this module,
but if we jump to the text below,
you see it, again, has 16 pixels.
Same thing applies to information about the courses.
Inside here, we also use a 16 pixels font size.
The button down here though, so this last one,
uses an 18 pixels font size.
But what you basically see is
we are working with different font sizes on this card,
but not with too many.
We are basically working with 42 pixels for the headline
here, for example, and this 50 pixel here for the pricing.
And then we are working in the 16 pixels range for the text
and 18 pixels for this button.
So the font size is also a great helper to
improve the look of your website,
but typically you shouldn't use too many different font
sizes because then this can also quickly look quite messy.
Nevertheless, the font size is a
great helper to emphasize specific
information on your page.
Besides the font family and the font size,
we also have the font weight, of course.
As you can see it for our price here,
we are using a 600 font weight here,
which would be a semi bold font
as we saw it on Google fonts.
Whereas the normal texts, like the card info
or also the price information here,
doesn't use this bold text.
If we go down to the button though, for example,
here into the actual button
there you can also see that we are again
using this bold or this 600 font weight.
If I would under this, you would see
it would be a bit too thin maybe.
Therefore the font weight is also a great helper
to improve the design of your website.
And again, as I said, these are just some general tips.
So don't use too many font families.
For example, choose two to get started,
and use a serif one and the sans serif one in combination,
which can provide quite good look actually.
Use different font sizes for specific areas,
but don't get too crazy.
And use the font weight to emphasize specific highlights.
So we talked about the space.
For example, with margins and petting.
We talked about fonts, but there is one other
very important core aspect when it comes to website design.
And this is, of course, the color choice.