Vertical Space: Line-Height and Vertical Rhythm

Now, let's address the vertical space in our 0:00 design by adjusting our line heights and looking at vertical rhythm. 0:03 Line height, also referred to as letting or 0:07 line spacing, deals with the vertical space between consecutive lines of text. 0:10 You might be familiar with it as single or 0:15 double spacing in document editors like Word. 0:17 The line height property in CSS adds space above and below the text. 0:20 The default line height is often too small for body copy. 0:24 We can see this on our page as our lines or text feel somewhat cramped together. 0:28 This can be changed through the line height property with pixels, ems and more. 0:33 But, one of the best ways to handle this, is through a simple number value, 0:37 such as line height 1.6. 0:41 This number is multiplied to the font size. 0:43 So in this case, our line height would be 1.25em, or 0:46 20 pixels multiplied by 1.6 for a total of 2em or 32 pixels. 0:52 This is also helpful for scalable layouts, since it's not a fixed unit. 0:58 Let's go check it out. 1:03 Our lines of text are much more open and 1:06 allow for better legibility and readability. 1:08 For reference, I've seen well built typographic sites utilize line 1:12 heights ranging from 1.35 to 1.85 for body text. 1:15 Every typeface is different, so line heights can vary, 1:19 1.5 tends to be a good starting place, and is commonly used. 1:23 Figure out a good, comfortable line height for 1:28 your body copy first, because it will be paramount to establishing vertical rhythm. 1:30 Before we get into rhythm, let's take a look at our headings. 1:35 I've added a bit more text to them to make them break to the next line, so 1:39 we can set their line height. 1:42 You can put in whatever text you want, the point is to just get them to 1:44 the next line, so we can figure out a good line height for them. 1:47 We'll be removing them later so it's not a big deal. 1:51 A general rule of thumb is as heading sizes increase, 1:54 your line height can decrease. 1:57 The line height that worked well for the body, will most likely be too spacious for 1:59 your bigger headings. 2:03 So here I'm setting our h1 to 1.1, 2:05 our h2 to 1.2, and our h3 at 1.3. 2:09 We'll save and refresh. 2:13 And that's a much more normal or natural line height to those headings. 2:16 Different font sizes and 2:20 families require different values, so be sure to test what works best. 2:21 Great, now that those are adjusted, we can look at our vertical rhythm. 2:26 The spacing between lines of text creates a rhythm which can balance a layout and 2:30 enhance readability. 2:34 When we read, we recognize patterns. 2:36 If a layout has consistent line and paragraph spacing, 2:39 we'll develop a pattern recognition for it after reading a few lines of text. 2:42 This will help us identify other identical elements as part of the same pattern. 2:46 An unbalanced rhythm can disorient a reader. 2:51 Vertical rhythm balances the spacing and 2:55 arrangement of text as a user reads down the page. 2:57 Every line of text has a baseline it sits on. 3:00 If each line of text sits on the rhythmic baseline, 3:03 then you can say it has consistent vertical balance or rhythm. 3:06 The concept of vertical rhythm applies first and foremost, to paragraph text. 3:10 You can also utilize headings, sub-headings, or 3:14 images to flow in synch with your rhythm, 3:17 but it's often hard to perfectly execute unless the site's content is static. 3:20 Robert Bringhurst writes that headings, subheads, block quotations, 3:25 footnotes, illustrations, captions and other intrusions into the text, creates 3:30 syncopations and variations against the base rhythm of regularly lettered lines. 3:35 These variations can and should add life to the page. 3:40 But the main text should also return after each variation precisely on beat and 3:44 in phase. 3:49 That means it's okay if [SOUND] a heading or image breaks rhythm a bit. 3:50 What's most important is your paragraph text returns to 3:55 its rhythm after each element is introduced. 3:58 This offers consistent, 4:02 predictable line spacing, as the reader scrolls through the content. 4:03 Let's see how we can create a consistent vertical rhythm in our example. 4:08 I've removed the extra words from our headings as they're no longer necessary. 4:12 We'll start by using a simple tool at Basehold.it, 4:17 which will render a baseline overlay on our page. 4:20 We'll copy the link here and paste it into the head of our HTML. 4:24 [BLANK_AUDIO] 4:27 The number at the end, refers to how many pixels apart each base line is. 4:31 This should correspond to the line height of our body text. 4:36 As mentioned before, our line height comes out to be 32 pixels, so 4:40 we'll change this number to 32. 4:44 When we refresh our page, we now see our baseline grid appearing. 4:47 Notice, though, how the lines of text are not consistently sitting on the baseline, 4:52 but rather in between them and they're not consistently in the same place. 4:56 This is what we would call, poor rhythm. 5:00 Let's change that. 5:03 To start, let's get our top text elements aligned to the baseline. 5:05 So I'm gonna write some code and then explain what it does. 5:09 [BLANK_AUDIO] 5:12 I've added some top and bottom padding to our container. 5:30 I've added some bottom padding to our h1. 5:33 And I've added some more bottom padding to our h3. 5:35 This will space them out, 5:38 which gives them room to breathe and lines them up with their baselines. 5:40 Let's go check it out. 5:43 When we refresh, we see that our text is beginning to line up with our baselines. 5:45 But we also notice that the following paragraph breaks away from 5:49 the baseline grid. 5:52 To fix this, I can set the paragraphs top margin to 0, 5:54 and this bottom margin to 1.6em, which matches with our line height. 5:57 We'll save, and refresh. 6:03 This will ensure, when a paragraph follows a paragraph, there will be a slight space 6:06 between, and then the next paragraph will return to the proper rhythm. 6:10 You can also handle paragraph rhythm by setting the top and 6:15 bottom margin to 0 on our paragraphs. 6:18 In this instance, our space denoting a paragraph will disappear. 6:20 So we'll want to add a text indent of 2em, so 6:24 that the following paragraph will be easily noticed. 6:27 We'll refresh here. 6:31 Great, we see that our rhythm stays intact, and 6:32 we can easily notice where another paragraph starts. 6:35 This text indent is not necessary on leading paragraphs, 6:37 because their start is already noticeable. 6:41 Now we can start to think about our other elements. 6:44 Our h2 disrupts the rhythm of our body copy. 6:46 So let's add some margins above and below to fix that. 6:49 Let's see how that looks. 6:56 Great, I like to have a bit more margin above than below here, so the heading 6:59 feels separate from the paragraph above and tied to the paragraph below. 7:03 We can even add an image and keep our text in rhythm. 7:08 I already have this set up in our HTML and 7:10 here I've set up the necessary margins above and below. 7:13 I've also given it a max width of 100% so it fits in our container. 7:17 Let's go check it out. 7:21 We scroll down, we see the images here, 7:23 and our text returns to its normal rhythm as before. 7:25 Let's take the baseline grid away, and see what it all looks like. 7:30 Great, the page has much better rhythm and overall feel. 7:35 Keep in mind if we were to change any font sizes, line heights, and 7:39 margins, this will also affect vertical rhythm. 7:43 Don't think of these bars as a prison that we're locked into. 7:47 Think of them as a tool to help us make good design choices. 7:50 Something could be perfectly lined up on a baseline, but 7:53 that doesn't mean it feels right. 7:56 Go with what looks and feels right. 7:58 When setting this page up, I could have made the line heights of our 8:00 headings line up perfectly with the baseline grid. 8:03 But then, the text would have felt too tight if there was a line break. 8:06 This does take some tinkering, but don't lose sight of the forest for the trees. 8:10 Keep in mind your first priority is making sure your body's rhythm works well with 8:15 its line height and paragraph structure. 8:18 This lesson concludes our basic web typography stage. 8:21 If you can get all these concepts down, it'll be no time before you're 8:25 creating typographically sound websites with good scale and rhythm. 8:29 See what I did there? 8:35 All right, I'll see you in the next stage for more bad jokes and 8:36 puns as we look at laying out type for the web. 8:39