Typographic Hierarchy: Caps and Color9:45 with Hope Armstrong
To continue on the theme of hierarchy, we’ll look at how you achieve it through caps and color.
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 up