Typographic Hierarchy: Caps, Color, and Pairing Typefaces - Part 28:53 with Mattox Shuler
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.
Next, let's see what we can do with color. 0:00 I won't go too in-depth with color theory, 0:03 as that's covered in Treehouse's design courses. 0:05 But, let's look at how to utilize color with type. 0:08 First, you wanna make sure type over any element, 0:10 whether it's the whole background or a small content block, has good contrast. 0:13 if the contrast is too low, then the type and 0:19 its background color will start to blend together, making it hard to decipher. 0:21 If it's too high, 0:26 you can tire out readers' eyes due to the bright nature of screens. 0:27 Pure black and white work well in print, but on the web, you should 0:31 stick to a more subtle black when set on a white background, and vice-versa. 0:35 Our example page has a grayish-black of number 333. 0:39 And, a wide of number F9F9F9. 0:43 Almost all popular content heavy websites utilize a light background with dark text 0:46 for their main body copy versus a dark background with light text. 0:51 Don't forget to take into account color blindness and 0:54 accessibility with this concept of contrast. 0:57 With typographic hierarchy, 1:01 more contrast will grab attention whereas subtler contrast will blend in. 1:02 Another way to think about this is the primary, or important pieces of content 1:07 should be easily noticed whereas secondary pieces can blend in more with the design. 1:11 All right, let's jump back into our workspace. 1:16 I want to give our main title and 1:18 author name a different background color than the rest of the text. 1:20 So, to do that, I'll head over to here and we see we're now in the fifth folder and 1:24 I have our index and style open. 1:28 And, we can set our background for our title class to be 1e1e, 1:30 which is a subtle black, and the color of the type to be f9f9f9. 1:35 We'll save that and check it out. 1:38 Great. So, it's looking good. 1:44 But, we now need to add some space below the author name here. 1:45 So, to do that, 1:49 we'll simply add padding bottom of 5 M to our title class an lets check that out. 1:50 That's much better and it looks vertically centered in this element. 1:57 So, this author name, I want it to be less excentuated then the title here. 2:00 So, to do that we'll give it a different color, so I head over to our H3 and 2:05 i'll add a color of 606060 which is a mid gray, lets save it and check it out. 2:11 Awesome. 2:17 So, our title is now further extended because it's color contrast is 2:18 much higher then the contrast of the author name with the background. 2:21 The page is getting there, but 2:25 let's spice it up a bit by adding a burnt orangish-red color to our h2's here. 2:26 So, do that, I'll head over to our H2 and add a color of AE372E. 2:32 Let's save and check it out. 2:37 With Mars being the red planet, I thought it's appropriate. 2:41 This color has good contrast with the background and 2:44 distinguishes our headings further while adding a variety to the design. 2:47 I'm going to stop here with color as I don't want to go overboard. 2:51 Too many colors can make it hard for 2:55 users to understand typographic hierarchy and clutter up the design. 2:56 Smart color hierarchy can help users recognize patterns within the page. 3:01 Links should look like links and other elements should not. 3:05 If similar colors are used, 3:09 then users may think something is clickable when in fact it's not. 3:11 Keeping heading colors persistent can also aid readers in recognizing them quicker. 3:15 One last note on color, a poplar trend on websites today is to 3:21 utilize a background image with white text over the top. 3:24 This can be elegant and magazine-like. 3:28 Just make sure there's enough contrast between the type and 3:30 the image no matter the screen size. 3:33 You can handle this in CSS by slightly fading the background image to 3:36 a solid black or edit the photo in a design program to make sure 3:39 it's subtly dark enough in the necessary areas where type will be overlaid. 3:43 Lastly, let's look at how we can establish hierarchy through 3:49 paring different type faces. 3:52 Earlier, we talked about how to choose a type face so we're working under 3:54 the understanding that we should pair it based on the text type face we've chosen. 3:57 Type face pairs aren't always necessary and beginners are sometimes encourages to 4:02 only use one type face in order to really learn the ins and outs of good typography. 4:06 Until, they're ready to start pairing. 4:11 Typography gets harder to execute well once you throw two or 4:13 more in the mix, but it's well worth the variety. 4:16 Here's some basic pairing rules to go by. 4:19 First, pair typefaces with similar proportions. 4:22 This means taking into account what we learned about letter forms from our 4:25 first stage. 4:29 A San Serif typeface with a similar x height, portions, and 4:30 contrasts to a Serif typeface compare well together. 4:34 You can even utilize super families that have multiple weights of Sans and 4:38 Serif counterparts that work great with one another. 4:42 Pair typefaces with complementary personalities. 4:45 Besides the fact that it's incredibly helpful, one of the things I 4:48 really like about Hoefler & Co's technique for combining fonts, 4:51 is how they talk about their typefaces as personalities, or moods. 4:55 As you pair typefaces, try to classify the mood each one is conveying and see if 4:59 they jive and play well together, pair typefaces from the same historical period. 5:03 Jessica Hish, who's immersive article on typography is linked in 5:08 the teacher's notes, has some great thoughts on this. 5:11 If you're building a site focused around a certain time period, then research and 5:15 find out as much as you can about typefaces in that era. 5:19 You might even find some pics of storefronts or 5:23 signs with a great typeface pair for inspiration. 5:25 Pair typefaces from the same designer. 5:28 Type designers often have a certain style that can be found throughout each of 5:31 their typefaces. 5:35 The style is the common bond that holds the two or more together. 5:36 This especially works in your favor if they have a vast array of 5:40 family's to choose from. 5:43 Last, explore more. 5:44 Try out different combinations. 5:48 Sometimes, you can stumble upon a typeface pair you wouldn't have imagined worked. 5:50 They're like chicken and waffles. 5:54 You definitely thought they wouldn't go together, but oh, they do. 5:56 A great site that I love to peruse is called fontsinuse.com. 6:00 It catalogs different typefaces used in print, web, and all types of media. 6:04 It's great for inspiration on different type combinations and pairs. 6:09 All right, let's look at our workspace one more time. 6:13 I've chosen a typeface for the title of our page, whose personality I 6:16 think pairs well with the theme of our content, and are serif type base Alegria. 6:19 It's called Pathway Gothic One, and can be found on Google Fonts. 6:24 Notice that it doesn't have a bunch of weights and 6:28 styles, but that's okay, because we only have this one, specific use for it. 6:30 I chose it due to it's tall letter forms, and no nonsense look. 6:34 I mean, if the world's at war, then we're not messing around, right? 6:38 Its tough and 6:41 classy personality compliments Alegreya's elegant and energetic letterforms. 6:42 I'll add this to our collection. 6:47 And, notice when I click use, I've also added all our other web 6:49 fonts here because I just wanted to see how this was affecting our page load. 6:52 And, we're right between the green and the yellow, so that means we're good to go. 6:56 So, I'll copy this code which includes a call to all our 7:01 different we fonts in one link and we'll remove our past ones and 7:04 just paste this one right above our style sheet and hit save. 7:08 Great. 7:12 So, we'll also want to grab the font family code for pathway gothic one. 7:12 And then, let's add that to our H1 in our CSS. 7:17 I'll also give it a fallback of impact as it's a similar system font. 7:23 We'll save and refresh our page. 7:28 Great. So, our type is getting called in but 7:31 now I want to adjust our size a bit. 7:33 So, let's set each one to have a font size of 6.2 M. 7:35 And, let's adjust the bottom margin to point one so 7:39 that our author name is snug underneath it. 7:42 Let's refresh and check it out. 7:45 All right, it looks great. 7:48 I really like this type face pair. 7:49 And, I feel like the body copy keeps our book vibe intact while the title gives it 7:51 an authoritative look that fits the content. 7:55 It almost feels like a newspaper declaring the headline, that's it for hierarchy. 7:59 Remember, it's about balancing and 8:04 utilizing these different techniques wisely. 8:07 Block quotes, headings, meta data, navigation, and 8:09 more are all at your disposal to style. 8:12 So, design wisely, with clear hierarchy. 8:15 To close this session, I want to give you some encouragement. 8:18 In an article on typekit, Frank Camiro says, I'd suggest that most great 8:21 examples of fine typography are merely designs that have wise type face choices 8:26 savvy use of space and a clear hierarchy that's echoed throughout the structure and 8:31 presentation of the text. 8:35 You now know how to do all those things with what you've learned from 8:37 the past few stages. 8:40 It'll take some practice for sure, but the groundwork is there. 8:41 Go celebrate. 8:45 Andm when you come back, I'll be waiting for you in our next video on how to 8:46 translate all this to different screen sizes through responsive design 8:49
You need to sign up for Treehouse in order to download course files.Sign up