We just looked at how to create typographic hierarchy through weight,

style, size and position.

Now we'll continue on with that scheme,

seeing how we can accomplish it through caps, color and pairing.

First, let's talk about caps or uppercase and small cap characters.

Think about an email or text message that you received that was in all caps.

That probably felt like someone was either declaring something important or

shouting at you.

Setting type in capital letters can create emphasis, authority or

hierarchy in your design.

If you overuse them, or commit the hideous crime of saying all your body copy in

them, then legibility and readability will be seriously compromised.

They're best used in small doses, like short headlines, or

a title, or in the navigation to give it an official look.

Let's go back to our workspace and

set the title of our site to be in all caps to give it some authority.

I'll head over to our CSS, and to do that, we'll set our h1.

To have a text transform property of uppercase.

We'll save that and check it out.

Great.

I like how that's looking.

Also, notice how I didn't write The War of the Worlds in all caps in our HTML.

I simply left it as it was.

It'd be bad practice if I did that, so always style your all caps or

uppercase through your CSS.

We can also use small caps to spice up and add hierarchy to a design.

They're a little less in your face than all caps.

In case you're not familiar with small caps, they look like upper case characters

created near a lower case size, often slightly above the x-height of a typeface.

They're not just scaled down versions of the upper case.

Their weight and spacing has been finessed to match the overall font.

If your type face doesn't have a small caps version,

then CSS has the ability to fake it with the font variant property.

But, like faux weights and styles, it isn't very pretty.

I would not recommend using that property, if at all possible.

Small caps are also used for abbreviations like CSS or W3C.

Official titles, like The President of the United States.

Headings, like the title for a post.

Or the opening line of a book chapter or blog article.

They work great with upper case and

lower case letters, along with old style figures.

They also flow well and body copy because of

their less obtrusive nature due to their height being closer to the x height.

Let's see them in action on Jessica Hische's site.

She uses small caps to great avail as she denotes the categories showcasing her

recent work.

Then, on our articles, she uses them to introduce the line under the heading.

And she also adds a nice drop cap element here to give a good style.

The good news is, we've chosen a type face with small caps.

If we type in Alegreya on Google fonts, we see below our regular version,

we have Alegreya SE, or Alegreya small caps.

I want add this to our collection and click use.

I only want the normal version of the type face so we wont slow down page load time.

If we were self hosting these fonts then we could save page load time by

subsetting the small caps web font to only have the small cap characters.

That way, we're not wasting space by loading duplicate characters like caps,

numbers and symbols.

But since we are loading it through google fonts we have to use what they've

already provided.

So, I'll scroll down and we'll grab the link and

paste this into the head of our HTML right above our style sheet.

And notice I've already set up some spans with classes of

small caps to these intro lines underneath our headings.

Now, we wanna head over to our CSS and set up that small caps class.

So, let's head over to Google and grab the code that we would want for

the font family.

We'll paste that into our small caps area.

And then, here, I'm gonna write Alegreya as a fallback.

And then, Georgia, as a fallback.

[BLANK_AUDIO]

If we had subset our font to only have small cap characters, then

this fallback would also guarantee the non small cap characters would load correctly,

from the regular version of Alegreya.

Let's save and check it out.

yeah.

So, that's startin' to jive well.

I really like how that's looking here and here.

It's giving it a really nice vibe.

Let's take a hint from Jessica Hische's site and

add a drop cap to our first letter here.

We'll head back to our CSS.

And notice in our html I've already set up this span class with a drop cap for

just that first letter n.

So in our style sheet we can go in and style out that drop cap class.

So I'll give it a font size of 5.4 m so it's a bit bigger.

A display of black.

Float it to the left.

Give it a width of .8 so it'll have some good space around it and

a height of .7 m and then a line height of .8 and a margin of zero.

Lets go check out what that looks like.

When i refresh we see our drop cap is now in action and is looking great.

Notice how it aligns with the top of the text and the third line's base line.

But it's now the biggest piece of type on the page.

Don't worry, that'll soon change.