1 00:00:00,000 --> 00:00:02,456 [MUSIC] 2 00:00:02,456 --> 00:00:03,778 All right. 3 00:00:03,778 --> 00:00:07,200 You've made it this far. 4 00:00:07,200 --> 00:00:08,280 Good work. 5 00:00:08,280 --> 00:00:12,610 If all this talk about type hasn't gotten you excited already, then you just wait. 6 00:00:12,610 --> 00:00:15,379 In this stage, we'll look at the different ways you can lay out type for the web. 7 00:00:16,620 --> 00:00:19,090 First up is Typographic Hierarchy. 8 00:00:19,090 --> 00:00:23,640 This concept is crucial to seamlessly guide readers through a page's content. 9 00:00:23,640 --> 00:00:26,320 Hierarchy helps users understand what information is 10 00:00:26,320 --> 00:00:30,410 most important to what's secondary, tertiary, and so forth. 11 00:00:30,410 --> 00:00:31,080 In this video, 12 00:00:31,080 --> 00:00:34,860 we'll look at how to do this with weight, style, size, and position. 13 00:00:34,860 --> 00:00:39,030 And then next, we'll continue on the theme of hierarchy with color and 14 00:00:39,030 --> 00:00:40,720 pairing typefaces. 15 00:00:40,720 --> 00:00:42,080 Before we jump in, 16 00:00:42,080 --> 00:00:46,700 let's check out all of these concepts in action at CreativeMornings.com. 17 00:00:46,700 --> 00:00:51,080 Let's say I wanted to attend this upcoming lecture in Los Angeles. 18 00:00:51,080 --> 00:00:54,340 We're immediately presented with an array of information that's been 19 00:00:54,340 --> 00:00:57,370 hierarchically arranged through typography. 20 00:00:57,370 --> 00:01:01,950 First, my eyes gravitate towards what's biggest, boldest and darkest on the page. 21 00:01:01,950 --> 00:01:03,740 The speaker names. 22 00:01:03,740 --> 00:01:06,240 This is the most important piece of information here and 23 00:01:06,240 --> 00:01:08,980 CreativeMornings lets you easily know it. 24 00:01:08,980 --> 00:01:11,570 Next, my eyes naturally continue reading and 25 00:01:11,570 --> 00:01:14,240 move downward towards the date, time and place. 26 00:01:14,240 --> 00:01:17,610 This is of next importance after the speaker name. 27 00:01:17,610 --> 00:01:19,690 It's smaller but still prominent. 28 00:01:19,690 --> 00:01:23,080 My eyes are then drawn to the bright block of color holding a white text of 29 00:01:23,080 --> 00:01:24,030 the city code. 30 00:01:24,030 --> 00:01:25,290 It's a nice touch. 31 00:01:25,290 --> 00:01:28,660 After I've taken all that in and consider if I'm still interested, 32 00:01:28,660 --> 00:01:32,640 then I'm able to make my way down to the smaller secondary information. 33 00:01:32,640 --> 00:01:36,340 And read more about the speakers and where exactly the talk will be. 34 00:01:36,340 --> 00:01:40,950 We see bold type, multiple sizes, different colors, different positions, and 35 00:01:40,950 --> 00:01:45,120 different type faces utilized to convey the hierarchy of information on the page. 36 00:01:46,560 --> 00:01:49,390 It's a combination that's not only useful to the user, 37 00:01:49,390 --> 00:01:51,130 it's also down right good looking. 38 00:01:51,130 --> 00:01:55,950 These concepts can be incredibly powerful to create usable, beautiful websites. 39 00:01:55,950 --> 00:01:59,950 But they can also get out of hand pretty fast if we don't know what we're doing. 40 00:01:59,950 --> 00:02:03,770 Before you begin styling anything, it's smart to familiarize yourself with 41 00:02:03,770 --> 00:02:07,980 the site's content to get an overall big picture of everything involved. 42 00:02:07,980 --> 00:02:11,960 It's often helpful to print out the page unstyled, and then go about hierarchically 43 00:02:11,960 --> 00:02:16,370 numbering content elements starting with one, what's of most importance. 44 00:02:16,370 --> 00:02:18,540 Two, what's of next importance, and so 45 00:02:18,540 --> 00:02:21,340 forth until every piece of content has been labelled. 46 00:02:21,340 --> 00:02:25,040 You can even make note of what HTML elements would be appropriate for 47 00:02:25,040 --> 00:02:28,200 each number like H1 or H2 or P. 48 00:02:28,200 --> 00:02:32,180 This system will inform us on how we can utilize typography to accentuate our 49 00:02:32,180 --> 00:02:33,350 different pieces of content. 50 00:02:34,440 --> 00:02:37,580 This is often done in a wiring framing level of building a website. 51 00:02:37,580 --> 00:02:39,740 Because most times, it can be quicker and 52 00:02:39,740 --> 00:02:43,590 easier to change typography in a design program rather than in CSS. 53 00:02:44,700 --> 00:02:47,760 With our current example from The War of the Worlds, we've been arranging and 54 00:02:47,760 --> 00:02:49,600 changing the type as we go. 55 00:02:49,600 --> 00:02:52,880 Let's begin by looking at how we can hierarchically set content apart 56 00:02:52,880 --> 00:02:55,230 with weight, style, size and color. 57 00:02:56,850 --> 00:03:00,670 We can create hierarchy simply by weighting certain blocks of texts. 58 00:03:00,670 --> 00:03:04,510 Our reader's eyes will be drawn to the bolder elements on the page. 59 00:03:04,510 --> 00:03:08,790 I've set up our workspace here to cover different concepts of hierarchy as we go. 60 00:03:09,910 --> 00:03:13,070 In our first folder, I've replaced all our heading tags and 61 00:03:13,070 --> 00:03:14,640 just made them paragraphs. 62 00:03:14,640 --> 00:03:18,210 And I've also commented out the text indents in the CSS. 63 00:03:18,210 --> 00:03:20,110 Currently, it looks like this. 64 00:03:20,110 --> 00:03:24,360 So, the only hierarchy present is what comes first will be read first. 65 00:03:24,360 --> 00:03:26,930 I've set the title class as bold here. 66 00:03:26,930 --> 00:03:30,420 So let's go ahead and style out that class to have a font weight of bold. 67 00:03:30,420 --> 00:03:32,070 We'll save and go check it out. 68 00:03:32,070 --> 00:03:36,000 I've just emphasized that piece of element over everything else on the page. 69 00:03:36,000 --> 00:03:39,490 A reader's eyes will naturally gravitate towards that because it 70 00:03:39,490 --> 00:03:42,710 carries more weight than anything else on the page. 71 00:03:42,710 --> 00:03:44,450 Think about the law of gravity. 72 00:03:44,450 --> 00:03:49,080 The heavier the mass of an object, the more gravitational pull it will have. 73 00:03:49,080 --> 00:03:50,980 It's no different with layouts and type. 74 00:03:50,980 --> 00:03:55,550 The heavier areas often draw the reader's eyes in more to notice them first. 75 00:03:55,550 --> 00:04:00,900 An italic style can also be utilized to denote emphasis or set apart text. 76 00:04:00,900 --> 00:04:01,870 In this case, 77 00:04:01,870 --> 00:04:06,025 I can italicize the author's name through a class I've set up in the CSS. 78 00:04:06,025 --> 00:04:08,680 [BLANK_AUDIO] 79 00:04:08,680 --> 00:04:09,880 When we refresh the page, 80 00:04:09,880 --> 00:04:14,820 we see the author's name is now italic which is set apart from regular body copy. 81 00:04:14,820 --> 00:04:18,270 A different weight or Italic style can be used to carry emphasis. 82 00:04:18,270 --> 00:04:21,850 But if you overuse it, you can end up with an unbalanced hierarchy and 83 00:04:21,850 --> 00:04:24,400 layout where everything is important. 84 00:04:24,400 --> 00:04:26,730 So in turn, nothing is important. 85 00:04:26,730 --> 00:04:30,460 Watch out for how dense your typographic color is on the overall page. 86 00:04:31,540 --> 00:04:35,900 Size is next and it can immensely help in guiding your readers through your content. 87 00:04:35,900 --> 00:04:38,029 This is why your default H1, H2 and 88 00:04:38,029 --> 00:04:41,520 H3s are greater than your default paragraph size. 89 00:04:41,520 --> 00:04:43,670 The web is based around the structure. 90 00:04:43,670 --> 00:04:45,750 They're also bold by default, but 91 00:04:45,750 --> 00:04:50,950 a bold weight is not always necessary to convey hierarchy when size is utilized. 92 00:04:50,950 --> 00:04:54,110 Google's recent launch of their material design website wowed 93 00:04:54,110 --> 00:04:56,470 designers and typographers. 94 00:04:56,470 --> 00:05:00,970 On the site, they have a recommended typographic style guide for Android. 95 00:05:00,970 --> 00:05:05,770 In it, you can see their typography doesn't rely on bold headlines or display. 96 00:05:05,770 --> 00:05:10,020 Rather, their overall color of weight all feels pretty even. 97 00:05:10,020 --> 00:05:13,680 This is accomplished by setting lighter weights at larger sizes and 98 00:05:13,680 --> 00:05:15,530 medium weights at smaller sizes. 99 00:05:16,780 --> 00:05:17,830 Side note. 100 00:05:17,830 --> 00:05:23,740 Do not, I repeat, do not use light weights at small sizes or for body text. 101 00:05:23,740 --> 00:05:26,870 It can dramatically hinder legibility and readability. 102 00:05:26,870 --> 00:05:29,640 If I catch you doing this, then you're in for it. 103 00:05:29,640 --> 00:05:33,650 In our second folder of typographic hierarchy, we're looking at our size. 104 00:05:33,650 --> 00:05:36,770 And I've reinstated all our headings to what they used to be. 105 00:05:36,770 --> 00:05:39,870 But this time, I've given them a font weight of normal. 106 00:05:39,870 --> 00:05:41,575 Let's go check out what that looks like on our page. 107 00:05:41,575 --> 00:05:44,870 [BLANK_AUDIO] 108 00:05:44,870 --> 00:05:50,010 We can see that just through size, our hierarchy can clearly be established. 109 00:05:50,010 --> 00:05:53,260 Our reader can scan through the content and understand what each section 110 00:05:53,260 --> 00:05:56,930 entails because the larger headings grab their attention and convey that. 111 00:05:57,940 --> 00:05:59,970 It's not wrong to use bold headings. 112 00:05:59,970 --> 00:06:05,120 I just want to show you how size is fully capable of denoting hierarchy on its own. 113 00:06:05,120 --> 00:06:08,950 As mentioned in the font sizing video from the past stage, make sure to 114 00:06:08,950 --> 00:06:13,930 follow a typographic scale with your sizes and don't get carried away with too many. 115 00:06:13,930 --> 00:06:18,280 Lastly, let's look at how positioning can be used to present hierarchy. 116 00:06:18,280 --> 00:06:21,810 When we're discussing position, we're talking about the placement and space 117 00:06:21,810 --> 00:06:26,740 around the type in relation to the other elements or blocks of type around it. 118 00:06:26,740 --> 00:06:27,990 We notice how placement and 119 00:06:27,990 --> 00:06:32,920 space was used on the great discontent to set apart different pieces of content. 120 00:06:32,920 --> 00:06:35,140 Now, let's check out another site that does this well. 121 00:06:36,870 --> 00:06:40,940 Here we have Andrew Loman's take on www.csszengarden.com. 122 00:06:40,940 --> 00:06:44,840 The site showcases the power of CSS by having the same HTML, 123 00:06:44,840 --> 00:06:48,610 but different style sheets made by different web designers. 124 00:06:48,610 --> 00:06:51,980 Apart from this beautiful mix of typography, icons and 125 00:06:51,980 --> 00:06:56,690 color, Lomen's design utilizes the position of type to present hierarchy and 126 00:06:56,690 --> 00:06:58,200 differentiate elements. 127 00:06:58,200 --> 00:07:02,090 When we arrive at the beginning of the site, we immediately see the main tag line 128 00:07:02,090 --> 00:07:05,020 positioned around the vertical center of our screen. 129 00:07:05,020 --> 00:07:08,740 Then our eyes move to the right where the next block of text has been positioned to 130 00:07:08,740 --> 00:07:09,530 be read. 131 00:07:09,530 --> 00:07:13,360 Finally, I might notice the site's title which is set at a smaller size and 132 00:07:13,360 --> 00:07:16,810 rotated 90 degrees and positioned in the top left. 133 00:07:16,810 --> 00:07:21,320 The intention of this design was to stress the tag line above all else here. 134 00:07:21,320 --> 00:07:23,610 It continues on using multiple columns and 135 00:07:23,610 --> 00:07:26,540 space to convey hierarchy through position. 136 00:07:26,540 --> 00:07:28,600 So check it out if you have time. 137 00:07:28,600 --> 00:07:30,260 Let's jump back into our example now. 138 00:07:31,700 --> 00:07:35,610 So, currently, we're already using hierarchy in some sense where we're 139 00:07:35,610 --> 00:07:39,830 separating our headings from our paragraphs with some space there. 140 00:07:39,830 --> 00:07:44,660 And we're doing a great job of it in this minor way of setting a text indent to our 141 00:07:44,660 --> 00:07:49,390 P plus Ps as that's different shading the paragraph above from the paragraph below. 142 00:07:50,890 --> 00:07:54,330 I might wanna accent our title and author name a bit more though. 143 00:07:54,330 --> 00:07:56,160 So let's see what we can do with its position. 144 00:07:57,470 --> 00:08:02,420 In our HTML, I'm gonna grab the H1 and H3 elements and 145 00:08:02,420 --> 00:08:07,070 create a new div above this container div of title. 146 00:08:07,070 --> 00:08:11,380 [BLANK_AUDIO] 147 00:08:11,380 --> 00:08:13,530 We'll paste those elements into that div and 148 00:08:13,530 --> 00:08:15,200 then I'm gonna rearrange the spacing here. 149 00:08:15,200 --> 00:08:17,780 And then we're gonna wanna style out that class. 150 00:08:17,780 --> 00:08:21,980 So I'm gonna give it some top padding of 6em, some left and right of zero and 151 00:08:21,980 --> 00:08:25,320 bottom of zero cuz that container class already has some top padding. 152 00:08:25,320 --> 00:08:27,090 And then I'll give it a text align of center. 153 00:08:28,110 --> 00:08:29,450 We'll save and let's go check it out. 154 00:08:31,640 --> 00:08:32,280 Great. 155 00:08:32,280 --> 00:08:36,370 Because of its position now, a reader can engage this as separate from 156 00:08:36,370 --> 00:08:40,150 the main text, which further establishes its hierarchy. 157 00:08:40,150 --> 00:08:43,250 The center align style is also nice because it feels akin to 158 00:08:43,250 --> 00:08:44,740 the title of an old book cover. 159 00:08:45,910 --> 00:08:47,340 We'll stop here for now. 160 00:08:47,340 --> 00:08:50,710 But positional hierarchy could also be accomplished with borders or 161 00:08:50,710 --> 00:08:52,380 line rules above and around or 162 00:08:52,380 --> 00:08:56,860 below the type to separate a piece of content from the element around it. 163 00:08:56,860 --> 00:08:59,590 The possibilities are really countless with hierarchy. 164 00:08:59,590 --> 00:09:03,300 So remember to not make typographic choices just because. 165 00:09:03,300 --> 00:09:07,540 A good designer knows when and why to say yes or no to an idea. 166 00:09:07,540 --> 00:09:09,610 Have a reason behind why you're bolding or 167 00:09:09,610 --> 00:09:12,820 italicizing text and why you're increasing sizes. 168 00:09:12,820 --> 00:09:14,950 Or why you're moving an element to a certain place. 169 00:09:16,120 --> 00:09:18,530 That's it for the first part of typographic hierarchy. 170 00:09:18,530 --> 00:09:21,360 I'll see you in the next video as we dive more into the subject.