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
Now let's explore more advanced techniques like creating typographic hierarchy.
Websites Demoed
- Meg Lewis talk - Creative Mornings
- One Step Ahead: we meet Paula Scher, the trailblazing Pentagram Partner - It's Nice That
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
All right, you made it this far,
good work.
0:04
If all this talk about type hasn't gotten
you excited already, then just you wait.
0:08
In this stage, we'll look at the different
ways you can lay out type in a design.
0:13
First up is typographic hierarchy.
0:18
This concept is crucial to seamlessly
guide readers through our page's content.
0:20
Hierarchy helps users to understand
what information is most important
0:26
to what's secondary,
tertiary, and so forth.
0:30
In this video, we'll look at how to
do this with weight, style, size, and
0:34
position.
0:39
In the next, we'll continue on
the theme of hierarchy with color and
0:40
pairing typefaces.
0:44
Before we jump in,
0:46
let's check out all of these concepts
in action at creativemornings.com.
0:48
Let's say I wanted to watch this talk
that Meg Lewis did in Minneapolis.
0:53
Immediately, I'm presented with an array
of information that's been arranged with
0:58
hierarchy in mind.
1:02
First, my eyes gravitate towards what's
biggest, boldest, and darkest on the page,
1:04
the speaker's name.
1:09
This is the most important
piece of information here, and
1:11
Creative Morning lets you easily know it.
1:14
Next, my eyes naturally
continue reading and
1:18
move downward to the title of the talk.
1:21
This is of next importance
after the speaker name.
1:24
It's smaller, but still prominent.
1:27
My eyes are then drawn to the bright
block of color holding the white text of
1:31
the city code.
1:35
It's a nice touch.
1:37
After I've taken all that in and
considered if I'm still interested,
1:39
then I can make my way down to
the smaller secondary information and
1:43
read more about this speaker and
where exactly the talk was, and
1:47
some more information about
what the talk was about.
1:52
We see bold type, multiple sizes,
different colors, different positions,
1:55
and different typefaces utilized to convey
the hierarchy of information on the page.
2:00
The combination is not only useful to the
user, it's also downright good-looking.
2:07
These concepts can be incredibly powerful
to create useful, beautiful websites.
2:12
But they can also get out of hand pretty
fast if we don't know what we're doing.
2:17
Before you begin selling anything,
it's smart to familiarize yourself with
2:23
the site's content to get an overall
big picture of everything involved.
2:27
It's often helpful to sketch out
a wireframe and then go about numbering
2:33
content elements, starting with, one,
what's of most importance, two, what's
2:38
of next importance, and so forth until
every piece of content has been labeled.
2:43
This system will inform us on how we can
utilize typography to accentuate our
2:49
different pieces of content.
2:53
We can create hierarchies simply by
weighting certain blocks of text.
2:56
A reader's eyes will be drawn to
the boulder elements on the page.
3:01
This hierarchy helps readers make
connections between the content and
3:05
relate certain sections.
3:09
Speaking of sections, typography is as
much about the treatment of the text
3:12
as it is with the space
surrounding the text.
3:17
Thus, the importance of white space.
3:20
White space is empty space
without content, and
3:23
it plays a key role in
the readability of a design.
3:27
It gives the reader space
to rest their eyes,
3:30
which reduces the feeling
of information overload.
3:33
Let's look at the white space of
the left and right of our type.
3:37
Margins or padding should be used
to give your type room to breathe.
3:41
If a sentence comes too
close to another element,
3:45
then it can disrupt the flow of reading.
3:48
White space is often underutilized in
web design, which results in cramped and
3:51
cluttered layouts.
3:56
Also, it should be noted that white
space doesn't have to be white.
3:57
If you have a dark background
with lighter text,
4:03
we would still call that area
around the text white space.
4:07
Let's check out a good
example of white space.
4:11
Here's an article on itsnicethat.com,
a creative inspiration blog.
4:14
It's about Paula Scher,
a renowned graphic designer.
4:19
Notice how there are ample amounts
of white space around the type,
4:24
the words are not closing in on borders,
they're giving room to live and breathe.
4:28
As you can see, white space can clean
up a design and give it an elegant,
4:34
professional feel.
4:38
You can also emphasize content by
framing it with an empty space.
4:40
Now, watch as the white space changes
as I resize the browser window.
4:45
The content shifts into one column and
the white space is maintained,
4:52
although in different proportions
to fit comfortably on mobile.
4:56
All right, now that certainly
got me excited about hierarchy.
5:03
In the next video, let's explore
what we can do with style, weight,
5:07
size, and position.
5:11
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up