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.
Using Small Caps and Text Figures on the Web, Dmitry Fadeyev
Upping Your Type Game, Jessica Hische
Color, Practical Typography
Combining Typefaces, Tim Brown
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 to create
typographic hierarchy through weight,
0:00
style, size and position.
0:04
Now we'll continue on with that scheme,
0:06
seeing how we can accomplish it through
caps, color and pairing.
0:08
First, let's talk about caps or uppercase
and small cap characters.
0:13
Think about an email or text message that
you received that was in all caps.
0:17
That probably felt like someone was either
declaring something important or
0:21
shouting at you.
0:25
Setting type in capital letters can create
emphasis, authority or
0:26
hierarchy in your design.
0:29
If you overuse them, or commit the hideous
crime of saying all your body copy in
0:31
them, then legibility and readability will
be seriously compromised.
0:36
They're best used in small doses, like
short headlines, or
0:40
a title, or in the navigation to give it
an official look.
0:44
Let's go back to our workspace and
0:47
set the title of our site to be in all
caps to give it some authority.
0:49
I'll head over to our CSS, and to do that,
we'll set our h1.
0:53
To have a text transform property of
uppercase.
0:57
We'll save that and check it out.
1:03
Great.
1:06
I like how that's looking.
1:06
Also, notice how I didn't write The War of
the Worlds in all caps in our HTML.
1:08
I simply left it as it was.
1:13
It'd be bad practice if I did that, so
always style your all caps or
1:15
uppercase through your CSS.
1:18
We can also use small caps to spice up and
add hierarchy to a design.
1:21
They're a little less in your face than
all caps.
1:25
In case you're not familiar with small
caps, they look like upper case characters
1:28
created near a lower case size, often
slightly above the x-height of a typeface.
1:32
They're not just scaled down versions of
the upper case.
1:37
Their weight and spacing has been finessed
to match the overall font.
1:40
If your type face doesn't have a small
caps version,
1:45
then CSS has the ability to fake it with
the font variant property.
1:47
But, like faux weights and styles, it
isn't very pretty.
1:52
I would not recommend using that property,
if at all possible.
1:55
Small caps are also used for abbreviations
like CSS or W3C.
1:59
Official titles, like The President of the
United States.
2:03
Headings, like the title for a post.
2:08
Or the opening line of a book chapter or
blog article.
2:10
They work great with upper case and
2:13
lower case letters, along with old style
figures.
2:15
They also flow well and body copy because
of
2:18
their less obtrusive nature due to their
height being closer to the x height.
2:21
Let's see them in action on Jessica
Hische's site.
2:26
She uses small caps to great avail as she
denotes the categories showcasing her
2:30
recent work.
2:34
Then, on our articles, she uses them to
introduce the line under the heading.
2:35
And she also adds a nice drop cap element
here to give a good style.
2:39
The good news is, we've chosen a type face
with small caps.
2:43
If we type in Alegreya on Google fonts, we
see below our regular version,
2:47
we have Alegreya SE, or Alegreya small
caps.
2:51
I want add this to our collection and
click use.
2:55
I only want the normal version of the type
face so we wont slow down page load time.
2:58
If we were self hosting these fonts then
we could save page load time by
3:03
subsetting the small caps web font to only
have the small cap characters.
3:07
That way, we're not wasting space by
loading duplicate characters like caps,
3:11
numbers and symbols.
3:16
But since we are loading it through google
fonts we have to use what they've
3:18
already provided.
3:21
So, I'll scroll down and we'll grab the
link and
3:22
paste this into the head of our HTML right
above our style sheet.
3:25
And notice I've already set up some spans
with classes of
3:30
small caps to these intro lines underneath
our headings.
3:33
Now, we wanna head over to our CSS and set
up that small caps class.
3:37
So, let's head over to Google and grab the
code that we would want for
3:41
the font family.
3:46
We'll paste that into our small caps area.
3:48
And then, here, I'm gonna write Alegreya
as a fallback.
3:50
And then, Georgia, as a fallback.
3:55
[BLANK_AUDIO]
3:58
If we had subset our font to only have
small cap characters, then
4:01
this fallback would also guarantee the non
small cap characters would load correctly,
4:05
from the regular version of Alegreya.
4:11
Let's save and check it out.
4:14
yeah.
4:19
So, that's startin' to jive well.
4:20
I really like how that's looking here and
here.
4:21
It's giving it a really nice vibe.
4:24
Let's take a hint from Jessica Hische's
site and
4:26
add a drop cap to our first letter here.
4:29
We'll head back to our CSS.
4:32
And notice in our html I've already set up
this span class with a drop cap for
4:34
just that first letter n.
4:38
So in our style sheet we can go in and
style out that drop cap class.
4:40
So I'll give it a font size of 5.4 m so
it's a bit bigger.
4:45
A display of black.
4:48
Float it to the left.
4:52
Give it a width of .8 so it'll have some
good space around it and
4:54
a height of .7 m and then a line height of
.8 and a margin of zero.
4:57
Lets go check out what that looks like.
5:05
When i refresh we see our drop cap is now
in action and is looking great.
5:07
Notice how it aligns with the top of the
text and the third line's base line.
5:11
But it's now the biggest piece of type on
the page.
5:15
Don't worry, that'll soon change.
5:19
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