[MUSIC]

All right.

You've made it this far.

Good work.

If all this talk about type hasn't gotten you excited already, then you just wait.

In this stage, we'll look at the different ways you can lay out type for the web.

First up is Typographic Hierarchy.

This concept is crucial to seamlessly guide readers through a page's content.

Hierarchy helps users understand what information is

most important to what's secondary, tertiary, and so forth.

In this video,

we'll look at how to do this with weight, style, size, and position.

And then next, we'll continue on the theme of hierarchy with color and

pairing typefaces.

Before we jump in,

let's check out all of these concepts in action at CreativeMornings.com.

Let's say I wanted to attend this upcoming lecture in Los Angeles.

We're immediately presented with an array of information that's been

hierarchically arranged through typography.

First, my eyes gravitate towards what's biggest, boldest and darkest on the page.

The speaker names.

This is the most important piece of information here and

CreativeMornings lets you easily know it.

Next, my eyes naturally continue reading and

move downward towards the date, time and place.

This is of next importance after the speaker name.

It's smaller but still prominent.

My eyes are then drawn to the bright block of color holding a white text of

the city code.

It's a nice touch.

After I've taken all that in and consider if I'm still interested,

then I'm able to make my way down to the smaller secondary information.

And read more about the speakers and where exactly the talk will be.

We see bold type, multiple sizes, different colors, different positions, and

different type faces utilized to convey the hierarchy of information on the page.

It's a combination that's not only useful to the user,

it's also down right good looking.

These concepts can be incredibly powerful to create usable, beautiful websites.

But they can also get out of hand pretty fast if we don't know what we're doing.

Before you begin styling anything, it's smart to familiarize yourself with

the site's content to get an overall big picture of everything involved.

It's often helpful to print out the page unstyled, and then go about hierarchically

numbering content elements starting with one, what's of most importance.

Two, what's of next importance, and so

forth until every piece of content has been labelled.

You can even make note of what HTML elements would be appropriate for

each number like H1 or H2 or P.

This system will inform us on how we can utilize typography to accentuate our

different pieces of content.

This is often done in a wiring framing level of building a website.

Because most times, it can be quicker and

easier to change typography in a design program rather than in CSS.

With our current example from The War of the Worlds, we've been arranging and

changing the type as we go.

Let's begin by looking at how we can hierarchically set content apart

with weight, style, size and color.

We can create hierarchy simply by weighting certain blocks of texts.

Our reader's eyes will be drawn to the bolder elements on the page.

I've set up our workspace here to cover different concepts of hierarchy as we go.

In our first folder, I've replaced all our heading tags and

just made them paragraphs.

And I've also commented out the text indents in the CSS.

Currently, it looks like this.

So, the only hierarchy present is what comes first will be read first.

I've set the title class as bold here.

So let's go ahead and style out that class to have a font weight of bold.

We'll save and go check it out.

I've just emphasized that piece of element over everything else on the page.

A reader's eyes will naturally gravitate towards that because it

carries more weight than anything else on the page.

Think about the law of gravity.

The heavier the mass of an object, the more gravitational pull it will have.

It's no different with layouts and type.

The heavier areas often draw the reader's eyes in more to notice them first.

An italic style can also be utilized to denote emphasis or set apart text.

In this case,

I can italicize the author's name through a class I've set up in the CSS.

[BLANK_AUDIO]

When we refresh the page,

we see the author's name is now italic which is set apart from regular body copy.

A different weight or Italic style can be used to carry emphasis.

But if you overuse it, you can end up with an unbalanced hierarchy and

layout where everything is important.

So in turn, nothing is important.

Watch out for how dense your typographic color is on the overall page.

Size is next and it can immensely help in guiding your readers through your content.

This is why your default H1, H2 and

H3s are greater than your default paragraph size.

The web is based around the structure.

They're also bold by default, but

a bold weight is not always necessary to convey hierarchy when size is utilized.

Google's recent launch of their material design website wowed

designers and typographers.

On the site, they have a recommended typographic style guide for Android.

In it, you can see their typography doesn't rely on bold headlines or display.

Rather, their overall color of weight all feels pretty even.

This is accomplished by setting lighter weights at larger sizes and

medium weights at smaller sizes.

Side note.

Do not, I repeat, do not use light weights at small sizes or for body text.

It can dramatically hinder legibility and readability.

If I catch you doing this, then you're in for it.

In our second folder of typographic hierarchy, we're looking at our size.

And I've reinstated all our headings to what they used to be.

But this time, I've given them a font weight of normal.

Let's go check out what that looks like on our page.

[BLANK_AUDIO]

We can see that just through size, our hierarchy can clearly be established.

Our reader can scan through the content and understand what each section

entails because the larger headings grab their attention and convey that.

It's not wrong to use bold headings.

I just want to show you how size is fully capable of denoting hierarchy on its own.

As mentioned in the font sizing video from the past stage, make sure to

follow a typographic scale with your sizes and don't get carried away with too many.

Lastly, let's look at how positioning can be used to present hierarchy.

When we're discussing position, we're talking about the placement and space

around the type in relation to the other elements or blocks of type around it.

We notice how placement and

space was used on the great discontent to set apart different pieces of content.

Now, let's check out another site that does this well.

Here we have Andrew Loman's take on www.csszengarden.com.

The site showcases the power of CSS by having the same HTML,

but different style sheets made by different web designers.

Apart from this beautiful mix of typography, icons and

color, Lomen's design utilizes the position of type to present hierarchy and

differentiate elements.

When we arrive at the beginning of the site, we immediately see the main tag line

positioned around the vertical center of our screen.

Then our eyes move to the right where the next block of text has been positioned to

be read.

Finally, I might notice the site's title which is set at a smaller size and

rotated 90 degrees and positioned in the top left.

The intention of this design was to stress the tag line above all else here.

It continues on using multiple columns and

space to convey hierarchy through position.

So check it out if you have time.

Let's jump back into our example now.

So, currently, we're already using hierarchy in some sense where we're

separating our headings from our paragraphs with some space there.

And we're doing a great job of it in this minor way of setting a text indent to our

P plus Ps as that's different shading the paragraph above from the paragraph below.

I might wanna accent our title and author name a bit more though.

So let's see what we can do with its position.

In our HTML, I'm gonna grab the H1 and H3 elements and

create a new div above this container div of title.

[BLANK_AUDIO]

We'll paste those elements into that div and

then I'm gonna rearrange the spacing here.

And then we're gonna wanna style out that class.

So I'm gonna give it some top padding of 6em, some left and right of zero and

bottom of zero cuz that container class already has some top padding.

And then I'll give it a text align of center.

We'll save and let's go check it out.

Great.

Because of its position now, a reader can engage this as separate from

the main text, which further establishes its hierarchy.

The center align style is also nice because it feels akin to

the title of an old book cover.

We'll stop here for now.

But positional hierarchy could also be accomplished with borders or

line rules above and around or

below the type to separate a piece of content from the element around it.

The possibilities are really countless with hierarchy.

So remember to not make typographic choices just because.

A good designer knows when and why to say yes or no to an idea.

Have a reason behind why you're bolding or

italicizing text and why you're increasing sizes.

Or why you're moving an element to a certain place.

That's it for the first part of typographic hierarchy.

I'll see you in the next video as we dive more into the subject.