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 caps and color.
Resources
- Using Small Caps and Text Figures on the Web, Dmitry Fadeyev
- Upping Your Type Game, Jessica Hische
- Color, Practical Typography
- WebAIM contrast checker - Free web-based color contrast tool
- Contrast - A macOS app for quick access to WCAG color contrast ratios
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
We just looked at how we can create
typographic hierarchy through weight,
0:00
style, size, and color.
0:04
Now we'll continue with that theme,
0:06
seeing how we can establish
it through caps and color.
0:08
First, let's talk about caps and
small cap characters.
0:12
Think about an email or
text you receive that was an all caps.
0:16
That probably felt like someone was
either declaring something important or
0:20
shouting at you, right?
0:24
Setting type in capital
letters can create emphasis,
0:26
authority, or hierarchy in your design.
0:29
If you overuse them or commit a hideous
crime of setting all your body copy in
0:33
them, then legibility and
readability will seriously be compromised.
0:37
Their best use in small doses like
a short headline or a title and
0:42
the navigation to give
it an official look.
0:47
We can also utilize small caps to spice
up and add hierarchy to a design.
0:50
They're a little less in
your face than all caps.
0:56
In case you're not familiar with small
caps, they look like uppercase characters
0:59
created near a lowercase size, often
slightly above the X height of a typeface.
1:05
They're not just scaled down
versions of the uppercase,
1:10
their weight and spacing have been
finessed to match the overall font.
1:14
Some design programs have a way to fake
the small caps, but I don't recommend it.
1:19
Like faux weights and
styles, it ain't pretty.
1:24
Small caps are used for
abbreviations like ASAP, official titles,
1:27
like the president of the United States,
headings like the title for
1:33
a post, or the opening line of
a book chapter or blog article.
1:38
They work great with uppercase and
lowercase letters,
1:42
along with old style figures.
1:46
They also flow great in body copy
because of their less obtrusive nature,
1:48
due to their height being
closer to the x height.
1:54
Let's see them in action
on Jessica Hische's site.
1:58
She uses small caps to great avail
as she denotes the categories
2:01
showcasing her recent work.
2:05
Here, she opens the paragraph
with a line set in small caps,
2:07
and she also uses a nice drop cap for
the beginning letter of the text.
2:11
A drop cap is a large capital letter that
typically spans the height of two or
2:16
more lines of body text.
2:22
We'll take note of this to use in
our design just a bit, but first,
2:23
let's look at small caps.
2:26
To use small caps, first make sure
the font includes support for small caps.
2:27
The good news is that Alegreya,
the typeface we've chosen,
2:34
has small caps available in
its sister family Alegreya SC.
2:38
Let's choose Jessica's
site as inspiration and
2:42
add small caps to the start
of each paragraph.
2:46
Small caps are typically
applied to the first line or
2:49
simply just the first complete
thought in the first line.
2:53
With the text selected,
go to type details and
2:58
choose small caps from
the letter case section
3:00
Yeah, this is starting to jive really well
3:24
Let's add a drop cap to our text to
give it extra emphasis and style.
3:30
There currently isn't an easy
way to do this in Figma.
3:35
You have to craft each piece.
3:38
I started by breaking out the N
into it's own text block.
3:40
Then I made its text size 108 pixels so
it spans three lines of text.
3:49
Next, I duplicated the first
part of the paragraph and
3:56
cropped down the first three rows.
3:59
I positioned the rest of
the paragraph underneath.
4:04
Now it appears as if it's
wrapping around the drop cap.
4:07
It accentuates the first paragraph, but
4:12
it's now the biggest piece
of typo on the page.
4:14
Don't worry, that'll soon change.
4:17
Let's look at how to
utilize color with type.
4:19
First, you want to make sure
the text color has good contrast
4:24
with its background color.
4:29
If the contrast is too
low than the type and
4:31
its background color will start to blend
together making it hard to decipher.
4:34
If it's too high then it can tire out or
4:38
readers eyes due to
the bright nature of screens.
4:40
Pure black and white work well
together in print, but on the web,
4:44
you should stick to a subtle black when
set on a white background and vice versa.
4:48
On this example page,
4:54
the text has a hex color code of
hashtag 333, which is a dark gray.
4:56
And the background is an off
white color at hashtag F9F9F9.
5:02
Almost all popular content heavy
websites utilize a light background
5:09
with dark text for their main body copy
versus a dark background with light text.
5:14
Don't forget to take into
account color blindness and
5:21
accessibility with this
concept of contrast.
5:24
Look in the teacher's notes for
a tool that will allow you to test for
5:27
color contrast scores.
5:31
You want a score of AAA for
maximum legibility, which is especially
5:32
helpful for long form text to be read for
a significant period of time.
5:38
A score of AA is a good goal for
body text.
5:43
AA large is the lowest amount
of contrast needed for
5:47
headlines or text around 18 pixels.
5:52
With typographic hierarchy,
5:56
more contrast will grab attention
whereas subtler contrast will blend in.
5:58
Another way to think about
this as the primary or
6:03
important pieces of content
should be easily noticed.
6:06
Whereas secondary pieces can
blend more with the design.
6:10
All right,
let's jump back into the project.
6:14
I want to give our title and author
name further distinction from the text.
6:18
To do this, I'll put a dark
background color behind the title.
6:23
I'll use a rectangle,
Align it to the baseline grid,
6:27
And set the fill to pound 1E1E1E,
6:36
a more subtle black.
6:41
Then I'll set the color of the type
two pound F9F9F9, a more subtle white.
6:44
Then I'll just align this
text back on to the baseline.
6:51
See how that looks?
7:01
All right, now I want to make
the author name a bit less
7:02
prominent by changing its color.
7:07
To do that, I'll set it to pound 999999,
which is a mid gray.
7:10
It's more subdued, yet still meets
the accessibility guidelines for
7:17
text contrast.
7:21
It scores at 5.85, great.
7:22
Now our title is further accentuated
because its color contrast is much
7:26
higher than the author's name.
7:31
The page is getting there, but
let's spice it up a little more by
7:33
adding a burnt orangish red
color to our heading two.
7:38
With Mars being the red planet,
I think it's fitting.
7:41
This color has good contrast
with the background and
7:47
distinguishes our headings further while
adding some variety to the design.
7:50
I'll set the body text to a dark gray,
pound 333.
7:55
Pure black on a white background
is hard on the eyes and
8:03
the gray gives it some new nuance.
8:06
I'm going to stop here with color
as I don't want to go over board.
8:08
Too many colors can make it hard for
8:12
users to understand typographic hierarchy
and it can clatter up a design.
8:14
Smart color hierarchy helps users
recognize patterns within the page.
8:20
Links should look like links and
other elements should not.
8:25
If similar colors are used,
8:29
then users may think something is
clickable when it in fact is not.
8:31
Keeping heading colors persistent can also
aid readers in recognizing them quicker.
8:35
Just be sure to not only rely on color
when signifying status or interactions.
8:41
Multiple indicators make
your design more accessible.
8:47
That's it for hierarchy.
8:50
Remember, it's all about balancing and
8:52
utilizing these different
techniques wisely.
8:55
Blockquotes, headings,
metadata, navigation, and more,
8:59
are all at your disposal to style.
9:04
So design wisely with a clear hierarchy.
9:07
To close this session,
I wanna give you some encouragement.
9:10
In an article on typekit ,Frank Chimero
says, I'd suggest that most great
9:14
examples of fine typography are merely
designs that have wise typeface choices,
9:19
savvy use of space, and a clear hierarchy
that's echoed through the structure and
9:24
presentation of the text.
9:30
You now know how to do all those things
with what you learn from the past
9:32
few stages.
9:37
It'll take some practice for sure,
but the groundwork is there.
9:37
In the next video,
I'll cover layout treatments.
9:41
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