All language subtitles for 2-04 titles body

Titles and body copy are easily the core component of most websites

Most applications now it is mixed in with other components and call out and little

Interactive pieces but overall the principles that you derive from titles and body copy are going to be pretty funny

The mental to the way that you treat text throughout your interface designs

Main principles that I like to keep in mind when I'm dealing with titles and body copy

Okay so first of all we're going to check out size size for both titles and for body coffee

Now the most common title sizes for websites are going to be a little bit larger

Then your application and that's kind of what this line indicates

That a lot of these titles will be more commonly found on desktop apps mobile apps

And kind of more specifically mobile out because desktop tends to be quite a bit smaller

But for websites you know like a large article based

Longfoot longer-form with bigger headings like h10 big call-outs

You know this could easily be like

On the apple.com website as airpods Pro

Or things like that

So these are going to be a lot more suited for those big kind of like marketing headlines

And the only time you'll see bigger titles like this is in some of the apps like you'll see

The 34 points izon like the Apple messages app or it's kind of their bigger headings and as you scroll

Those end up becoming like a 17-point title in the header

So this is kind of a general rule of thumb for the title sizes it's definitely not a law

But it's just a good starting place

When you're trying to make Kim come and get those first pixels on the canvas this is a good sizing

Reference to look at

Alright second we're going to look at weight

Now on all of these titles I have the weight set at extra bold

And

You know you're not always going to use extra bold I just happened to I really like extra bold wait so I'm kind of a fan of that

But you're you're going to typically be in the Bold category here and every now and then you might

Might have like a medium

Title depending on the look and feel of your type and how everything kind of works together

But in general

Old is a really good place to start

And as you get

Heavier with your titles

You have the ability to go lighter

So we did Regular

Or even kind of like this extra lights

You can definitely go extra light with a bow tie or with a excuse me with a large title

But as you get smaller these lighter type

Sizes are not going to work

So you can see if I'm using light

I guess I used

Let's just change all of these Delights you can kind of see the difference here

Actualite

Xtralight viewing us it 100%

Okay so like this is a Titleist edit 96.5 that looks pretty nice and even at

80 point it looks still

60 is like borderline

Could still work

But

40 you know you're pushing the boundary of whether or not like could work here

And definitely a 34-point down a 13 I would just strictly avoid lightweight salt

If you're going to be in the 60 or higher range you can experiment with type sizes that are a bit

Lighter

But

I would definitely

Kind of

Completely avoid that at these smaller sizes

And you're going to want to say and the medium semi bald bald range up in here

And sometimes regular as we get into more components that have titles will look at more

Variance within that category with this Just A good rule of thumb to get started with your titles

Line-height for titles and will Circle back through all of this for body copy as well

Isoline height

Is is going to

Not really

Effect might when you're just looking at a single title

But as you get into

Longer titles

Jamaica

Longer title that spans

Two lines here

And I just have this the Align bottom on the tags. That allows it to

Can I go off as I'm typing

LOLOL Trek there

So basically you can see I've got my line high-sided 100-percent here

In a good way to kind of check against your line height is going to be typing like a descender

Which is like the lowercase G followed by like in a sender which is like the uppercase a

So let's see you go longer title

And this is going to be a good reference so like you can see between the capital a

And the top of the L or the khra Sanders

There's plenty of space right in there

But as you get to

But as you get to the lowercase G in the area is getting a lot tighter

So you have to be careful

If you have the lowercase to senders hanging out in your titles

This might not work so we might want to bump it up to

110 120

And this also depends on what casing that you're going to use

With your titles are you going to use

Title case

Or are you going to use sentence case where only

The

Only the first letter is capitalized

So in this case

We might want to tighten them back up to 100

But definitely a big mistake that I see is

Where was your body copy might be more closer to 150 or 175

But you definitely don't want to go that high

Your titles

Unless it's like a stand-alone element and you have like a really good reason to do it but

If you use 1150 on your body copy

And 150 on your text it's going to look on your title is going to look very very strange

So everybody copy for titles I like to stay in the

Kind of 100 ballpark when you could bump it up to 124 certain cases

But if you go with and all caps leather case

You have more flexibility because the letters are a little block year

So now we could get into bumping this out 97-80

Basically as low as we could get it before they start clashing with each other and sometimes you might want him to class depending on if that's the

It looks a little bit

Too tight with those letter forms clashing

So I could get away with 75%

Capitalize here

No it looks pretty nice alright so with

