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
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