Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Typographic hierarchy is an extremely important element of web design. It helps guide readers through the content and its levels of importance. First, we’ll discuss how to create hierarchy through weight, size, and position.
Type Study: Typographic Hierarchy, Frank Chimero
Understanding Typographic Hierarchy, Jeremy Loyd
[MUSIC]
0:00
All right.
0:02
You've made it this far.
0:03
Good work.
0:07
If all this talk about type hasn't gotten
you excited already, then you just wait.
0:08
In this stage, we'll look at the different
ways you can lay out type for the web.
0:12
First up is Typographic Hierarchy.
0:16
This concept is crucial to seamlessly
guide readers through a page's content.
0:19
Hierarchy helps users understand what
information is
0:23
most important to what's secondary,
tertiary, and so forth.
0:26
In this video,
0:30
we'll look at how to do this with weight,
style, size, and position.
0:31
And then next, we'll continue on the theme
of hierarchy with color and
0:34
pairing typefaces.
0:39
Before we jump in,
0:40
let's check out all of these concepts in
action at CreativeMornings.com.
0:42
Let's say I wanted to attend this upcoming
lecture in Los Angeles.
0:46
We're immediately presented with an array
of information that's been
0:51
hierarchically arranged through
typography.
0:54
First, my eyes gravitate towards what's
biggest, boldest and darkest on the page.
0:57
The speaker names.
1:01
This is the most important piece of
information here and
1:03
CreativeMornings lets you easily know it.
1:06
Next, my eyes naturally continue reading
and
1:08
move downward towards the date, time and
place.
1:11
This is of next importance after the
speaker name.
1:14
It's smaller but still prominent.
1:17
My eyes are then drawn to the bright block
of color holding a white text of
1:19
the city code.
1:23
It's a nice touch.
1:24
After I've taken all that in and consider
if I'm still interested,
1:25
then I'm able to make my way down to the
smaller secondary information.
1:28
And read more about the speakers and where
exactly the talk will be.
1:32
We see bold type, multiple sizes,
different colors, different positions, and
1:36
different type faces utilized to convey
the hierarchy of information on the page.
1:40
It's a combination that's not only useful
to the user,
1:46
it's also down right good looking.
1:49
These concepts can be incredibly powerful
to create usable, beautiful websites.
1:51
But they can also get out of hand pretty
fast if we don't know what we're doing.
1:55
Before you begin styling anything, it's
smart to familiarize yourself with
1:59
the site's content to get an overall big
picture of everything involved.
2:03
It's often helpful to print out the page
unstyled, and then go about hierarchically
2:07
numbering content elements starting with
one, what's of most importance.
2:11
Two, what's of next importance, and so
2:16
forth until every piece of content has
been labelled.
2:18
You can even make note of what HTML
elements would be appropriate for
2:21
each number like H1 or H2 or P.
2:25
This system will inform us on how we can
utilize typography to accentuate our
2:28
different pieces of content.
2:32
This is often done in a wiring framing
level of building a website.
2:34
Because most times, it can be quicker and
2:37
easier to change typography in a design
program rather than in CSS.
2:39
With our current example from The War of
the Worlds, we've been arranging and
2:44
changing the type as we go.
2:47
Let's begin by looking at how we can
hierarchically set content apart
2:49
with weight, style, size and color.
2:52
We can create hierarchy simply by
weighting certain blocks of texts.
2:56
Our reader's eyes will be drawn to the
bolder elements on the page.
3:00
I've set up our workspace here to cover
different concepts of hierarchy as we go.
3:04
In our first folder, I've replaced all our
heading tags and
3:09
just made them paragraphs.
3:13
And I've also commented out the text
indents in the CSS.
3:14
Currently, it looks like this.
3:18
So, the only hierarchy present is what
comes first will be read first.
3:20
I've set the title class as bold here.
3:24
So let's go ahead and style out that class
to have a font weight of bold.
3:26
We'll save and go check it out.
3:30
I've just emphasized that piece of element
over everything else on the page.
3:32
A reader's eyes will naturally gravitate
towards that because it
3:36
carries more weight than anything else on
the page.
3:39
Think about the law of gravity.
3:42
The heavier the mass of an object, the
more gravitational pull it will have.
3:44
It's no different with layouts and type.
3:49
The heavier areas often draw the reader's
eyes in more to notice them first.
3:50
An italic style can also be utilized to
denote emphasis or set apart text.
3:55
In this case,
4:00
I can italicize the author's name through
a class I've set up in the CSS.
4:01
[BLANK_AUDIO]
4:06
When we refresh the page,
4:08
we see the author's name is now italic
which is set apart from regular body copy.
4:09
A different weight or Italic style can be
used to carry emphasis.
4:14
But if you overuse it, you can end up with
an unbalanced hierarchy and
4:18
layout where everything is important.
4:21
So in turn, nothing is important.
4:24
Watch out for how dense your typographic
color is on the overall page.
4:26
Size is next and it can immensely help in
guiding your readers through your content.
4:31
This is why your default H1, H2 and
4:35
H3s are greater than your default
paragraph size.
4:38
The web is based around the structure.
4:41
They're also bold by default, but
4:43
a bold weight is not always necessary to
convey hierarchy when size is utilized.
4:45
Google's recent launch of their material
design website wowed
4:50
designers and typographers.
4:54
On the site, they have a recommended
typographic style guide for Android.
4:56
In it, you can see their typography
doesn't rely on bold headlines or display.
5:00
Rather, their overall color of weight all
feels pretty even.
5:05
This is accomplished by setting lighter
weights at larger sizes and
5:10
medium weights at smaller sizes.
5:13
Side note.
5:16
Do not, I repeat, do not use light weights
at small sizes or for body text.
5:17
It can dramatically hinder legibility and
readability.
5:23
If I catch you doing this, then you're in
for it.
5:26
In our second folder of typographic
hierarchy, we're looking at our size.
5:29
And I've reinstated all our headings to
what they used to be.
5:33
But this time, I've given them a font
weight of normal.
5:36
Let's go check out what that looks like on
our page.
5:39
[BLANK_AUDIO]
5:41
We can see that just through size, our
hierarchy can clearly be established.
5:44
Our reader can scan through the content
and understand what each section
5:50
entails because the larger headings grab
their attention and convey that.
5:53
It's not wrong to use bold headings.
5:57
I just want to show you how size is fully
capable of denoting hierarchy on its own.
5:59
As mentioned in the font sizing video from
the past stage, make sure to
6:05
follow a typographic scale with your sizes
and don't get carried away with too many.
6:08
Lastly, let's look at how positioning can
be used to present hierarchy.
6:13
When we're discussing position, we're
talking about the placement and space
6:18
around the type in relation to the other
elements or blocks of type around it.
6:21
We notice how placement and
6:26
space was used on the great discontent to
set apart different pieces of content.
6:27
Now, let's check out another site that
does this well.
6:32
Here we have Andrew Loman's take on
www.csszengarden.com.
6:36
The site showcases the power of CSS by
having the same HTML,
6:40
but different style sheets made by
different web designers.
6:44
Apart from this beautiful mix of
typography, icons and
6:48
color, Lomen's design utilizes the
position of type to present hierarchy and
6:51
differentiate elements.
6:56
When we arrive at the beginning of the
site, we immediately see the main tag line
6:58
positioned around the vertical center of
our screen.
7:02
Then our eyes move to the right where the
next block of text has been positioned to
7:05
be read.
7:08
Finally, I might notice the site's title
which is set at a smaller size and
7:09
rotated 90 degrees and positioned in the
top left.
7:13
The intention of this design was to stress
the tag line above all else here.
7:16
It continues on using multiple columns and
7:21
space to convey hierarchy through
position.
7:23
So check it out if you have time.
7:26
Let's jump back into our example now.
7:28
So, currently, we're already using
hierarchy in some sense where we're
7:31
separating our headings from our
paragraphs with some space there.
7:35
And we're doing a great job of it in this
minor way of setting a text indent to our
7:39
P plus Ps as that's different shading the
paragraph above from the paragraph below.
7:44
I might wanna accent our title and author
name a bit more though.
7:50
So let's see what we can do with its
position.
7:54
In our HTML, I'm gonna grab the H1 and H3
elements and
7:57
create a new div above this container div
of title.
8:02
[BLANK_AUDIO]
8:07
We'll paste those elements into that div
and
8:11
then I'm gonna rearrange the spacing here.
8:13
And then we're gonna wanna style out that
class.
8:15
So I'm gonna give it some top padding of
6em, some left and right of zero and
8:17
bottom of zero cuz that container class
already has some top padding.
8:21
And then I'll give it a text align of
center.
8:25
We'll save and let's go check it out.
8:28
Great.
8:31
Because of its position now, a reader can
engage this as separate from
8:32
the main text, which further establishes
its hierarchy.
8:36
The center align style is also nice
because it feels akin to
8:40
the title of an old book cover.
8:43
We'll stop here for now.
8:45
But positional hierarchy could also be
accomplished with borders or
8:47
line rules above and around or
8:50
below the type to separate a piece of
content from the element around it.
8:52
The possibilities are really countless
with hierarchy.
8:56
So remember to not make typographic
choices just because.
8:59
A good designer knows when and why to say
yes or no to an idea.
9:03
Have a reason behind why you're bolding or
9:07
italicizing text and why you're increasing
sizes.
9:09
Or why you're moving an element to a
certain place.
9:12
That's it for the first part of
typographic hierarchy.
9:16
I'll see you in the next video as we dive
more into the subject.
9:18
You need to sign up for Treehouse in order to download course files.
Sign up