All language subtitles for 2-02 font weight

Font-weight affects the perceived

Hierarchy of information

The readability of text and sometimes the affordance

In most cases simply changing from a regular way

Fonts

2A

A bold way

Can be just enough to Signal different meaning within that usage

Do remember from our Instagram example.

The

Body copy

Was exact same size

The exact same color

But the profile names were made bold and that was just enough to signal change that you

You can tap on it to go to someone

So when you're designing interfaces the type

As we have mentioned before it's going to be the most critical part of

So making subtle changes here and there can be the

Sometimes we the best way to emphasize her

While also D emphasizing

Other part

Let's take a look at example from an

App that I designed this app was called zipper

So there's

A handful of designs right here but what I really want to focus on

Is the section over here when you're

Trying to invite a team member

So we want you to enter a team or username or email is this

Input field

And you have this

Send icon are not icon

That is

Going to be active but it's not active yet so this is Addie activestate

And you have your active cancel button over here

And then as soon as you start typing or you so like someone

And for this example we haven't quite selective. But for this example we've chosen this person Hillary Fox and then

All of a sudden now we have

Really bold

Send button is now active and you can see that

The wait here on cancel is regular

Whereas the wait

Here

Is

Quite heavy

And I just kind of indicates that that is the primary action

That if you want to invite this team member

Sending it is going to be

Your primary action was canceled will be York

Terry won't that primary action to be a little bit heavier

Just a little bit more weight

To give it.

Primary action

If you do not you can kind of see the difference

Right here between

The inactive sand and the active

Now that's a really simple example

Let's take another look at weight change on this streamline icons website

So you can see on here we have

Kind of a heavy hello and then welcome to streamline

It's just kind of

In this particular case is just enough to add a little bit of visual interest

But down here and the navigation zoom in a little bit little bit better so we're changing color

On Hover then we're changing the weight

Once you tap it

And so changing the way

The color and the way it sometimes

Canby

Just enough to give it.

Extra bit of emphasis.

Designing something like a navigation or some kind of like

New Switch or something like that

There's also more to wait in general than just changing the font style from normal

Too bold or black or something like that there's also visual Waze

That is created with negative space and color

That can often times provide a lot more total weight than with just changing the font

Style alone

And we'll take a look at some of those example

And just a min

So typically on the web

You have

Font-weight that range from anywhere from 100 to 900

According to

Mcss properties

You got your hairline waited like

100

You've got regular way which is set at normal or 400

When you got bold at

Either bold or 600 or you have

That is

Going to be your 900 way

Now this is definitely

Specific the CSS and not all font weights are going to be created

The same way because

A typographer

And whoever's designing the taipei's has full Liberty and Critter Control to name those weights whatever they want

Who's going to be slightly different from typeface to typeface

But this is just

A good enough to give you a kind of a general idea

Of how the wait

Its work within the time

At the font that you're using

Is going to define the weights that

Using doesn't include a variety of weights

Baked in

And you try to

Forsyth bold or you try to

Forsett italics or something.

The computer is often going to kind of

Generate its own version

A slanted or a slightly

Sticker

Font-weight

And that's just oven times really

Because

When you create a bold font weight from

Describe there's a lot of little nuansa goes into all the details of the letter forms

So

When you're trying to go bold with a font don't just rely on a computer to

Bolly4u

Make sure that you're choosing a font that has

An actual bolded

Wait Style

So that's going to be much better

Going to look

More proper and I won't look so

So don't do that as far as light and hairline

They should mostly be avoided and user interface

It's just really hard to read and most contacts it actually it it starts looking like really thin and crispy and hard

And

Unless you're going to go really big like the weather app with it's big

The temperature

It's

You know and those cases when you're using like

6080 Hunter Point size white light and hairline can be a cool option because the actual letter forms are

Are thick enough

To be visible but if you're trying to use 16 or 18 point body copy with light or thin or hairline

It's just not going to work very well so I was just

