All language subtitles for 069 Web Design Rules #1_ Typography.en_US

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 typographic 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 texts 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 a text 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 a long text.

For example, 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 or 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 or 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 Sans 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 a 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, 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're 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 lights

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 the 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 bullets 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 it's 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 weight is to use a font weight that

is not under 400.

So if you go below 400 that would be 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 2.

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 a natural 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 0 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 a 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 we're used when we read

some blog posts 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 texts 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.