Voiceover: Welcome back.
This is our very important lecture about typography.
According to Wikipedia, typography is the art and technique
of arranging type to make written language
readable and beautiful.
This means that typography is an essential part
of any design.
And that's because most of your website
will be text content.
And so it's quite important to make that content
good-looking and easy to read for the user
Good typography can make every design
look very professional.
So let's look at a couple of guidelines
to achieve exactly that.
I will start with some simple rules.
And after that, I will go over choosing some good fonts,
how to get them and how to choose the right font for
your website.
For the first couple of guidelines,
I will use this website to show you good and bad things.
So first, use a font size between 15 and 25 pixels
for body text.
It really depends on the typeface you choose,
how much text you got and how much you want that text
to stand out.
Here in this example, we have a font size of 22 pixels,
and it looks really good.
And this is what it looks like
without using these guidelines.
The first example has only 14 pixels font size,
and it's clearly way too small, right?
And down here in the second paragraph,
the text looks unnaturally big and exaggerated
with those 30 pixels font size.
So wipe both of these situations.
Now for headlines and titles, you can and should, of course,
use bigger font sizes to show that it's important text
that you really want the user to read.
There are no real size limits for headlines, like this one.
So here we have the headline of the website
we've been seeing before.
And it has a font size of 60 pixels,
and I think looks great actually.
This website here has an extremely big headline,
with 90 pixels font size.
And sometimes when you use such a big headline,
you will want to decrease the font weight of that text.
This ensures that the text doesn't steal too much attention
from the rest of the content.
And it makes the text look less bulky
and more modern and elegant.
And that is exactly what this website here is doing right.
Next up, use a line spacing between 120 and 150%
of the font size.
Line spacing is the vertical distance between lines
and makes text easier to read.
Back to our example, this web page here
uses a line spacing of 150% to make the text easy to read.
This is an example of good typography.
And this is what it looks like with bad typography.
With 100% line spacing, which is what happens
when you don't define any line spacing at all,
you see this big block of text, which is not easy to read
because the lines almost overlap.
This is a really bad practice.
Now at 200%, it's also not pleasant to read the text
because it's way too spaced out,
and our eyes have a difficult time
processing the text like this.
So leave line spacing between 120 and 150%,
and you will be fine.
45 to 90 characters per line is the optimal line length
that is easy to read.
45 to 90 characters is like
two to three lowercase alphabets,
just as a reference for you.
So here, for example, our first line has 78 characters.
So its easy to follow the text.
And here again, some bad examples.
In the first example, we have just 36 characters.
And it looks kind of weird.
You can, of course, do this
if you have some columns with some text.
But not in a situation like this with a lot of text.
And down here, the text line is way too long.
And our eyes find it difficult to travel
such a long distance from the end of one line
to the beginning of the next line.
And finally, the most important thing is probably
to choose good-looking fonts.
Now, there are no real rules for selecting the right font.
But since this is a very practical guide,
I will just tell you to use good fonts.
I will show you a couple of good fonts that will look good
in every design.
You can use one of those or of course,
go for some other font that you like better.
But let's first distinguish between
serif and sans-serif typeface.
On the left side, sans-serif typefaces
are more neutral, looking more clean
and more simple.
They are widely used in most modern websites or apps.
On the other side, a serif typeface is one that has
those small extensions or strokes, called serifs
at the end of the letters,
just as you can see here on the right side.
Serif typefaces are usually used
for more traditional purposes that encourage
long reading and story telling.
And this is how sans-serif text looks like
on an actual website.
You're probably used to see sans-serif text everywhere
because it's more used than serif font styles.
Also look how the heading uses bigger text,
but with a very low font weight
as I explained to you before.
This website is absolutely beautiful
and uses all the typography rules that I showed you before.
And here are a couple of very good sans-serif fonts
available on Google fonts.
Now Google fonts is a very good free resource,
where you can get web fonts.
And web fonts are fonts that you can include directly
into your projects without having to download any files.
All of these fonts you see here are broadly used.
You can't get wrong when choosing any of them.
And Lato is actually the font that I used
for this presentation in this course.
Please take a look at the Google fonts website.
You can find it in the course e-book.
And now, serif font.
Here is again the website we've been looking at before
because it's a great example of really beautiful use
of a serif font, at least in the body part.
For the headings, this website actually uses a serif font.
So you see that you can actually mix
serif and sans-serif fonts in one website
and make it look gorgeous.
Here are three beautiful serif typefaces,
also from Google fonts.
I encourage you to use these
if you have a lot of text to show,
like a blog website that should have more traditional look.
So how should you actually choose a typeface?
The most important thing is that the font you choose
depends strongly on the website you're designing.
You need to choose a font, which best helps to reflect
the look and feel you want for your website
that you're designing.
Because ultimately, the goal of choosing the right typeface
is to engage your audience.
Based on that, you can decide if you're better off
with a sans-serif or with a serif typeface.
And after you decided that, use a good font.
You can start with one after ones that I showed you before.
And if you're a complete beginner,
then please only use one typeface.
If you want to use more than one,
please take a look at the course e-book.
You will find a tool there which helps repairing fonts,
which means to choose two good fonts for a website.
The best you can do is to play around
with different typefaces and see which best helps
to achieve what you want for your website.
And that's it for typography.
This was quite a long lecture actually.
And next up, we have another very important aspect
of web design,
colors.
So join me right in the next lecture.