Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Typography for Designers!
You have completed Typography for Designers!
Preview
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