Instructor: Welcome back.
And let's start with, probably the most important
design ingredient of all, which is typography.
And this is gonna be the lecture with the most rules of all.
And so, let's get started right away.
And we will start this lecture
with two concepts that you need to know
before learning about typography rules.
And the first one is what typography actually is.
So according to Wikipedia,
"Typography is the art and technique of arranging type
to make written language legible, readable
and also appealing when applied."
Or in other words, typography is all about
making text beautiful and easy to read.
Next, we need to talk about Serif and Sans-serif typefaces.
And I already used these terms a little bit before,
so Serif and Sans-serif.
But now, it's time to finally learn what they actually mean.
So a Serif typeface looks like this.
So it has these small details,
like these tails at the end of the lines,
which we call Serifs.
And so, that's why this typeface is called a Serif typeface.
And Serif typefaces are the more traditional typefaces,
and therefore we can use them to create more traditional
or classic looking interfaces.
They also make the design convey trustworthiness
for the user.
And finally, it's also good for long text,
for example in an article or an online magazine.
Now on the other hand of course,
we have Sans-serif typefaces.
So typefaces which do not have these decorative lines,
so the serifs that these Serif typefaces have.
And Sans-serif typefaces usually look very clean and simple.
And therefore, by using them,
we can give any interface a very modern look and feel,
just like on this example here.
So an extremely easy example,
but if you just compare the two texts in these two images,
you will notice that the text in the first image
gives the interface a completely different look and feel,
like a completely different feeling
and a different vibe in a way.
And so that's the power of a Serif
and a Sans-serif typeface here in action.
Now, in my experience, it's a lot easier
to choose a Sans-serif typeface that fits the vibe
and the personality of a design
than to choose a Serif typeface.
So in other words, for beginners,
it's way easier to work with Sans-serif typefaces.
So just keep that in mind
once you start building your own designs.
And now, let's actually start with the rules.
And the first one is to only use good and popular typefaces
and play it safe.
And with playing it safe,
I mean to not choose any crazy or weird looking typefaces.
That's usually never a good idea.
So let me give you a couple of examples
of Sans-serif typefaces.
So one very nice one that I like a lot right now
is called Inter, which looks like this.
And by the way, this typeface and all the other ones
that I'm gonna show you in this video are available
on Google fonts and Font Squirrel.
So these two websites, and specially Google Fonts
is part of our, let's say design toolbox.
So the toolbox is, as the name says,
a lot of different tools that we need to use
when we want to design for the web.
And as we go through this section,
we will start filling up our toolbox, all right?
And again, all these different tools,
so these different websites and web applications
are linked on my resources page.
So you can very easily find all the tools
that I mentioned throughout this section,
right there on my website, on my resources page.
But anyway, let's now take a look at some more.
So this one is Open Sans,
then we have Roboto, Montserrat, Work Sense and Lato.
So these are six very good Sans-serif typefaces,
which you can use without any problem.
Now at first sight to the untrained eye,
these six typefaces might actually look almost the same.
But believe me, they are really not the same.
So if you would apply these six different typefaces
to your page one by one, you would create like
six completely different looking websites.
But anyway, if you're looking for Serif typeface,
then let me show you six examples of free Serif typefaces.
Oh, and I forgot to mention
that these six Sans-serif typefaces
are actually also all for free, of course,
such as basically all the other tools
that I listed on my resources page.
But now about these Serif typefaces, here they are.
So Merriweather, Aleo, Playfair Display,
Cormorant, Cardo and Lora.
And again, they probably all look very much the same,
but well, they are not the same at all.
These are even more different between each other
than the Sans-serif ones that I showed you.
Now, many beginner designers think
that they need to mix multiple typefaces
in order to create a nice looking design,
but that's actually not true.
So when you're just starting out,
it's completely okay to use only one typeface on one page.
And if you're really feeling adventurous,
then still limit your typefaces to two.
If you use more than that,
then your design will start looking like
amateurish and strange.
But now, about actually choosing
the right typeface for your design,
again you will need to think about your website personality.
So choose the right personality for your website,
and again, more about this later.
So don't stress about the personality for now,
but this is still important
for this instruction that I'm gonna give you.
So you choose the personality,
then you decide between a Serif and a Sans-serif typeface
and then you can experiment
with all the good typefaces that I just showed you.
And of course you don't need to limit yourself to these six.
You can of course also experiment with many other typefaces
that are available on Google Fonts.
So based on this experimentation,
you can see which of the typefaces is best
to convey the message of your website.
And of course for a beginner,
that's not really so simple.
But trust me that with experience,
this will come naturally to you.
Finally, now of course,
you can also keep trying different typefaces
as you design and build a page.
So you don't need to really decide for one
in the very beginning.
You can just start by using one.
And then, as you are in the middle of your design process,
you can just choose another one.
And many times, this is actually what I do,
because when I have more content on the page,
it then becomes more obvious and it becomes easier to see
which of the typefaces best fits the website's message.
Okay, so these are the basic rules
on how to choose good typefaces.
But now we also need to choose good font sizes and weights.
So let's see how.
So when you're looking to choose a font size,
you should limit your choices to make your life easier.
To do that, you can use a type scale tool
or another predefined range of font sizes,
because if you do that,
then you don't have to constantly think
about coming up with font size values.
And actually, we will do that in the big course project
and even in the project that is in this section.
Now, with that being said,
let's now talk about some guidelines
for actual font size values in different parts of websites.
So for normal text,
you should use a font size between 16 and 32 pixels.
So in this example of this page,
for example, the navigation has 16 pixels,
and then this smaller text down here is an 18 pixels.
All right?
And by the way, this is going to be a long list
of guidelines like this.
And so you should totally print out these slides
to make it easier for you to follow them later
when you design on your own.
But anyway, for a long text format,
you can try a font size of 20 pixels or even bigger
because if the user needs to read
something like a blog post,
it's gonna be far easier if the text is a little bit bigger.
So for example, this text down here in the example,
which describes this section, has a 20 pixels text.
Also, this text up here,
which kind of describes the company, has 24 pixels
and this text below has 32,
which we can kind of count actually as normal text.
So again, it is in the range of rule five,
so between 16 and 32 pixels.
And of course this is just one small example
amongst thousands and thousands of web designs,
but I just want you to get a sense
for the kind of values that we can use in designs.
But anyway, for big headlines,
you can actually go really big with your font sizes,
like even more than 50 pixels.
And you can also make them really bold, like more than 600.
And we didn't learn about these bold values yet,
but we will, maybe in the next lecture
or maybe in our big course project.
So the headline of this design has a font size of 85 pixels
and it is also really bold with a boldness of 700.
Also this other, a bit smaller headline down here
has 64 pixels of size and still really bold at 700.
Now, and then we also have 42 pixels here
in this testimonial text.
Now, the final rule about using good font sizes and weights,
is to use a font weight that is not under 400.
So if you go below 400, that would be a light
or really light text, and that is then hard to read.
So just don't go below 400,
which is basically a regular font weight.
Now next up, let's learn a couple of guidelines and rules
to create a good reading experience for your users,
which remember is one of the aspects of typography.
Remember?
So, to start, you should try to use
less than 75 characters per line, like in this example here.
So these lines here have something
between 65 and 72 characters,
which makes this text really easy to read.
However, if you break this rule,
you might end up creating something like this,
which is really hard to read for your eyes.
So here the lines have between 95 and 112 characters.
And if you actually try to read this,
you will find it a bit difficult to follow such a long line.
Next, for a text with normal size,
try to use a line height between 1.5 and two.
Now if the text is really big, like a headline,
you can go below 1.5 and actually you can go really low,
something like 1.1 or 1.2.
So a good rule of thumb that you keep in mind is that
the smaller or the longer the text is,
the larger the line height needs to be.
So here we have some good readable examples
with the big headline, having only 1.2.
Then as the text gets smaller, we have 1.31,
and then the long text has 1.5.
Now, if you use an oversized line height like this,
then your text again becomes hard to read.
So we're creating a bad reading experience for your users
because these lines look kind of detached.
And so, then our eyes have difficulty
going from one line to the next one as we read the text.
Now, another nice and very subtle rule
that can make a lot of difference is that
if your headline kind of looks unnatural,
you can try to decrease the letter spacing.
Now, what unnatural actually means
will of course come from experience,
but I'm gonna show you a couple of examples right now,
and also through the rest of the course.
So in this headline for example,
we have a letter spacing of minus 3.5 pixels.
And if you ask me, this looks quite nice and quite natural.
While on the other hand, if it was just zero pixels,
so basically, without us defining any letter spacing,
then the letters would look
kind of detached from one another.
Next, another thing that you can try
and which is actually very popular among designers,
is to use all caps for short titles.
Now if you do this, then you should also make
this title quite small and also bold
and increase the letter spacing
just like this interface here does.
So basically, we have one main heading here,
and then, we have kind of a subtitle
which describes that heading,
and that is the one that uses caps and bold
and big letter spacing.
And without doing all that, it would simply look like this,
which if you ask me, is a little bit more boring, okay?
And we're almost reaching the end here,
so, just hang in there.
So usually on the web, we do never justify text.
So it's somehow just a convention
that basically no website ever justifies their text.
And so you should also follow that convention.
So not centering text looks like this,
which is exactly what were used
when we read some blog post, for example, on the web.
While on the other hand, I bet you're not used to see
text like this on the web, right?
And so therefore, if you were to design a page like this,
that would then look quite unnatural.
Now also about aligning text,
you should usually not center text,
unless we are talking about really small text blocks.
So you can just leave text like this,
aligned to the left and not like this in the center,
because once again, this actually makes it a lot harder
to read the text when you need to jump from one line
to the next one.
Okay, so that's it about guidelines and rules
for typography.
Now, of course, there are many rules here
and we cannot always follow all of them in all designs.
And so that's why they are more like guidelines
and not really strict and hard rules.
Okay?
Now, something that I didn't mention here
is that we also need to be careful
about the color of our text,
but actually we will leave that for the next lecture
when we talk all about colors.
But now, let's actually go ahead and implement
some of these guidelines in practice
in the project of this section.
So I hope to see you there soon.