Definitely avoid

So in most cases regular

Book

And medium are going to be used for body copy

Whereas like semi bold bold heavy black those are going to be more reserved for

Headlines

However if you're going for like a big thick

Chunky Style

That might change up the way that you use those typefaces

Sometimes you can use like a semi bald or bold for a body copy

If that's kind of the style you're going for and if you check out Pinterest for example

Pinterest is a really good example of kind of using that

Bold font ways you can see like up here and

The navigation

They're using like a boulder font-weight so if I go into the inspector

If I choose this

Navigation thing

You can see that the font way is set to 7

So 7:00 is pretty bald and turns of CSS normally a normal van

Style a normal before

So if I change out the 400 here

You can see that this has

It's now turned into like a regular weight and it

It definitely feels thinner and crisper

But it doesn't quite go with their brand they kind of have this

Chunky bold brand

So if I go back in

And select that guy again

Change it back to 700

And you can see that's a little bit thicker and you can even experiment with this if the font

Weight is available you can even see what 800 looks like

You can see what 900 looks like

Also affecting these right here

900 you can see the Super Bowl

But it's

Looks like a little bit too much

Go back to 700 here

Maybe 800 again

Honestly I kind of like the 800

For for this

Another example is the chef knives

Beta page which you probably already seen

I'm using this one called TT Firs

Orrefors new if you're not pronouncing it in the snobby typographic

Dialect

I'm using I'm I'm pretty sure I'm using semi Bowl for the entire thing

Oakmont wait 600 I'm pretty sure that I only have one semi bold font called for the entire thing

And I'm using semi bowl for every single every single instance of the typography here so I just wanted it

To have a thicker kind of chunky or Style Just

Look a little bit unique

So if there are specific examples like that is totally fine to use

A bolder font style but

It's not usually going to be

When you're creating an app

Up and you want this big system

Most of the time you won't use him I bowled in that way or Bolden that way but it

You know from time to time if the if the

The situation calls for it

You no go for any

So back to creating visual weight

With techniques other than just

Stephon style like negative space

And color

You can use negative space to your advantage to surround any particular amount of tax

To give it some implied

So if you look at this example on my own personal website

I'm using

You know, quite large pipe size here and a very heavy weight

For these titles but it's also accentuated

By the sea

Very large

Block of negative

So if I go into one of these

You know same thing here I'm using a pretty large and beefy

Headline which is set to

Black

The boldest wait at this time FaZe hazz

But I'm also using

Quite a bit of

Negative space here so it really kind of

Adalot to a10e

You could even go in and kind of experiment here you could change

The typeface

Down to say to what you be about 32 pixels

And then give it some more padding on the top

And bottom

And you can see that would be another particular style where

The type size is much smaller but it still has a pretty big impact because there's so much negative

Now there's there's some issues

I just kind of hacks

Together but you can count

More negative space around a title

Is going to give it more impact even if it's

Smaller

Another example of visual way can be found on the floket website

So if you scroll down

And you go to this

Purchase section

You know I wanted the purchase section to be more visually heavy

I wanted it to kind of Stand Out amongst everything else so I gave her this dark blue background

And I have the

You know bright orange

Call to action and bright blue call to action

So it might get

You know

It kind of matches the background of these other modules

You know if I just had like a light gray module here

It wouldn't be quite as I'm packed

So I have these

Udo heavy

Visually

Colored and

Weighty modules

Which give this typeface

You know team and solo here look much heavier than they would

If they're on a white background with black

So they are using a bold font but they're even heavier because I'm using a darker color for the back

You can compare it to

Some of these titles like that is like

This looks heavy

But it's not quite as

Visually impact

As these large blocks of

The color

Where the River style tax on

Okay for this last example for creating

Psalm

Interest and visual impact with

Font-weight

I want to show you an example inside of figma

So I've got this block of text that I have copied and pasted from

One of my favorite bug

