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.
Resources
- Every Design Needs Three Levels of Typographic Hierarchy
- Web Design Experiments by Jen Simmons
- Staatliches Bauhaus example by Jen Simmons
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
Typographic hierarchy seamlessly guides
readers through a page's content.
0:00
Bold weight text makes text stand out more
0:05
while light text makes
it recede in comparison.
0:08
An italic style can also be utilized to
denote emphasis or to set apart the text.
0:12
For example,
0:17
I can italicize the author's name to
differentiate it from the other body text.
0:18
A different weight or metallic style
can be used to carry emphasis.
0:24
But if you overuse it, you can end
up with an unbalanced hierarchy and
0:28
layout where everything is important.
0:32
So in turn, nothing is important.
0:34
Watch out for how dense your typographic
color is on the overall page.
0:37
Size is next and it can immensely help in
guiding your readers through your content.
0:43
This is why headings have a larger
text size and paragraphs.
0:48
While headings are often bold,
0:52
a bold weight is not always necessary to
convey hierarchy when size is utilized.
0:54
Base font sizes should
be at least 14 pixels.
1:00
Lastly, let's look at how position
can be utilized to present hierarchy.
1:05
When we're discussing position, we're
talking about the placement and space
1:08
around the type in relation to the other
elements or blocks of type around it.
1:14
Let's look at a site that does this well.
1:19
Here's a conference website for
Black Futurism.
1:23
The name of the event if big and bold.
1:26
Then my eyes are drawn to the dots where
I can check out the program schedule.
1:30
The large days of the week make
up the daily schedules clear.
1:35
The spacing in between each session
easily separates the events.
1:39
This is a great practical yet
highly fun and
1:44
bold take on conference website design.
1:47
Next, let's look at a more
experimental design by Jen Simmons.
1:50
It utilizes the position of
type to present hierarchy and
1:54
differentiate elements.
1:58
When we arrive on the site, we immediately
see the large BAUHAUS headline.
2:00
Then our eyes move to the German word for
exhibition,
2:06
which is rotated 90 degrees in position
to the right of the red square.
2:10
The intention of this design was
to position type in a bold and
2:14
unexpected way, while using the red
square as a grounding focal point
2:18
which the typography dances around.
2:23
Let's jump back into our example now.
2:26
So we're actually already utilizing
position to differentiate our content
2:29
in minor ways.
2:33
By separating our headings and
2:35
paragraphs from one another when we looked
at vertical spacing in the last stage.
2:37
I might want to accentuate our title and
2:41
author name a bit more though, so let's
see what we can do with its position.
2:44
I'll center align them and
give them some more padding.
2:49
Great, because of its position,
a reader can now engage this as separate
3:03
from the main text,
which further establishes its hierarchy.
3:07
The center align style is also nice,
3:12
because it feels akin to
the title of an old book cover.
3:14
Positional hierarchy could also
be accomplished with borders or
3:19
line rules above, around, or
3:22
below the type to separate a piece of
content from the elements around it.
3:24
The possibilities are really
countess with hierarchy, so
3:29
remember to not make typographic
choices just because.
3:33
A good designer knows when and
why to say yes or no to an idea.
3:38
Have a reason behind why you're bolding or
italicizing text, or
3:42
why you're increasing sizes or why you're
moving an element to a certain place.
3:46
While we're on the topic of positioning,
let's cover alignment.
3:52
Text alignment can be justified or
3:57
unjustified, but
unjustified is typically more readable.
3:59
Justified text creates lines of text
which evenly touch the left and
4:04
right side of the column.
4:08
It's commonly used in newspapers
since it's an efficient use of space.
4:10
However, this can create large unsightly
gaps throughout the paragraph.
4:15
These are referred to as rivers,
because the end result
4:20
might look like several rivers of
whitespace flowing throughout the text.
4:24
This makes it difficult for
people with dyslexia.
4:29
It's not clear where a line of text ends
which unfortunately causes them to switch
4:32
to the wrong line.
4:36
If you must use justified
text turn on hyphenation,
4:37
which allows words to break apart and
prevent those awkward gaps.
4:41
Left aligned text is the default,
the words evenly
4:46
align on the left to form a hard line
while the right edge is soft and
4:51
ragged, this allows
the words to flow naturally.
4:56
But be aware of bad rags such as a wedge
shape that creates an unintentional shape.
5:00
Left aligned text can sometimes
create rags on the right side,
5:07
which are uneven gaps often
caused by long words.
5:11
Minor gaps are expected but
gaping holes should be taken into account.
5:15
There's really no easy
way to prevent them, but
5:20
we can sometimes avoid them by
adjusting font sizes and line lengths.
5:22
Then there's right aligned text,
5:27
this is when words are evenly aligned
on the right while ragged on the left.
5:29
Since English is read left or right, left
aligned is more legible for this language.
5:33
While right aligned text can be a novel
change from the usual, it can be jarring.
5:40
Center text creates a ragged
line on the left and the right.
5:46
If you use center text in a layout is
generally advisable to consistently
5:50
center line or the text, for long font
text it can be difficult to read.
5:55
Therefore, I recommend that you don't
center a line paragraphs longer than
6:01
three lines.
6:05
That's it for
the first part of typographic hierarchy.
6:07
I'll see you in the next video as
we dive more into this subject and
6:11
look at caps and color.
6:14
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