With an alignment or going to the last two things we talked about here with our titles

Chicken City right now my wits here is the exact same

As the body copy below

But you can see that this looks kind of weird

If this is my title so I don't like having this long text here you know if

If this text was above the first

If it was more like that then it might not be as weird but

Overall this size and

This line spacing like it's just a lot of kind of

See if I can get my

Pencil torgoen here

Hell yeah

See see this negative space kind of creating a weird

Staying here

So I either need to adjust

The size or the width of the title

To make that kind of look better

Or even change the copy

A little bit larger

That's a lot nicer

And ideally you know maybe it's something like that

Or you know if I like I really like the way this double line Looks

I could bring it back in here and then just reduce the size until it's

Only like that

She can kind of play with how this is going to work

Play with the where the little bit

It's totally okay if you're if you're especially on a website if your title is extending past the body

The tack store even kind of coming in a little bit as a stylistic thing

The one thing you just would never want to do is have this

You know a huge

Even if you aligned all this like

That just kind of looks weird

They're kind of keep it reasonable in terms of if you're overhanging us or not

And if you're if you're going to change it

And the last thing here you can see me I'm playing with the alignment most of the time you're going to want to align your text

Especially if it's longer form copy you're just going to want to left align it

It's going to be a little bit

Odd if you end up using

Center alignment on your titles

Let's look up a little bit larger so you can see more of a dramatic difference

And let's also change this back

2

And then we'll kind of bump up our

Get back into the 100

100 range will work

Arthur this is centered on the artboard

And now I'm going to send her this on the artboard

So you can see this is

It's not the worst thing in the world but it just looks odd to have a centered title and then a left align Tech

Text down below it

Now one way that we could make this work technically

Is if this was like a smaller block of copy and then we had maybe like two lines

And it was more of a a stylistic

You know left to right kind of magazine-style but even then it's just not it just kind of feels odd to have

Have the Centerline and then this left-aligned

And actually this is too much copied

B center-aligned technically

Mean you could get away with inner lining

This amount of coffee but usually you would only want to send her a line

You know a smaller amount

Body copy

Something like that could work and then you have this nice

You kind of have this coming in

This coming in and you have the same kind of

Downward momentum created by both

Title and the body

But if we bring that back

To last line

You say that if I go commando up Chanel here

And this is all left-aligned

Then I just have kind of a nicer cleaner line because we

It's always nice to get these like

Strong vertical lines especially for websites

It just feels more balanced and the things can line up a little bit better

To getting a strong particles

And a lot of times if you're doing something maybe a little bit more stylistic

And say you're a little bit smaller

Smaller Title Here

A lot of times you can

You can get away with having some extra negative space over here and effort to be a little bit more stylistic

And you can a lot of times you can also balance

You can balance the entire thing by having like a border on the bottom of the title

And then maybe you have like a date

Or I don't know whatever

Do you like a date over here

I'm making kind of like a right-aligned Anna left-aligned

On top of that so it kind of has like a nicer a balance to it

So now I've got like a strong

A stronger vertical edge here and I didn't quite line that up

14 hour ago

You always want to line up your Baseline here

Necessarily rely on kind of lined up like that you would always want your

Titles to be aligned to the Baseline that goes for most

Most copy including titles especially your

Your Baseline is going to be the best

Different ways to play around with these titles

Depends on the context

It makes sense for a news article or a marketing blob

Going to have just some fun variation with your titles

The one the one case where it would make sense to have a centered title

With maybe left-aligned text is going to be in the contacts to fix title bar

That you would see in an application

Like this so you'd have you know your

Your iPhone title bar up here

Something like that

And then you know as you scroll the stuff going to go down below it

You know that's not going to be as

Bothersome

As having like you know a huge

Center title like this on a website

In the mobile form in the mobile format that's going to make a lot more sense than doing something with those on the web

Alright so let's get into these five things for body copy

In general body copy is going to be set at 16 pixels as kind of like a bass

Define minimum

And this is definitely for the web the web's default paragraph tag is going to render at 16 pixels chickens

16 pixels here

And depending on the type face you might want to go up to

18 pixels

It's kind of your call

16

You could you could get away with 13 if it was going to be like a secondary

Kind of

You know smaller like text backs or a smaller kind of area that didn't have a lot of copy

Usually the kind of rule of thumb is the the lower the amount of copy the the greater Flex

Stability you have with experimenting with

Line-height all of those

All of those components this the smaller amount of tax you have greater flexibility to play around with those

