Original subtitles

So 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 architect

who built these kind of minimalist chairs.

So this and this.

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 San Serif typeface.

And one of the San Serif 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 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 a thousand typefaces

right now on Google Fonts,

and this number is always growing.

And here is for example, Roboto,

which is just one of the ones

that I had recommended to 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 this 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 the 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 San 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 San 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 San Serif.

We 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 that'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 I also mentioned,

so type-scale.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 Omnifood 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 the 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,

well which is now up here.

Let's go back, actually.

We can try different values.

For example, let's say a 44, 52, and 62.

Just grab these.

So fonts size,

let's start with the largest one, 62 pixels.

And that is huge, right?

That's way too big.

And so let's simply go one down.

So imagine that we didn't have this kind of limited choices,

then you could say, well, maybe we want 40,

something like this.

But well, why not 45, like this.

Or, 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 yeah, we started at 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 of the line spacing here.

Actually, we move this here.

So this is actually enough like this.

So this is easier to work with.

So let's see by default, what our line height is.

So 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.

So now you'll see line height is normal,

which still is not really descriptive.

so well anyway, let's just try some value here.

So remember that's right here at h1.

And so we should stay below one five,

remember that from the last lecture,

And for really big texts,

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

are still look a bit detached there.

And well, 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 a 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.

So this one I think is it's a 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 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.

So,

font-size: 18px.

That looks about right.

Let's go 20,

and well 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 all Alt or Option Up.

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, I put them up here.

Ah, yeah, that's because these are reusable.

So this is what I call the general styles,

which are the reusable ones.

And then down here, I have the like components styles.

So let's go to our styles here.

And usually we might have this like in some other window,

for example, so we don't have to go up and down

all the time.

But anyway, let's try...

Well, 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 well, actually, that is probably the default.

So nothing changed there.

Let's go with 30.

So that's a bit better, right?

Let's maybe try also a 36.

And nice.

I think this is the one I like, except here.

So we should somehow change this one

and 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,

because we don't want to have

a lot of different of this 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 her 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-3-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?

Ah, that breaks it into two lines.

And so, well, then we need to go back to 24.

So you see that is very easy with a system like this.

Otherwise, people would now have to like fiddle

with all different numbers that we have in this range.

For example like, well,

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 texts.

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.

Ah, 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 a normal text,

with a real and bigger a 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.

Well, 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,

yeah, 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, and 16.

So the default is 16 right now.

So let's try a 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 it more than it looks like.

For example, we didn't justify any text

and we didn't center any texts.

And we probably don't have any texts

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.