Once we get a good size for

our body text, we want to take a look at our measure in space.

We'll first talk about measure, which is also known as line length,

because it deals with how many characters fit on each line of text.

Then we'll discuss the white space around the text created by margins or padding.

These two concepts both work together to create readable layouts which give

the type room to breathe.

First up is our measure.

In Elements of Typographic Style, Robert Bringhurst recommends a measure of

45 to 75 characters per line for a single column of text.

The mid-60s are not just an important cultural period in America's history,

as popularly portrayed by Madmen.

They're also thought of as the ideal measure for

text, counting spaces, and words.

That might have been a little cheesy, but hopefully memorable, nonetheless.

A measure that's too long can tire out readers' eyes as they have to

travel across the screen and back multiple times.

When shifting to the next line below, they can potentially lose their place.

A measure that's too short will have readers' eyes quickly jumping back and

forth to the next line, which is again quite exhausting and jarring.

A measure that's just right will be comfortable to the user,

creating an enjoyable reading experience.

Remember, 45 to 75 characters works well, with the mid sixties being ideal.

If you're working with multiple columns, you can shoot for the 40 to 50 range.

In our workspace here, I removed our list as it's no longer needed for this example.

Our layout currently isn't very readable,

because it's spanning the whole width of the browser.

Based on a technique by Trent Walton, we're gonna figure out how to get good

measure by placing a bold asterisk at the 45th and 75th characters in the HTML.

We can remove this later, but this guides us and

gives us a good idea on where our lines should break.

If these two asterisks end up on the same line,

then we know we need to fix our measure.

Let's head back to the CSS and add a max width to our container class.

A good place to start is by multiplying your body font size by 30,

since the body font size is 1.25 m, or 20 pixels,

we could set a max width of 37.5 rem, or 600 pixels.

Notice the use of rem here.

I prefer it for container widths, as it's scalable and keeps the math fairly simple.

We'll save, refresh our browser, great,

the asterisks now fall on two separate lines, which is exactly what we want.

And the container's width feels more appropriate.

Always take time to read through a few paragraphs to make sure

the measure feels appropriate, or needs adjusting.

Next, let's talk about the white space to the left and right of our type.

Margins, or padding should be used to give your type room to breathe.

If a sentence comes too close to another element then it

can disrupt the flow of reading.

White space is often under utilized in web design.

Which results in cramped and cluttered layouts.

Also, it should be noted that white space doesn't have to be white.

If you have a dark background with lighter text,

we would still call that area around the text white space.

Let's check out thegreatdiscontent.com for a good example.

Here, we have ample amounts of whitespace above, below, and around the type.

The words are not closing in on borders, they're given room to breathe and

live inside their content block.

The columns are not flowing too close to one another and competing for

each other's space, because they've been given the necessary white space.

As you can see, white space can clean up a design and give it an elegant, smooth,

professional feel and emphasis on the content by framing it with empty space.

Currently, in our example, the type is brushed up too close to the left side.

So, lets center our container element by giving it a margin of zero auto.

We'll refresh, and we see that it's moved to the middle of the page.

This opens up a lot of great white space around our

type creating much more comfortable reading experience.

This is a much simpler example, cuz we're only dealing with one column.

So remember to give necessary amounts of white space with elements or

multiple columns of text on your page.

This might look good now, but if we decrease the width of

our browser we see the measure and our white space quickly decrease with it.

When responsive design gets thrown into the mix, good measure and

white space are incredibly important to maintain with changing element widths.

We'll look at that later in our video on responsive typography