Kind of variables but the greater the amount of texts

The more you want to stick to kind of the tried-and-true sizes because it's just all about readability so if you can

If we go back to 16 here that's going to be set up against a 24-point tide

Idle here alright so that's kind of a general sizing rule for body copy now it was

Talk about the wait here

Chicken City on this one I'm using just a regular weight

You know

Like I said if you if you have smaller amount of texts

For example if I get rid of all that

You can get away

We're going Boulder semi bald and it's more about like a call out

What about call outs but

You know and unless you have a very specific reason to do make your body copy bold do you typically going to

I want to avoid it unless it's being treated as more of a stylistic elements

A body copy here so we're going to keep it at regular

And the wait

The weights is going to largely depend on how you use it with a title as well as you can see

On this title I've got this bold

Whereas this is regular and these are going to be like to

Two or three steps apart from each other so I've got regular medium to this is one step down to three

So if I was if I wanted like a true bold to stand out from the rest

You typically want to going to want to be at least two to three steps darker to have an actual bulb

So you can see if I if I go

Muncie

If I go see 123

So if I went semi bald with my body copy and I needed a good bold

Then I could go black

And it would be enough contrast

Between here and here that would actually look like a bowl

And again

The boulder body copy is going to be more for a stylistic

Renditions depending on the direction of the thing that you're designing for

And as always if you're going to have more of a traditional

Actual body copy that's intended for people to actually read then you're going to want to stick to some of the record

Amended sizes for for all that

All right so next up for body copy

Line height and width

Line-height for body copy

Your standard kind of go to line height is going to be like a hundred fifty percent

For your body copy set at 16 pixels

You know depending on the typeface you can go a little bit tighter

Like 135 you can even go 125 it just depends on

The amount of texts

And the kind of feel that you wanted to give you can go as low as 120

For body copy

Or you can even go as high as Ike

You know 220

But ends up looking like a college essay that you wrote on you no skipping line for

Just so you can fill out more room but it's not a it's not necessarily a bad lawyers just depending on

You know that sweet spot for the legibility the readability for the particular thing that you were designing for

The good Baseline is going to be like 1150

150 % or 1.5

And then depending on the typeface you know so this is this is a Sans serif typeface

Set at 1:50

But you can see on on this example

I've got this at 160

Actually

Doesn't look too much

Larder

Then this one

The resume now and look at these two blocks attacks together

Like this little bit larger

So this is 16 point

With 150

As line-height

And because this change this to Georgia

And bumped it up to 18.216%

Just because this particular tie face felt too tight

So if I went back to 16

And 150 here

What's 1 50%

Cuz they're going to go

Oh yeah

Both this font enter and this font Georgia are set at

16 points

And they're both sat at a line height of a hundred fifty percent

But look how much

Tighter

Me just get this is exact same block of text

And this one the letter forms are wider

And they're also a little bit taller which is going to extend that body copy

Down and even in the same

Actually this is that at 471 less at this at

520

And

All right now they're both the same with so it's a little bit more of a realistic

Difference but again you can still say that it's breaking down almost two full lines

Below the other one

So it just really depends on the type face that you're using

I asked how are the size and the line height that you really want to use so

For this particular Center of its kind of small

And

I think it just reads a little bit better

When there's a little bit more breathing room in here

And it again this is kind of designed and Abstract so it depends on her going to have a huge

Things to read or is it kind of a tight

I-type quick

Moment of of information that would allow for a tighter line spacing that's something that you'll have to decide

I'd when you get into that specific context

Okay so last let's look at with an alignment together

This is going to be huge so

In general there is a

Timeless graphic design principle that says body copy should not be less than 40

Five characters wide and it should not be more than 75 characters wide which means

75 characters is going to be your optimal body with

So I have

Made this a little bit easier for us and I've made

The 44th character red and the 76th character

Somewhere between here is

Is our sweet spot for the line break

And the reason for that is

If your extended past 75

It's going to be quite cumbersome to read this entire thing

And then come back over here and read it all the way over here and then come back

That's why there's a cap on 75

And it's definitely

You know a principal and a recommendation it's not

No one's going to come and arrest you if you go over 75 and you go to 80

That's not going to be that big of a deal

It's just when you start going too much further past that it's going to get

It's just it looks very unprofessional to go mud pasta

I got an example here where I want to show you

This body copyright a little bit too long I was browsing through the web and I found this website

And I thought to myself I bet you this is longer