It's called as a man thinketh

So I went to Google fonts

And I searched

4

Seraphine

And I wanted to make sure that it had lots

Weights

Associated with it

And just kind of scrolling through I wanted to find something that was kind of nice and ended up on Crimson Pro here

It's got a lot of weights and she's kind of a neat looking typeface so I decided to give it a go

So inside of figma

I've got this

Body copy and his title pasted in

It's kind of all run together I've got

There's a title here

And there's a paragraph here and second paragraph

Now inside of figma you can actually use all of the Google fonts

Without having to install them locally on your machine

Cuz it's all web-based so that's another cool feature of figma

So what I'm going to do here is change this

S2 Crimson Pro

Actually crimson

Is what I'm going to use

I'm already at 100% so I'm just going to bump this out to maybe 21 just so we can see it a little bit better

I'm making sure that I don't have this to why that I have it at a nice

Kind of wet here

You can see that even if I you know everything's kind of run together right now and even if I just

Simply give it a line break

On these two lines

That enough that alone is giving it negative space

Between the title and the paragraph

And the paragraph

Another paragraph

That alone is giving it that alone is getting more way to each individual

So if I go in here and I

Add a bold weight

To the title

That is

Pretty nice

I mean there's not a lot you have to do

Beyond that I mean I know that we're this is kind of designed an abstract

Inform we're not really

Looking at anything in particular but

If you're looking at this

That's a pretty nice

It's a pretty nice body attacks

And another thing about body copy and font-weight font style doesn't have to be

So over-the-top it can just be really nicely set

And it doesn't need to

Scream for attention I can just be nice

And

Properly set earlier

They can be superbly ordinary.

A lot of what tax

It doesn't pull a lot of attention at

Just enough

It's that just enough and it's

It's the right size the right spacing that

You can read it

And

There is emphasis where it needs to be and there's not where it's not so it's

It's kind of a fine delicate balance

But you can see all I did was add a couple of line breaks

And change

This heading

And that looks pretty nice

Now you could also play with the line spacing

If I give it 135%

Maybe tighten it up a bit

Maybe if I went to like 150 that could also work

125 could probably wear it just

Kinda depends on you know the content and the length of everything

Think I kind of like do 135

And if I wanted to go even heavier with the title

I could go here

These texts auctions

And then changed the letter case to

All caps right here

So that

Being the same size

And making it Bowl but also making it

Uppercase

Or all caps that gives it

Even more weight

Now if this was like

The main title of the page

That might make more sense

You know you have to think about what

This particular

Headline is doing in contacts

Entire

Novel or whatever you're working on so in this

In this circumstance I think either one of them work

And if you wanted to give it even more weight you can give another line break

You know and then

That alone

Creating

A lot of weight

Just because we've given it to line breaks

A bold font

Style

And uppercase I gots a lot of weight

Compared to

If I go back

You know that

That's definitely

Weightier than the body but it's not quite as much way it's a really just depends on what you're trying to accomplish

Would that headline both of these tiles are good

Accomplish and the context of what you're

So for your homework on this lesson I want you to

Go back to your coffee cup design

From the previous lesson

And if you haven't done that

Go back and watch that and do that homework first

But now instead of using three or four

Type sizes for your interface like I asked you doing the last lesson

Now I want you to revise your existing design to just use one types

Save save it as a new file before you get started don't want you to delete your original I want you to use one type size

And you can use any weight of

The typeface that you want

You know if you want to go into Google fonts and pick something really nice it has a lot of weight

They have a lot of different options that's totally fine

But I want to use one size

And

Really experiment with old black

Hairline things like that you might

You know be careful with a hairline especially since you're using one

Pipe size

And I want you to

Create that additional weight using the negative space and some color

For some of the different areas

Post your word into the group get some feedback

And again if you're feeling up for it posted the trouble

Write down the parameters

And description of what your kind of going for a

And tag me in it be happy to give you some feedback so

On the spot