1 00:00:00,340 --> 00:00:03,090 Now, let's address the vertical space in our 2 00:00:03,090 --> 00:00:07,650 design by adjusting our line heights and looking at vertical rhythm. 3 00:00:07,650 --> 00:00:10,120 Line height, also referred to as letting or 4 00:00:10,120 --> 00:00:15,120 line spacing, deals with the vertical space between consecutive lines of text. 5 00:00:15,120 --> 00:00:17,190 You might be familiar with it as single or 6 00:00:17,190 --> 00:00:19,429 double spacing in document editors like Word. 7 00:00:20,520 --> 00:00:24,880 The line height property in CSS adds space above and below the text. 8 00:00:24,880 --> 00:00:28,720 The default line height is often too small for body copy. 9 00:00:28,720 --> 00:00:33,320 We can see this on our page as our lines or text feel somewhat cramped together. 10 00:00:33,320 --> 00:00:37,620 This can be changed through the line height property with pixels, ems and more. 11 00:00:37,620 --> 00:00:41,610 But, one of the best ways to handle this, is through a simple number value, 12 00:00:41,610 --> 00:00:43,820 such as line height 1.6. 13 00:00:43,820 --> 00:00:46,880 This number is multiplied to the font size. 14 00:00:46,880 --> 00:00:52,145 So in this case, our line height would be 1.25em, or 15 00:00:52,145 --> 00:00:58,980 20 pixels multiplied by 1.6 for a total of 2em or 32 pixels. 16 00:00:58,980 --> 00:01:03,300 This is also helpful for scalable layouts, since it's not a fixed unit. 17 00:01:03,300 --> 00:01:04,100 Let's go check it out. 18 00:01:06,160 --> 00:01:08,320 Our lines of text are much more open and 19 00:01:08,320 --> 00:01:10,780 allow for better legibility and readability. 20 00:01:12,330 --> 00:01:15,820 For reference, I've seen well built typographic sites utilize line 21 00:01:15,820 --> 00:01:19,330 heights ranging from 1.35 to 1.85 for body text. 22 00:01:19,330 --> 00:01:23,655 Every typeface is different, so line heights can vary, 23 00:01:23,655 --> 00:01:28,500 1.5 tends to be a good starting place, and is commonly used. 24 00:01:28,500 --> 00:01:30,490 Figure out a good, comfortable line height for 25 00:01:30,490 --> 00:01:34,550 your body copy first, because it will be paramount to establishing vertical rhythm. 26 00:01:35,710 --> 00:01:39,010 Before we get into rhythm, let's take a look at our headings. 27 00:01:39,010 --> 00:01:42,520 I've added a bit more text to them to make them break to the next line, so 28 00:01:42,520 --> 00:01:44,570 we can set their line height. 29 00:01:44,570 --> 00:01:47,770 You can put in whatever text you want, the point is to just get them to 30 00:01:47,770 --> 00:01:51,010 the next line, so we can figure out a good line height for them. 31 00:01:51,010 --> 00:01:54,000 We'll be removing them later so it's not a big deal. 32 00:01:54,000 --> 00:01:57,740 A general rule of thumb is as heading sizes increase, 33 00:01:57,740 --> 00:01:59,780 your line height can decrease. 34 00:01:59,780 --> 00:02:03,800 The line height that worked well for the body, will most likely be too spacious for 35 00:02:03,800 --> 00:02:05,220 your bigger headings. 36 00:02:05,220 --> 00:02:09,970 So here I'm setting our h1 to 1.1, 37 00:02:09,970 --> 00:02:13,140 our h2 to 1.2, and our h3 at 1.3. 38 00:02:13,140 --> 00:02:16,030 We'll save and refresh. 39 00:02:16,030 --> 00:02:20,760 And that's a much more normal or natural line height to those headings. 40 00:02:20,760 --> 00:02:21,830 Different font sizes and 41 00:02:21,830 --> 00:02:26,530 families require different values, so be sure to test what works best. 42 00:02:26,530 --> 00:02:30,490 Great, now that those are adjusted, we can look at our vertical rhythm. 43 00:02:30,490 --> 00:02:34,680 The spacing between lines of text creates a rhythm which can balance a layout and 44 00:02:34,680 --> 00:02:36,250 enhance readability. 45 00:02:36,250 --> 00:02:39,070 When we read, we recognize patterns. 46 00:02:39,070 --> 00:02:42,530 If a layout has consistent line and paragraph spacing, 47 00:02:42,530 --> 00:02:46,760 we'll develop a pattern recognition for it after reading a few lines of text. 48 00:02:46,760 --> 00:02:51,850 This will help us identify other identical elements as part of the same pattern. 49 00:02:51,850 --> 00:02:53,930 An unbalanced rhythm can disorient a reader. 50 00:02:55,030 --> 00:02:57,150 Vertical rhythm balances the spacing and 51 00:02:57,150 --> 00:03:00,450 arrangement of text as a user reads down the page. 52 00:03:00,450 --> 00:03:03,290 Every line of text has a baseline it sits on. 53 00:03:03,290 --> 00:03:06,290 If each line of text sits on the rhythmic baseline, 54 00:03:06,290 --> 00:03:09,220 then you can say it has consistent vertical balance or rhythm. 55 00:03:10,260 --> 00:03:14,930 The concept of vertical rhythm applies first and foremost, to paragraph text. 56 00:03:14,930 --> 00:03:17,720 You can also utilize headings, sub-headings, or 57 00:03:17,720 --> 00:03:20,120 images to flow in synch with your rhythm, 58 00:03:20,120 --> 00:03:24,660 but it's often hard to perfectly execute unless the site's content is static. 59 00:03:25,830 --> 00:03:30,120 Robert Bringhurst writes that headings, subheads, block quotations, 60 00:03:30,120 --> 00:03:35,565 footnotes, illustrations, captions and other intrusions into the text, creates 61 00:03:35,565 --> 00:03:40,630 syncopations and variations against the base rhythm of regularly lettered lines. 62 00:03:40,630 --> 00:03:44,540 These variations can and should add life to the page. 63 00:03:44,540 --> 00:03:49,680 But the main text should also return after each variation precisely on beat and 64 00:03:49,680 --> 00:03:50,990 in phase. 65 00:03:50,990 --> 00:03:55,176 That means it's okay if [SOUND] a heading or image breaks rhythm a bit. 66 00:03:55,176 --> 00:03:58,595 What's most important is your paragraph text returns to 67 00:03:58,595 --> 00:04:02,220 its rhythm after each element is introduced. 68 00:04:02,220 --> 00:04:03,500 This offers consistent, 69 00:04:03,500 --> 00:04:06,730 predictable line spacing, as the reader scrolls through the content. 70 00:04:08,560 --> 00:04:12,570 Let's see how we can create a consistent vertical rhythm in our example. 71 00:04:12,570 --> 00:04:17,380 I've removed the extra words from our headings as they're no longer necessary. 72 00:04:17,380 --> 00:04:20,890 We'll start by using a simple tool at Basehold.it, 73 00:04:20,890 --> 00:04:23,110 which will render a baseline overlay on our page. 74 00:04:24,150 --> 00:04:27,885 We'll copy the link here and paste it into the head of our HTML. 75 00:04:27,885 --> 00:04:31,261 [BLANK_AUDIO] 76 00:04:31,261 --> 00:04:36,640 The number at the end, refers to how many pixels apart each base line is. 77 00:04:36,640 --> 00:04:40,190 This should correspond to the line height of our body text. 78 00:04:40,190 --> 00:04:44,200 As mentioned before, our line height comes out to be 32 pixels, so 79 00:04:44,200 --> 00:04:47,470 we'll change this number to 32. 80 00:04:47,470 --> 00:04:52,160 When we refresh our page, we now see our baseline grid appearing. 81 00:04:52,160 --> 00:04:56,170 Notice, though, how the lines of text are not consistently sitting on the baseline, 82 00:04:56,170 --> 00:05:00,860 but rather in between them and they're not consistently in the same place. 83 00:05:00,860 --> 00:05:03,410 This is what we would call, poor rhythm. 84 00:05:03,410 --> 00:05:04,080 Let's change that. 85 00:05:05,230 --> 00:05:09,890 To start, let's get our top text elements aligned to the baseline. 86 00:05:09,890 --> 00:05:12,397 So I'm gonna write some code and then explain what it does. 87 00:05:12,397 --> 00:05:22,397 [BLANK_AUDIO] 88 00:05:30,161 --> 00:05:33,500 I've added some top and bottom padding to our container. 89 00:05:33,500 --> 00:05:35,580 I've added some bottom padding to our h1. 90 00:05:35,580 --> 00:05:38,090 And I've added some more bottom padding to our h3. 91 00:05:38,090 --> 00:05:40,020 This will space them out, 92 00:05:40,020 --> 00:05:43,470 which gives them room to breathe and lines them up with their baselines. 93 00:05:43,470 --> 00:05:44,210 Let's go check it out. 94 00:05:45,230 --> 00:05:49,860 When we refresh, we see that our text is beginning to line up with our baselines. 95 00:05:49,860 --> 00:05:52,770 But we also notice that the following paragraph breaks away from 96 00:05:52,770 --> 00:05:53,609 the baseline grid. 97 00:05:54,650 --> 00:05:57,600 To fix this, I can set the paragraphs top margin to 0, 98 00:05:57,600 --> 00:06:03,410 and this bottom margin to 1.6em, which matches with our line height. 99 00:06:03,410 --> 00:06:04,860 We'll save, and refresh. 100 00:06:06,270 --> 00:06:10,300 This will ensure, when a paragraph follows a paragraph, there will be a slight space 101 00:06:10,300 --> 00:06:13,770 between, and then the next paragraph will return to the proper rhythm. 102 00:06:15,020 --> 00:06:18,000 You can also handle paragraph rhythm by setting the top and 103 00:06:18,000 --> 00:06:20,530 bottom margin to 0 on our paragraphs. 104 00:06:20,530 --> 00:06:24,090 In this instance, our space denoting a paragraph will disappear. 105 00:06:24,090 --> 00:06:27,290 So we'll want to add a text indent of 2em, so 106 00:06:27,290 --> 00:06:31,190 that the following paragraph will be easily noticed. 107 00:06:31,190 --> 00:06:32,740 We'll refresh here. 108 00:06:32,740 --> 00:06:35,310 Great, we see that our rhythm stays intact, and 109 00:06:35,310 --> 00:06:37,990 we can easily notice where another paragraph starts. 110 00:06:37,990 --> 00:06:41,010 This text indent is not necessary on leading paragraphs, 111 00:06:41,010 --> 00:06:42,840 because their start is already noticeable. 112 00:06:44,060 --> 00:06:46,540 Now we can start to think about our other elements. 113 00:06:46,540 --> 00:06:49,660 Our h2 disrupts the rhythm of our body copy. 114 00:06:49,660 --> 00:06:52,430 So let's add some margins above and below to fix that. 115 00:06:56,650 --> 00:06:57,490 Let's see how that looks. 116 00:06:59,040 --> 00:07:03,740 Great, I like to have a bit more margin above than below here, so the heading 117 00:07:03,740 --> 00:07:07,210 feels separate from the paragraph above and tied to the paragraph below. 118 00:07:08,470 --> 00:07:10,830 We can even add an image and keep our text in rhythm. 119 00:07:10,830 --> 00:07:13,870 I already have this set up in our HTML and 120 00:07:13,870 --> 00:07:17,690 here I've set up the necessary margins above and below. 121 00:07:17,690 --> 00:07:21,450 I've also given it a max width of 100% so it fits in our container. 122 00:07:21,450 --> 00:07:22,060 Let's go check it out. 123 00:07:23,620 --> 00:07:25,740 We scroll down, we see the images here, 124 00:07:25,740 --> 00:07:30,090 and our text returns to its normal rhythm as before. 125 00:07:30,090 --> 00:07:33,480 Let's take the baseline grid away, and see what it all looks like. 126 00:07:35,860 --> 00:07:39,590 Great, the page has much better rhythm and overall feel. 127 00:07:39,590 --> 00:07:43,240 Keep in mind if we were to change any font sizes, line heights, and 128 00:07:43,240 --> 00:07:45,870 margins, this will also affect vertical rhythm. 129 00:07:47,100 --> 00:07:50,390 Don't think of these bars as a prison that we're locked into. 130 00:07:50,390 --> 00:07:53,650 Think of them as a tool to help us make good design choices. 131 00:07:53,650 --> 00:07:56,360 Something could be perfectly lined up on a baseline, but 132 00:07:56,360 --> 00:07:58,180 that doesn't mean it feels right. 133 00:07:58,180 --> 00:08:00,440 Go with what looks and feels right. 134 00:08:00,440 --> 00:08:03,390 When setting this page up, I could have made the line heights of our 135 00:08:03,390 --> 00:08:06,510 headings line up perfectly with the baseline grid. 136 00:08:06,510 --> 00:08:10,520 But then, the text would have felt too tight if there was a line break. 137 00:08:10,520 --> 00:08:15,150 This does take some tinkering, but don't lose sight of the forest for the trees. 138 00:08:15,150 --> 00:08:18,870 Keep in mind your first priority is making sure your body's rhythm works well with 139 00:08:18,870 --> 00:08:20,690 its line height and paragraph structure. 140 00:08:21,860 --> 00:08:25,680 This lesson concludes our basic web typography stage. 141 00:08:25,680 --> 00:08:29,750 If you can get all these concepts down, it'll be no time before you're 142 00:08:29,750 --> 00:08:35,260 creating typographically sound websites with good scale and rhythm. 143 00:08:35,260 --> 00:08:36,712 See what I did there? 144 00:08:36,712 --> 00:08:39,300 All right, I'll see you in the next stage for more bad jokes and 145 00:08:39,300 --> 00:08:41,520 puns as we look at laying out type for the web.