Then

75

And also the line-height

On this call out a little bit

And it's kind of a little bit too large in my opinion

So if we get

Into our inspector here

I'm going to grab this paragraph

And actually luscious double-check

See how wide this is will grab the second line

I'm going to open up I a rider you can you can use any like Sublime Text anything that will give you the

Word count

Hotel near the bottom says 102 characters

So let's The Lacs

What's copy from our team to so we can get a better

Gage on what

45272 markwood B

All right so if we break it in the middle of developers that would be 75

75 characters

So what I'm going to do is put a little Max with on here

And then just make it go up so we want to break it right here and inside of developer if that would be the 75 mark

Kaiser going to leave it right in there

And since there's not a ton of tags there's only three paragraphs

They have this set at 170

Which could work but I'm going to make I'm just going to tighten it up a tiny bit

2150 here

And then now

If we look at this

This is technically a paragraph

So we could make it

A bit longer

Right now it's breaking at

A

Which is going to be 41 characters which is below the minimum

So if we put it at

After all that least that would give us a Billy's 50

And we can still even break it out after passionate cuz I will be 62

Alright so let's add IMAX with to this call out

Maxwell

So what are we say a group of passionate so we could go all the way out

Well I guess it's not going to break RuPaul that's fine

But also they have the same body copy line height was set on this call out

And it's you can tell this is more of a title and that's just a little too larded it has too much Breathing Room in there

So we set the paragraph to 2150

And set that the 150 that's better but I think we can tighten up till like 1:30 maybe even like 135

And

Even though this is that I like

I think that's

Close to 75 characters that still

This particular context

It just feels a little bit long to Mia's

Even after we made those changes

It's going to be 83 characters

I think the

Having that inspector open change the width of that paragraph a b

So let's tighten up the max with a little bit more

Cayenne starting to feel better

And you can see that there's also these different sizes we talked about font size

And

And another lesson

But I don't think that this exercise is doing any extra favors

So forget what I just want to take this out for now

And see how that works

Not even

I like this hanging over but I think it could be

Accentuate a little bit more if we tighten up those smaller paragraphs

Even a little bit more

260 REM

The ram is based on 16 pixels usually so if you did 16

* 61 / 965

That just depends on what your RAM is that on

Okay

Now this is looking better

But now I'm looking at the negative space here versus the negative space in here

Doesn't have to be the same

But

It's worth looking at

So we're going to a little more bottom margin here

Assisi

That's a little bit better

Alright to me this is looking a lot better

I'm going to come and return and load this page again into another tab

Scroll down

Hi so you can see a big difference here

There's not a lot of negative space and there's not a lot of you know all of this is set to 170 line-height which may

Makes this little call out title

Be a lot higher

And the 170 on desk 70% of the actual font size not 100 70%

Of the bay size

There are ways to do that with code and what not but we're just talking about just the overall look and feel

W cycle back and forth

Between these two

This is just a much cleaner

More easily read

Web page

Then this is right now this is kind of a blah of text it doesn't look horrible

But it just looks like it could be tightened up and and that's really what you're doing with type design with your body

You have to make those small tweaks get it really tight

And

You know whether it's a title or a body copy or cause any tax at your using you're going to have to make these incremental changes

Like your line hide your your weight and you're going to have to play every element off of each other

To make it really nice and and professional

You're going to have to get into all these little details size weight line height with an alignment those are there going to be

The five most important things that you can look at when you're trying to lay out your

Type size if you can take the title

And take the body copy as like a good strong foundation for those five different components for how your design

And extend that into the rest of your design that's going to give you a huge

Just kind of a clean Foundation to use for your typographic usage throughout your entire project

Silver homework I want you to lay out three different layouts that

Layout three different layouts I want you to lay out three different our boards and your design program

Title a body

Copy a secondary title in a little bit more body copy

And I want you to experiment with

Three different versions so one versions going to have you know as a certain type size for the title

Certain type for the body

And then your second one you know if you use a small one in the first one to go really big on the second one and play with 15

Point bodies body copy and up to maybe eighteen or Twenty-One Point Body copy and then on the 3rd

Do something and your titles are 16 points

But just come up with three different designs like I have here with just a simple one line

Find title maybe another one has like a two or three line title the body copy is up to you just pick something better than Laura MEPS

I'm using this dummy text that I found online you can just copy and paste this down below or UK

Can grab your own self doesn't matter so just come up with 30 students like let's get some feedback let's get some discussion going