1 00:00:00,490 --> 00:00:04,270 We just looked at how to create typographic hierarchy through weight, 2 00:00:04,270 --> 00:00:06,850 style, size and position. 3 00:00:06,850 --> 00:00:08,630 Now we'll continue on with that scheme, 4 00:00:08,630 --> 00:00:11,930 seeing how we can accomplish it through caps, color and pairing. 5 00:00:13,290 --> 00:00:17,850 First, let's talk about caps or uppercase and small cap characters. 6 00:00:17,850 --> 00:00:21,580 Think about an email or text message that you received that was in all caps. 7 00:00:21,580 --> 00:00:25,030 That probably felt like someone was either declaring something important or 8 00:00:25,030 --> 00:00:26,150 shouting at you. 9 00:00:26,150 --> 00:00:29,950 Setting type in capital letters can create emphasis, authority or 10 00:00:29,950 --> 00:00:31,930 hierarchy in your design. 11 00:00:31,930 --> 00:00:36,420 If you overuse them, or commit the hideous crime of saying all your body copy in 12 00:00:36,420 --> 00:00:40,660 them, then legibility and readability will be seriously compromised. 13 00:00:40,660 --> 00:00:44,180 They're best used in small doses, like short headlines, or 14 00:00:44,180 --> 00:00:47,620 a title, or in the navigation to give it an official look. 15 00:00:47,620 --> 00:00:49,290 Let's go back to our workspace and 16 00:00:49,290 --> 00:00:53,860 set the title of our site to be in all caps to give it some authority. 17 00:00:53,860 --> 00:00:57,580 I'll head over to our CSS, and to do that, we'll set our h1. 18 00:00:57,580 --> 00:01:00,240 To have a text transform property of uppercase. 19 00:01:03,700 --> 00:01:04,870 We'll save that and check it out. 20 00:01:06,280 --> 00:01:06,780 Great. 21 00:01:06,780 --> 00:01:08,290 I like how that's looking. 22 00:01:08,290 --> 00:01:13,810 Also, notice how I didn't write The War of the Worlds in all caps in our HTML. 23 00:01:13,810 --> 00:01:15,570 I simply left it as it was. 24 00:01:15,570 --> 00:01:18,970 It'd be bad practice if I did that, so always style your all caps or 25 00:01:18,970 --> 00:01:21,020 uppercase through your CSS. 26 00:01:21,020 --> 00:01:25,750 We can also use small caps to spice up and add hierarchy to a design. 27 00:01:25,750 --> 00:01:28,620 They're a little less in your face than all caps. 28 00:01:28,620 --> 00:01:32,420 In case you're not familiar with small caps, they look like upper case characters 29 00:01:32,420 --> 00:01:37,430 created near a lower case size, often slightly above the x-height of a typeface. 30 00:01:37,430 --> 00:01:40,610 They're not just scaled down versions of the upper case. 31 00:01:40,610 --> 00:01:45,200 Their weight and spacing has been finessed to match the overall font. 32 00:01:45,200 --> 00:01:47,920 If your type face doesn't have a small caps version, 33 00:01:47,920 --> 00:01:52,170 then CSS has the ability to fake it with the font variant property. 34 00:01:52,170 --> 00:01:55,510 But, like faux weights and styles, it isn't very pretty. 35 00:01:55,510 --> 00:01:59,630 I would not recommend using that property, if at all possible. 36 00:01:59,630 --> 00:02:03,840 Small caps are also used for abbreviations like CSS or W3C. 37 00:02:03,840 --> 00:02:08,410 Official titles, like The President of the United States. 38 00:02:08,410 --> 00:02:10,380 Headings, like the title for a post. 39 00:02:10,380 --> 00:02:13,850 Or the opening line of a book chapter or blog article. 40 00:02:13,850 --> 00:02:15,630 They work great with upper case and 41 00:02:15,630 --> 00:02:18,770 lower case letters, along with old style figures. 42 00:02:18,770 --> 00:02:21,530 They also flow well and body copy because of 43 00:02:21,530 --> 00:02:25,700 their less obtrusive nature due to their height being closer to the x height. 44 00:02:26,980 --> 00:02:30,140 Let's see them in action on Jessica Hische's site. 45 00:02:30,140 --> 00:02:34,210 She uses small caps to great avail as she denotes the categories showcasing her 46 00:02:34,210 --> 00:02:35,350 recent work. 47 00:02:35,350 --> 00:02:39,160 Then, on our articles, she uses them to introduce the line under the heading. 48 00:02:39,160 --> 00:02:43,370 And she also adds a nice drop cap element here to give a good style. 49 00:02:43,370 --> 00:02:47,350 The good news is, we've chosen a type face with small caps. 50 00:02:47,350 --> 00:02:51,490 If we type in Alegreya on Google fonts, we see below our regular version, 51 00:02:51,490 --> 00:02:55,560 we have Alegreya SE, or Alegreya small caps. 52 00:02:55,560 --> 00:02:58,740 I want add this to our collection and click use. 53 00:02:58,740 --> 00:03:03,560 I only want the normal version of the type face so we wont slow down page load time. 54 00:03:03,560 --> 00:03:07,000 If we were self hosting these fonts then we could save page load time by 55 00:03:07,000 --> 00:03:11,890 subsetting the small caps web font to only have the small cap characters. 56 00:03:11,890 --> 00:03:16,390 That way, we're not wasting space by loading duplicate characters like caps, 57 00:03:16,390 --> 00:03:18,170 numbers and symbols. 58 00:03:18,170 --> 00:03:21,100 But since we are loading it through google fonts we have to use what they've 59 00:03:21,100 --> 00:03:22,530 already provided. 60 00:03:22,530 --> 00:03:25,970 So, I'll scroll down and we'll grab the link and 61 00:03:25,970 --> 00:03:30,470 paste this into the head of our HTML right above our style sheet. 62 00:03:30,470 --> 00:03:33,420 And notice I've already set up some spans with classes of 63 00:03:33,420 --> 00:03:37,700 small caps to these intro lines underneath our headings. 64 00:03:37,700 --> 00:03:41,680 Now, we wanna head over to our CSS and set up that small caps class. 65 00:03:41,680 --> 00:03:46,270 So, let's head over to Google and grab the code that we would want for 66 00:03:46,270 --> 00:03:47,170 the font family. 67 00:03:48,650 --> 00:03:50,780 We'll paste that into our small caps area. 68 00:03:50,780 --> 00:03:55,340 And then, here, I'm gonna write Alegreya as a fallback. 69 00:03:55,340 --> 00:03:58,250 And then, Georgia, as a fallback. 70 00:03:58,250 --> 00:04:01,861 [BLANK_AUDIO] 71 00:04:01,861 --> 00:04:05,735 If we had subset our font to only have small cap characters, then 72 00:04:05,735 --> 00:04:11,049 this fallback would also guarantee the non small cap characters would load correctly, 73 00:04:11,049 --> 00:04:13,450 from the regular version of Alegreya. 74 00:04:14,580 --> 00:04:19,560 Let's save and check it out. 75 00:04:19,560 --> 00:04:20,090 yeah. 76 00:04:20,090 --> 00:04:21,510 So, that's startin' to jive well. 77 00:04:21,510 --> 00:04:24,580 I really like how that's looking here and here. 78 00:04:24,580 --> 00:04:26,720 It's giving it a really nice vibe. 79 00:04:26,720 --> 00:04:29,140 Let's take a hint from Jessica Hische's site and 80 00:04:29,140 --> 00:04:32,290 add a drop cap to our first letter here. 81 00:04:32,290 --> 00:04:33,530 We'll head back to our CSS. 82 00:04:34,760 --> 00:04:38,800 And notice in our html I've already set up this span class with a drop cap for 83 00:04:38,800 --> 00:04:40,620 just that first letter n. 84 00:04:40,620 --> 00:04:45,150 So in our style sheet we can go in and style out that drop cap class. 85 00:04:45,150 --> 00:04:48,610 So I'll give it a font size of 5.4 m so it's a bit bigger. 86 00:04:48,610 --> 00:04:50,410 A display of black. 87 00:04:52,480 --> 00:04:53,390 Float it to the left. 88 00:04:54,490 --> 00:04:57,835 Give it a width of .8 so it'll have some good space around it and 89 00:04:57,835 --> 00:05:03,770 a height of .7 m and then a line height of .8 and a margin of zero. 90 00:05:05,190 --> 00:05:07,030 Lets go check out what that looks like. 91 00:05:07,030 --> 00:05:11,170 When i refresh we see our drop cap is now in action and is looking great. 92 00:05:11,170 --> 00:05:15,870 Notice how it aligns with the top of the text and the third line's base line. 93 00:05:15,870 --> 00:05:19,210 But it's now the biggest piece of type on the page. 94 00:05:19,210 --> 00:05:21,240 Don't worry, that'll soon change.