Introducing Typographic Hierarchy5:13 with Hope Armstrong
Now let's explore more advanced techniques like creating typographic hierarchy.
- Meg Lewis talk - Creative Mornings
- One Step Ahead: we meet Paula Scher, the trailblazing Pentagram Partner - It's Nice That
- Whitespace, Mark Boulton
[MUSIC] 0:00 All right, you made it this far, good work. 0:04 If all this talk about type hasn't gotten you excited already, then just you wait. 0:08 In this stage, we'll look at the different ways you can lay out type in a design. 0:13 First up is typographic hierarchy. 0:18 This concept is crucial to seamlessly guide readers through our page's content. 0:20 Hierarchy helps users to understand what information is most important 0:26 to what's secondary, tertiary, and so forth. 0:30 In this video, we'll look at how to do this with weight, style, size, and 0:34 position. 0:39 In the next, we'll continue on the theme of hierarchy with color and 0:40 pairing typefaces. 0:44 Before we jump in, 0:46 let's check out all of these concepts in action at creativemornings.com. 0:48 Let's say I wanted to watch this talk that Meg Lewis did in Minneapolis. 0:53 Immediately, I'm presented with an array of information that's been arranged with 0:58 hierarchy in mind. 1:02 First, my eyes gravitate towards what's biggest, boldest, and darkest on the page, 1:04 the speaker's name. 1:09 This is the most important piece of information here, and 1:11 Creative Morning lets you easily know it. 1:14 Next, my eyes naturally continue reading and 1:18 move downward to the title of the talk. 1:21 This is of next importance after the speaker name. 1:24 It's smaller, but still prominent. 1:27 My eyes are then drawn to the bright block of color holding the white text of 1:31 the city code. 1:35 It's a nice touch. 1:37 After I've taken all that in and considered if I'm still interested, 1:39 then I can make my way down to the smaller secondary information and 1:43 read more about this speaker and where exactly the talk was, and 1:47 some more information about what the talk was about. 1:52 We see bold type, multiple sizes, different colors, different positions, 1:55 and different typefaces utilized to convey the hierarchy of information on the page. 2:00 The combination is not only useful to the user, it's also downright good-looking. 2:07 These concepts can be incredibly powerful to create useful, beautiful websites. 2:12 But they can also get out of hand pretty fast if we don't know what we're doing. 2:17 Before you begin selling anything, it's smart to familiarize yourself with 2:23 the site's content to get an overall big picture of everything involved. 2:27 It's often helpful to sketch out a wireframe and then go about numbering 2:33 content elements, starting with, one, what's of most importance, two, what's 2:38 of next importance, and so forth until every piece of content has been labeled. 2:43 This system will inform us on how we can utilize typography to accentuate our 2:49 different pieces of content. 2:53 We can create hierarchies simply by weighting certain blocks of text. 2:56 A reader's eyes will be drawn to the boulder elements on the page. 3:01 This hierarchy helps readers make connections between the content and 3:05 relate certain sections. 3:09 Speaking of sections, typography is as much about the treatment of the text 3:12 as it is with the space surrounding the text. 3:17 Thus, the importance of white space. 3:20 White space is empty space without content, and 3:23 it plays a key role in the readability of a design. 3:27 It gives the reader space to rest their eyes, 3:30 which reduces the feeling of information overload. 3:33 Let's look at the white space of the left and right of our type. 3:37 Margins or padding should be used to give your type room to breathe. 3:41 If a sentence comes too close to another element, 3:45 then it can disrupt the flow of reading. 3:48 White space is often underutilized in web design, which results in cramped and 3:51 cluttered layouts. 3:56 Also, it should be noted that white space doesn't have to be white. 3:57 If you have a dark background with lighter text, 4:03 we would still call that area around the text white space. 4:07 Let's check out a good example of white space. 4:11 Here's an article on itsnicethat.com, a creative inspiration blog. 4:14 It's about Paula Scher, a renowned graphic designer. 4:19 Notice how there are ample amounts of white space around the type, 4:24 the words are not closing in on borders, they're giving room to live and breathe. 4:28 As you can see, white space can clean up a design and give it an elegant, 4:34 professional feel. 4:38 You can also emphasize content by framing it with an empty space. 4:40 Now, watch as the white space changes as I resize the browser window. 4:45 The content shifts into one column and the white space is maintained, 4:52 although in different proportions to fit comfortably on mobile. 4:56 All right, now that certainly got me excited about hierarchy. 5:03 In the next video, let's explore what we can do with style, weight, 5:07 size, and position. 5:11
You need to sign up for Treehouse in order to download course files.Sign up