Once we get a good size for 0:00 our body text, we want to take a look at our measure in space. 0:01 We'll first talk about measure, which is also known as line length, 0:05 because it deals with how many characters fit on each line of text. 0:09 Then we'll discuss the white space around the text created by margins or padding. 0:12 These two concepts both work together to create readable layouts which give 0:17 the type room to breathe. 0:21 First up is our measure. 0:23 In Elements of Typographic Style, Robert Bringhurst recommends a measure of 0:25 45 to 75 characters per line for a single column of text. 0:29 The mid-60s are not just an important cultural period in America's history, 0:33 as popularly portrayed by Madmen. 0:38 They're also thought of as the ideal measure for 0:40 text, counting spaces, and words. 0:42 That might have been a little cheesy, but hopefully memorable, nonetheless. 0:45 A measure that's too long can tire out readers' eyes as they have to 0:50 travel across the screen and back multiple times. 0:54 When shifting to the next line below, they can potentially lose their place. 0:58 A measure that's too short will have readers' eyes quickly jumping back and 1:02 forth to the next line, which is again quite exhausting and jarring. 1:06 A measure that's just right will be comfortable to the user, 1:10 creating an enjoyable reading experience. 1:13 Remember, 45 to 75 characters works well, with the mid sixties being ideal. 1:15 If you're working with multiple columns, you can shoot for the 40 to 50 range. 1:21 In our workspace here, I removed our list as it's no longer needed for this example. 1:25 Our layout currently isn't very readable, 1:31 because it's spanning the whole width of the browser. 1:33 Based on a technique by Trent Walton, we're gonna figure out how to get good 1:36 measure by placing a bold asterisk at the 45th and 75th characters in the HTML. 1:40 We can remove this later, but this guides us and 1:46 gives us a good idea on where our lines should break. 1:49 If these two asterisks end up on the same line, 1:52 then we know we need to fix our measure. 1:55 Let's head back to the CSS and add a max width to our container class. 1:57 A good place to start is by multiplying your body font size by 30, 2:02 since the body font size is 1.25 m, or 20 pixels, 2:07 we could set a max width of 37.5 rem, or 600 pixels. 2:10 Notice the use of rem here. 2:16 I prefer it for container widths, as it's scalable and keeps the math fairly simple. 2:18 We'll save, refresh our browser, great, 2:23 the asterisks now fall on two separate lines, which is exactly what we want. 2:27 And the container's width feels more appropriate. 2:31 Always take time to read through a few paragraphs to make sure 2:34 the measure feels appropriate, or needs adjusting. 2:37 Next, let's talk about the white space to the left and right of our type. 2:41 Margins, or padding should be used to give your type room to breathe. 2:45 If a sentence comes too close to another element then it 2:49 can disrupt the flow of reading. 2:52 White space is often under utilized in web design. 2:54 Which results in cramped and cluttered layouts. 2:57 Also, it should be noted that white space doesn't have to be white. 3:01 If you have a dark background with lighter text, 3:05 we would still call that area around the text white space. 3:07 Let's check out thegreatdiscontent.com for a good example. 3:11 Here, we have ample amounts of whitespace above, below, and around the type. 3:15 The words are not closing in on borders, they're given room to breathe and 3:22 live inside their content block. 3:26 The columns are not flowing too close to one another and competing for 3:30 each other's space, because they've been given the necessary white space. 3:34 As you can see, white space can clean up a design and give it an elegant, smooth, 3:38 professional feel and emphasis on the content by framing it with empty space. 3:42 Currently, in our example, the type is brushed up too close to the left side. 3:48 So, lets center our container element by giving it a margin of zero auto. 3:55 We'll refresh, and we see that it's moved to the middle of the page. 4:02 This opens up a lot of great white space around our 4:05 type creating much more comfortable reading experience. 4:08 This is a much simpler example, cuz we're only dealing with one column. 4:11 So remember to give necessary amounts of white space with elements or 4:15 multiple columns of text on your page. 4:19 This might look good now, but if we decrease the width of 4:21 our browser we see the measure and our white space quickly decrease with it. 4:24 When responsive design gets thrown into the mix, good measure and 4:32 white space are incredibly important to maintain with changing element widths. 4:35 We'll look at that later in our video on responsive typography 4:40