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
To continue on the theme of hierarchy, we’ll look at how you achieve it through color and diverse typefaces. Pairing typefaces may seem tricky at first, but we’ll look at what makes a good combination.
This video doesn't have any notes.
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
Next, let's see what we can do with color.
0:00
I won't go too in-depth with color theory,
0:03
as that's covered in Treehouse's design
courses.
0:05
But, let's look at how to utilize color
with type.
0:08
First, you wanna make sure type over any
element,
0:10
whether it's the whole background or a
small content block, has good contrast.
0:13
if the contrast is too low, then the type
and
0:19
its background color will start to blend
together, making it hard to decipher.
0:21
If it's too high,
0:26
you can tire out readers' eyes due to the
bright nature of screens.
0:27
Pure black and white work well in print,
but on the web, you should
0:31
stick to a more subtle black when set on a
white background, and vice-versa.
0:35
Our example page has a grayish-black of
number 333.
0:39
And, a wide of number F9F9F9.
0:43
Almost all popular content heavy websites
utilize a light background with dark text
0:46
for their main body copy versus a dark
background with light text.
0:51
Don't forget to take into account color
blindness and
0:54
accessibility with this concept of
contrast.
0:57
With typographic hierarchy,
1:01
more contrast will grab attention whereas
subtler contrast will blend in.
1:02
Another way to think about this is the
primary, or important pieces of content
1:07
should be easily noticed whereas secondary
pieces can blend in more with the design.
1:11
All right, let's jump back into our
workspace.
1:16
I want to give our main title and
1:18
author name a different background color
than the rest of the text.
1:20
So, to do that, I'll head over to here and
we see we're now in the fifth folder and
1:24
I have our index and style open.
1:28
And, we can set our background for our
title class to be 1e1e,
1:30
which is a subtle black, and the color of
the type to be f9f9f9.
1:35
We'll save that and check it out.
1:38
Great.
So, it's looking good.
1:44
But, we now need to add some space below
the author name here.
1:45
So, to do that,
1:49
we'll simply add padding bottom of 5 M to
our title class an lets check that out.
1:50
That's much better and it looks vertically
centered in this element.
1:57
So, this author name, I want it to be less
excentuated then the title here.
2:00
So, to do that we'll give it a different
color, so I head over to our H3 and
2:05
i'll add a color of 606060 which is a mid
gray, lets save it and check it out.
2:11
Awesome.
2:17
So, our title is now further extended
because it's color contrast is
2:18
much higher then the contrast of the
author name with the background.
2:21
The page is getting there, but
2:25
let's spice it up a bit by adding a burnt
orangish-red color to our h2's here.
2:26
So, do that, I'll head over to our H2 and
add a color of AE372E.
2:32
Let's save and check it out.
2:37
With Mars being the red planet, I thought
it's appropriate.
2:41
This color has good contrast with the
background and
2:44
distinguishes our headings further while
adding a variety to the design.
2:47
I'm going to stop here with color as I
don't want to go overboard.
2:51
Too many colors can make it hard for
2:55
users to understand typographic hierarchy
and clutter up the design.
2:56
Smart color hierarchy can help users
recognize patterns within the page.
3:01
Links should look like links and other
elements should not.
3:05
If similar colors are used,
3:09
then users may think something is
clickable when in fact it's not.
3:11
Keeping heading colors persistent can also
aid readers in recognizing them quicker.
3:15
One last note on color, a poplar trend on
websites today is to
3:21
utilize a background image with white text
over the top.
3:24
This can be elegant and magazine-like.
3:28
Just make sure there's enough contrast
between the type and
3:30
the image no matter the screen size.
3:33
You can handle this in CSS by slightly
fading the background image to
3:36
a solid black or edit the photo in a
design program to make sure
3:39
it's subtly dark enough in the necessary
areas where type will be overlaid.
3:43
Lastly, let's look at how we can establish
hierarchy through
3:49
paring different type faces.
3:52
Earlier, we talked about how to choose a
type face so we're working under
3:54
the understanding that we should pair it
based on the text type face we've chosen.
3:57
Type face pairs aren't always necessary
and beginners are sometimes encourages to
4:02
only use one type face in order to really
learn the ins and outs of good typography.
4:06
Until, they're ready to start pairing.
4:11
Typography gets harder to execute well
once you throw two or
4:13
more in the mix, but it's well worth the
variety.
4:16
Here's some basic pairing rules to go by.
4:19
First, pair typefaces with similar
proportions.
4:22
This means taking into account what we
learned about letter forms from our
4:25
first stage.
4:29
A San Serif typeface with a similar x
height, portions, and
4:30
contrasts to a Serif typeface compare well
together.
4:34
You can even utilize super families that
have multiple weights of Sans and
4:38
Serif counterparts that work great with
one another.
4:42
Pair typefaces with complementary
personalities.
4:45
Besides the fact that it's incredibly
helpful, one of the things I
4:48
really like about Hoefler & Co's technique
for combining fonts,
4:51
is how they talk about their typefaces as
personalities, or moods.
4:55
As you pair typefaces, try to classify the
mood each one is conveying and see if
4:59
they jive and play well together, pair
typefaces from the same historical period.
5:03
Jessica Hish, who's immersive article on
typography is linked in
5:08
the teacher's notes, has some great
thoughts on this.
5:11
If you're building a site focused around a
certain time period, then research and
5:15
find out as much as you can about
typefaces in that era.
5:19
You might even find some pics of
storefronts or
5:23
signs with a great typeface pair for
inspiration.
5:25
Pair typefaces from the same designer.
5:28
Type designers often have a certain style
that can be found throughout each of
5:31
their typefaces.
5:35
The style is the common bond that holds
the two or more together.
5:36
This especially works in your favor if
they have a vast array of
5:40
family's to choose from.
5:43
Last, explore more.
5:44
Try out different combinations.
5:48
Sometimes, you can stumble upon a typeface
pair you wouldn't have imagined worked.
5:50
They're like chicken and waffles.
5:54
You definitely thought they wouldn't go
together, but oh, they do.
5:56
A great site that I love to peruse is
called fontsinuse.com.
6:00
It catalogs different typefaces used in
print, web, and all types of media.
6:04
It's great for inspiration on different
type combinations and pairs.
6:09
All right, let's look at our workspace one
more time.
6:13
I've chosen a typeface for the title of
our page, whose personality I
6:16
think pairs well with the theme of our
content, and are serif type base Alegria.
6:19
It's called Pathway Gothic One, and can be
found on Google Fonts.
6:24
Notice that it doesn't have a bunch of
weights and
6:28
styles, but that's okay, because we only
have this one, specific use for it.
6:30
I chose it due to it's tall letter forms,
and no nonsense look.
6:34
I mean, if the world's at war, then we're
not messing around, right?
6:38
Its tough and
6:41
classy personality compliments Alegreya's
elegant and energetic letterforms.
6:42
I'll add this to our collection.
6:47
And, notice when I click use, I've also
added all our other web
6:49
fonts here because I just wanted to see
how this was affecting our page load.
6:52
And, we're right between the green and the
yellow, so that means we're good to go.
6:56
So, I'll copy this code which includes a
call to all our
7:01
different we fonts in one link and we'll
remove our past ones and
7:04
just paste this one right above our style
sheet and hit save.
7:08
Great.
7:12
So, we'll also want to grab the font
family code for pathway gothic one.
7:12
And then, let's add that to our H1 in our
CSS.
7:17
I'll also give it a fallback of impact as
it's a similar system font.
7:23
We'll save and refresh our page.
7:28
Great.
So, our type is getting called in but
7:31
now I want to adjust our size a bit.
7:33
So, let's set each one to have a font size
of 6.2 M.
7:35
And, let's adjust the bottom margin to
point one so
7:39
that our author name is snug underneath
it.
7:42
Let's refresh and check it out.
7:45
All right, it looks great.
7:48
I really like this type face pair.
7:49
And, I feel like the body copy keeps our
book vibe intact while the title gives it
7:51
an authoritative look that fits the
content.
7:55
It almost feels like a newspaper declaring
the headline, that's it for hierarchy.
7:59
Remember, it's about balancing and
8:04
utilizing these different techniques
wisely.
8:07
Block quotes, headings, meta data,
navigation, and
8:09
more are all at your disposal to style.
8:12
So, design wisely, with clear hierarchy.
8:15
To close this session, I want to give you
some encouragement.
8:18
In an article on typekit, Frank Camiro
says, I'd suggest that most great
8:21
examples of fine typography are merely
designs that have wise type face choices
8:26
savvy use of space and a clear hierarchy
that's echoed throughout the structure and
8:31
presentation of the text.
8:35
You now know how to do all those things
with what you've learned from
8:37
the past few stages.
8:40
It'll take some practice for sure, but the
groundwork is there.
8:41
Go celebrate.
8:45
Andm when you come back, I'll be waiting
for you in our next video on how to
8:46
translate all this to different screen
sizes through responsive design
8:49
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