Typographic Hierarchy: Weight, Style, Size, and Position

[MUSIC] 0:00 All right. 0:02 You've made it this far. 0:03 Good work. 0:07 If all this talk about type hasn't gotten you excited already, then you just wait. 0:08 In this stage, we'll look at the different ways you can lay out type for the web. 0:12 First up is Typographic Hierarchy. 0:16 This concept is crucial to seamlessly guide readers through a page's content. 0:19 Hierarchy helps users understand what information is 0:23 most important to what's secondary, tertiary, and so forth. 0:26 In this video, 0:30 we'll look at how to do this with weight, style, size, and position. 0:31 And then next, we'll continue on the theme of hierarchy with color and 0:34 pairing typefaces. 0:39 Before we jump in, 0:40 let's check out all of these concepts in action at CreativeMornings.com. 0:42 Let's say I wanted to attend this upcoming lecture in Los Angeles. 0:46 We're immediately presented with an array of information that's been 0:51 hierarchically arranged through typography. 0:54 First, my eyes gravitate towards what's biggest, boldest and darkest on the page. 0:57 The speaker names. 1:01 This is the most important piece of information here and 1:03 CreativeMornings lets you easily know it. 1:06 Next, my eyes naturally continue reading and 1:08 move downward towards the date, time and place. 1:11 This is of next importance after the speaker name. 1:14 It's smaller but still prominent. 1:17 My eyes are then drawn to the bright block of color holding a white text of 1:19 the city code. 1:23 It's a nice touch. 1:24 After I've taken all that in and consider if I'm still interested, 1:25 then I'm able to make my way down to the smaller secondary information. 1:28 And read more about the speakers and where exactly the talk will be. 1:32 We see bold type, multiple sizes, different colors, different positions, and 1:36 different type faces utilized to convey the hierarchy of information on the page. 1:40 It's a combination that's not only useful to the user, 1:46 it's also down right good looking. 1:49 These concepts can be incredibly powerful to create usable, beautiful websites. 1:51 But they can also get out of hand pretty fast if we don't know what we're doing. 1:55 Before you begin styling anything, it's smart to familiarize yourself with 1:59 the site's content to get an overall big picture of everything involved. 2:03 It's often helpful to print out the page unstyled, and then go about hierarchically 2:07 numbering content elements starting with one, what's of most importance. 2:11 Two, what's of next importance, and so 2:16 forth until every piece of content has been labelled. 2:18 You can even make note of what HTML elements would be appropriate for 2:21 each number like H1 or H2 or P. 2:25 This system will inform us on how we can utilize typography to accentuate our 2:28 different pieces of content. 2:32 This is often done in a wiring framing level of building a website. 2:34 Because most times, it can be quicker and 2:37 easier to change typography in a design program rather than in CSS. 2:39 With our current example from The War of the Worlds, we've been arranging and 2:44 changing the type as we go. 2:47 Let's begin by looking at how we can hierarchically set content apart 2:49 with weight, style, size and color. 2:52 We can create hierarchy simply by weighting certain blocks of texts. 2:56 Our reader's eyes will be drawn to the bolder elements on the page. 3:00 I've set up our workspace here to cover different concepts of hierarchy as we go. 3:04 In our first folder, I've replaced all our heading tags and 3:09 just made them paragraphs. 3:13 And I've also commented out the text indents in the CSS. 3:14 Currently, it looks like this. 3:18 So, the only hierarchy present is what comes first will be read first. 3:20 I've set the title class as bold here. 3:24 So let's go ahead and style out that class to have a font weight of bold. 3:26 We'll save and go check it out. 3:30 I've just emphasized that piece of element over everything else on the page. 3:32 A reader's eyes will naturally gravitate towards that because it 3:36 carries more weight than anything else on the page. 3:39 Think about the law of gravity. 3:42 The heavier the mass of an object, the more gravitational pull it will have. 3:44 It's no different with layouts and type. 3:49 The heavier areas often draw the reader's eyes in more to notice them first. 3:50 An italic style can also be utilized to denote emphasis or set apart text. 3:55 In this case, 4:00 I can italicize the author's name through a class I've set up in the CSS. 4:01 [BLANK_AUDIO] 4:06 When we refresh the page, 4:08 we see the author's name is now italic which is set apart from regular body copy. 4:09 A different weight or Italic style can be used to carry emphasis. 4:14 But if you overuse it, you can end up with an unbalanced hierarchy and 4:18 layout where everything is important. 4:21 So in turn, nothing is important. 4:24 Watch out for how dense your typographic color is on the overall page. 4:26 Size is next and it can immensely help in guiding your readers through your content. 4:31 This is why your default H1, H2 and 4:35 H3s are greater than your default paragraph size. 4:38 The web is based around the structure. 4:41 They're also bold by default, but 4:43 a bold weight is not always necessary to convey hierarchy when size is utilized. 4:45 Google's recent launch of their material design website wowed 4:50 designers and typographers. 4:54 On the site, they have a recommended typographic style guide for Android. 4:56 In it, you can see their typography doesn't rely on bold headlines or display. 5:00 Rather, their overall color of weight all feels pretty even. 5:05 This is accomplished by setting lighter weights at larger sizes and 5:10 medium weights at smaller sizes. 5:13 Side note. 5:16 Do not, I repeat, do not use light weights at small sizes or for body text. 5:17 It can dramatically hinder legibility and readability. 5:23 If I catch you doing this, then you're in for it. 5:26 In our second folder of typographic hierarchy, we're looking at our size. 5:29 And I've reinstated all our headings to what they used to be. 5:33 But this time, I've given them a font weight of normal. 5:36 Let's go check out what that looks like on our page. 5:39 [BLANK_AUDIO] 5:41 We can see that just through size, our hierarchy can clearly be established. 5:44 Our reader can scan through the content and understand what each section 5:50 entails because the larger headings grab their attention and convey that. 5:53 It's not wrong to use bold headings. 5:57 I just want to show you how size is fully capable of denoting hierarchy on its own. 5:59 As mentioned in the font sizing video from the past stage, make sure to 6:05 follow a typographic scale with your sizes and don't get carried away with too many. 6:08 Lastly, let's look at how positioning can be used to present hierarchy. 6:13 When we're discussing position, we're talking about the placement and space 6:18 around the type in relation to the other elements or blocks of type around it. 6:21 We notice how placement and 6:26 space was used on the great discontent to set apart different pieces of content. 6:27 Now, let's check out another site that does this well. 6:32 Here we have Andrew Loman's take on www.csszengarden.com. 6:36 The site showcases the power of CSS by having the same HTML, 6:40 but different style sheets made by different web designers. 6:44 Apart from this beautiful mix of typography, icons and 6:48 color, Lomen's design utilizes the position of type to present hierarchy and 6:51 differentiate elements. 6:56 When we arrive at the beginning of the site, we immediately see the main tag line 6:58 positioned around the vertical center of our screen. 7:02 Then our eyes move to the right where the next block of text has been positioned to 7:05 be read. 7:08 Finally, I might notice the site's title which is set at a smaller size and 7:09 rotated 90 degrees and positioned in the top left. 7:13 The intention of this design was to stress the tag line above all else here. 7:16 It continues on using multiple columns and 7:21 space to convey hierarchy through position. 7:23 So check it out if you have time. 7:26 Let's jump back into our example now. 7:28 So, currently, we're already using hierarchy in some sense where we're 7:31 separating our headings from our paragraphs with some space there. 7:35 And we're doing a great job of it in this minor way of setting a text indent to our 7:39 P plus Ps as that's different shading the paragraph above from the paragraph below. 7:44 I might wanna accent our title and author name a bit more though. 7:50 So let's see what we can do with its position. 7:54 In our HTML, I'm gonna grab the H1 and H3 elements and 7:57 create a new div above this container div of title. 8:02 [BLANK_AUDIO] 8:07 We'll paste those elements into that div and 8:11 then I'm gonna rearrange the spacing here. 8:13 And then we're gonna wanna style out that class. 8:15 So I'm gonna give it some top padding of 6em, some left and right of zero and 8:17 bottom of zero cuz that container class already has some top padding. 8:21 And then I'll give it a text align of center. 8:25 We'll save and let's go check it out. 8:28 Great. 8:31 Because of its position now, a reader can engage this as separate from 8:32 the main text, which further establishes its hierarchy. 8:36 The center align style is also nice because it feels akin to 8:40 the title of an old book cover. 8:43 We'll stop here for now. 8:45 But positional hierarchy could also be accomplished with borders or 8:47 line rules above and around or 8:50 below the type to separate a piece of content from the element around it. 8:52 The possibilities are really countless with hierarchy. 8:56 So remember to not make typographic choices just because. 8:59 A good designer knows when and why to say yes or no to an idea. 9:03 Have a reason behind why you're bolding or 9:07 italicizing text and why you're increasing sizes. 9:09 Or why you're moving an element to a certain place. 9:12 That's it for the first part of typographic hierarchy. 9:16 I'll see you in the next video as we dive more into the subject. 9:18