Jonas: Let's now add some nice typography to our project,
and we're gonna start with the typeface itself.
And so let's analyze this webpage actually a little bit.
So this webpage is basically
for a small chair design shop in Lisbon.
So these guys are basically designers or architects
who built these minimalist chairs,
so these and these.
And so clearly, we are going to want
to give this interface here a clean and modern look.
So what that means is that we're gonna reach
for a sensor of typeface.
And one of the sensor of typefaces that I like the most,
especially for something like designers or architects,
would be Inter.
So let's go here to Google Fonts,
which is at fonts.google.com.
And once again, the link will also be on my resources page,
which we cannot use right now, because it's not ready yet,
but once you're watching this course, it will be.
Anyway, you can see that there are over 1,000 typefaces
right now on Google Fonts,
and this number is always growing.
And here is, for example, Roboto,
which is one of the ones that I had recommended you
or Open Sans.
Lato, I think, is also one of the really popular ones,
but, as I said, let's actually use Inter in this project,
and we can then also experiment with some other ones.
So now here in Google Fonts,
you just need to click on the typeface like this.
And then here we actually can select the styles
that we need.
And styles basically means different font weights
that we want.
So remember how I said
that you shouldn't go usually below 400?
So these here are really thin and light, so don't use those.
So let's start with 400, which is regular.
And so we need to select this style.
So just click this button here.
Now, by the time you're watching this lecture,
this whole interface
might actually look completely different,
because actually Google Fonts changes
the way they look all the time.
And so if it does look different,
then you still need to look for some button
with which you can basically add these different styles.
So, usually we want a 400.
Then we also want a bold one,
which is usually a 700, and then also one in between
like five or 600, which is medium and semi-bold.
And I will just go for the, let's say, 500 here.
Okay, then once we are ready, we can click here.
So see the selected families,
which are Inter four, five, and 700.
So that's all that we want,
and we could add more typefaces here actually,
but for now, let's not do that.
Let's just go with Inter.
And then all we need to do is to copy this link here.
So I'm copying it now, and then in our HTML in the head,
we can link that,
and we need to do it before our own CSS file.
Okay, then save it.
And so now we get two new link elements here
coming from Google Fonts.
And the one that actually matters to us is this one,
so this second one
where basically a new style sheet is loaded in,
but from Google Fonts.
So remember that we link our own style sheet
also using the link element and then href
to our own CSS file.
And so this one here is similar.
So it's still a style sheet, and we still have an href
with the difference that this is a URL,
which comes from another server.
And in this case, that other server is Google,
so fonts.googleapis.com.
And now what we can do here is to set the font family
on the body to Inter.
So use quotes for that, which are actually not necessary,
but I think it's a good practice to always use these quotes.
So what this comma here means
is that the priority font family will be Inter,
but if for some reason that's not available,
then use this second option here,
which is simply the default Sans-Serif.
So for example, if there's no internet connection,
then you will not be able to load Inter from Google Fonts,
and then simply Sans-Serif will be used.
And here we could actually keep adding more
and more options, but for now, we just have these two.
Now then as you already know,
all the elements will inherit the font family here
from the body, which is the parent element.
And so if we now take a look here,
then you see that it already changed.
And if you ask me, this actually looks a lot nicer
than what we had before, so that default Sans-Serif.
Can inspect this actually and turn it on and off
just to see the result.
So here, well then, by default,
we actually get the Serif typeface,
but we can just delete this here,
and then watch what happens.
So there's not a lot of difference there,
but these small differences make all the difference
between a well-designed
and a, well, let's say, medium designed interface.
So let's, of course, put that back.
And now let's talk a little bit about font sizes actually.
So one of the things that I mentioned in the last lecture
is that when it comes to choosing font sizes,
it's good to have a system,
because with that, we do not have to always think
about what size we want to give to a certain element.
That would be a lot of work,
and it would also lead to inconsistent results.
So I have this system here,
and whenever I need to choose a font size,
I can only choose one of these different options.
Now, this type scale, as it's called,
comes from this tool that it also mentioned,
so typescale.com,
and I actually didn't use one exact like this.
So I built my own, which is the one that we will use
in the omni foot project,
and that's why we are also using it here,
but you could also create your own.
For example, you can choose one of these,
let's say this one, and then, well,
you just need to copy these values here.
And if you need more, you can just keep clicking here.
And to lower the value here,
the more different sizes you will get.
So the more similar, actually they will all be.
If we do that again now, then you see
that each one is a lot bigger than the one before.
But anyway, going back to our page now,
we need to start by giving this heading a larger font size.
So that is the H1,
so right here.
And so looking at our system,
which is now up here, let's go back actually,
we can try different values,
for example, let's say 44, 52, and 62.
Just grab these.
So, font size, let's say start
with the largest one, 62 pixels.
And that is huge. (laughs)
That's way too big.
And so let's simply go one down.
So imagine that we didn't have
these kind of limited choices.
Then you could say, well, maybe we want 40,
something like this, but why not 45 like this?
Well, since we're at it, why not 50?
So you wouldn't really know what to choose.
And with this, again, you have your options very limited.
And so, we saw that 62 doesn't work.
Let's try 52.
It's also way too big I guess.
So let's go with 44.
So that looks nice.
So I'm gonna keep that one here,
but I also want to decrease a lot the line spacing here.
Actually remove this here.
So this is actually enough like this.
Okay, so this is easier to work with.
So let's see by default what our line height is.
It should be somewhere in here.
And if it's not, then let me show you a trick
that I didn't show you before,
because this first tab here where it says Styles
is simply the styles that are applied somewhere
here in our code or maybe by default.
But if you go to Computed,
then you can see that even better.
So you can now write here the line height.
Well, that's nowhere to be found,
which is strange.
Let's click here on Show all.
Yeah, so now you see line height is normal,
which still is not really descriptive.
Well, anyway, let's just try some value here,
so, remember that right here at H1.
And so we should stay below 1.5.
Remember that from the last lecture?
And for really big text, we should actually go really small.
So we could like go to 1.2, for example, 1.2.
Well, that actually doesn't look a lot different.
So let's try 1.1, because I think the lines
still look a bit detached there.
And I think that looks better,
but many times what I actually do is to adjust these values
right here in the inspector.
So I can use the arrow keys, for example,
which adds or subtracts one,
which in this case is way too much,
or I can also use Alt or Option + up and down,
which will only add or subtract 0.1.
So with this, we can easier make it look
exactly what we want it to.
So one, for example, would be too little I think.
1.2 looks a bit detached, at least in my opinion,
but, of course, this is a bit subjective.
And then 1.1 looks just right.
And so let's keep it at that.
And now also another thing that we can do
is to add letter spacing, remember,
which basically is to make big texts like this here
look a bit more natural.
So there's some spacing between these individual characters.
So let's maybe remove one pixel.
And so one pixel, as you can see,
makes a lot of a difference.
So if we turn this on and off, then, yeah, it changes a lot,
and I think that this one looks a lot better really.
Okay, so this one I think is nice like this,
so we don't need to change it anymore.
So let's go to the next one, which is this here.
And the first thing I'm going to do
is to maybe make it a little bit bigger.
So remember how the default is 16 pixels?
And right now we don't have any font size on it
as you see here.
So this is here the header text.
And so let's go again here to our system.
And so right now it's 16, remember.
And so if we want to make it bigger, we can try 18 or 20.
Font size, 18 pixel.
That looks about right.
Let's go 20, and that's maybe too big.
So let's stay at 18 and then also the line height.
Now this one here is a lot smaller,
so we can go like 1.5 or even bigger.
All right, so that looks nice already.
But again, let's experiment a little bit here.
And I'm hitting now Alt or Option + Up.
Okay, so this or this, they are both nice.
So let me just stay with 1.6 right here.
Now about this button here
or actually this link here,
I don't know yet how it will look like in the end.
And so, therefore, I'm not going to mess
with the size of this one just yet.
And so let's go to this here, which is our H2.
So that's actually this one
and this one and this one right here.
So let's make those bigger.
And for some reason, they put them up here.
Yeah, that's because these are reusable.
So this is what I call the general styles,
which are the reusable ones.
And then down there, I have the component styles.
So let's go to our styles here.
And usually we might have this
in some other window, for example,
so we don't have to go up and down all the time.
But anyway, let's try, the 44 not.
Let's try these three here maybe.
So I just copied those and gonna paste them here,
but you don't have to do that, of course.
So font size, and the first one I'm gonna try is 24.
And actually that is probably the default.
So nothing changed there.
Let's go with 30.
So that's a bit better.
Let's maybe try also 36.
And nice.
I think this is the one I like except here.
Okay, so we should somehow change this one.
Well, we will get there.
We will do this a little bit later.
For now, let's keep it at this size.
And since this text is now so big, we can now,
again, decrease the letter spacing just a little bit.
Let's say one pixel, actually minus one pixel.
And that is actually a bit too much.
That now looks cramped unlike this one.
So if you look closely,
this one now looks like very cramped.
That's not so nice.
And here we can even go with half pixels, so minus 0.5.
So that's actually better.
So let's go here to our features titles,
which are these ones.
And let's experiment with a font size
of 20 pixels right here.
And that looks about right.
There's also 18 right below it,
but that doesn't give enough contrast
between these two headings.
So establishing these font sizes is also a little bit
about establishing hierarchy
between the different headings
and in general between all the different pieces of text
on the site.
So this text here, of course,
is more important than this one.
And so it should be bigger, but not all too big.
So anyway, let's now go to the next one.
So let's maybe make this one 18.
And then, of course, we need to increase its line height.
So I used 1.6 up there.
And so that should be nice here as well.
Let's just try 1.7, and maybe that's even better.
So why not?
We're just giving it a lot of breathing space,
and that's not a bad thing.
Now just to keep things consistent,
let's then also give the other one 1.7,
'cause we don't want to have a lot of different
of these values in our page.
So if we use 1.7 in one,
then let's go with that all the way.
Next up, let's now actually change the size of this one.
So I already have that selected here actually.
So all of this element here is the testimonial box
as we can as always easily see with our inspector.
So here we have grid three cols
or maybe the testimonial box is...
Yeah, it's just this part.
So this is the testimonial box.
And so the H2 in there,
let's now make it a little bit smaller,
and let's just see what options we have for doing that.
So I'm gonna experiment with these three,
which, again, you do not need to copy, of course.
This is just so you can see what is happening here,
so 20 pixels, for example,
but now that looks a little bit too small.
So 24 maybe.
That is better.
What about 30?
That breaks it into two lines.
Then we need to go back to 24.
So you see that is very easy with a system like this.
Otherwise, we would now have to fiddle
with all different numbers that we have in this range.
For example, what about 29
or 28 or 27 or 26?
You would have all these options,
and that just takes too much time.
And that's why I like a system so much.
Next up, we have some more, let's say, normal looking text,
which is here, the testimonial text.
So that is this here.
And so to keep things consistent with the rest of the page,
so this is also some, let's say, normal text here
and this as well.
And so let's use the same sizes
and the same line height here.
Just grab that.
Here we go.
So of course, this is a very simple page
so we can do things like that.
So considering all this text here like normal text,
which in a real and bigger page
would, of course, not work like that.
But anyway, here we are just practicing a little bit.
And so, finally we have here these H3 elements.
So let's give them some font size as well.
Let's say 20 pixels.
And this actually looked like the default here.
Anyway, next up here we have these chair details,
which are these four different texts here.
And these for now look just fine.
Well, actually these are the texts here,
so the list items in there.
But anyway, they look just fine for now,
except maybe here for the price.
So the price is a very important element here,
and it's already bold.
And so let's also make it bigger,
maybe the size here of the heading.
So that's 20 pixels, again, right here.
So the chair price is probably actually all of this here.
So since it is a flex container, I guess that...
So all of this is the chair price.
And so if we increase the font size on that
then these two child elements will inherit that.
So let's do that 20 pixels.
And so that looks just nice.
And we will actually a bit later format this link here.
And so it will then be probably back
to being a little bit smaller.
So just like this one here,
which we're also gonna size a bit later
when we actually design these links or these buttons.
And finally, we have here the footer text,
and this one is now actually too big.
So this text is not so important.
And so let's make it smaller.
So for small text, what options do we have?
We have 12, 16.
Oh, actually that's the spacing system,
which we're gonna talk about later.
So we have 12, 14, 16.
So the default is 16 right now.
So let's try 12 and 14.
14, that looks good.
That looks too small.
So let's go back.
And with that, we actually finished.
So again, this is quite a small example.
So, of course, we couldn't apply all the guidelines,
but actually we did apply more than it looks like.
For example, we didn't justify any text,
and we didn't center any text,
and we probably don't have any text
that is longer than 75 lines, except maybe for this one,
but, again, this text is not important,
and so that is a good exception.
So we're not gonna count here, of course,
manually how many characters there are,
but it sure looks like less than 75.
So, I think with this,
we created a good reading experience for our users.
And so let's now wrap up this video
and talk about colors in the next one.