Typographic Hierarchy: Caps, Color, and Pairing Typefaces

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