Now, let's address the vertical space in our

design by adjusting our line heights and looking at vertical rhythm.

Line height, also referred to as letting or

line spacing, deals with the vertical space between consecutive lines of text.

You might be familiar with it as single or

double spacing in document editors like Word.

The line height property in CSS adds space above and below the text.

The default line height is often too small for body copy.

We can see this on our page as our lines or text feel somewhat cramped together.

This can be changed through the line height property with pixels, ems and more.

But, one of the best ways to handle this, is through a simple number value,

such as line height 1.6.

This number is multiplied to the font size.

So in this case, our line height would be 1.25em, or

20 pixels multiplied by 1.6 for a total of 2em or 32 pixels.

This is also helpful for scalable layouts, since it's not a fixed unit.

Let's go check it out.

Our lines of text are much more open and

allow for better legibility and readability.

For reference, I've seen well built typographic sites utilize line

heights ranging from 1.35 to 1.85 for body text.

Every typeface is different, so line heights can vary,

1.5 tends to be a good starting place, and is commonly used.

Figure out a good, comfortable line height for

your body copy first, because it will be paramount to establishing vertical rhythm.

Before we get into rhythm, let's take a look at our headings.

I've added a bit more text to them to make them break to the next line, so

we can set their line height.

You can put in whatever text you want, the point is to just get them to

the next line, so we can figure out a good line height for them.

We'll be removing them later so it's not a big deal.

A general rule of thumb is as heading sizes increase,

your line height can decrease.

The line height that worked well for the body, will most likely be too spacious for

your bigger headings.

So here I'm setting our h1 to 1.1,

our h2 to 1.2, and our h3 at 1.3.

We'll save and refresh.

And that's a much more normal or natural line height to those headings.

Different font sizes and

families require different values, so be sure to test what works best.

Great, now that those are adjusted, we can look at our vertical rhythm.

The spacing between lines of text creates a rhythm which can balance a layout and

enhance readability.

When we read, we recognize patterns.

If a layout has consistent line and paragraph spacing,

we'll develop a pattern recognition for it after reading a few lines of text.

This will help us identify other identical elements as part of the same pattern.

An unbalanced rhythm can disorient a reader.

Vertical rhythm balances the spacing and

arrangement of text as a user reads down the page.

Every line of text has a baseline it sits on.

If each line of text sits on the rhythmic baseline,

then you can say it has consistent vertical balance or rhythm.

The concept of vertical rhythm applies first and foremost, to paragraph text.

You can also utilize headings, sub-headings, or

images to flow in synch with your rhythm,

but it's often hard to perfectly execute unless the site's content is static.

Robert Bringhurst writes that headings, subheads, block quotations,

footnotes, illustrations, captions and other intrusions into the text, creates

syncopations and variations against the base rhythm of regularly lettered lines.

These variations can and should add life to the page.

But the main text should also return after each variation precisely on beat and

in phase.

That means it's okay if [SOUND] a heading or image breaks rhythm a bit.

What's most important is your paragraph text returns to

its rhythm after each element is introduced.

This offers consistent,

predictable line spacing, as the reader scrolls through the content.

Let's see how we can create a consistent vertical rhythm in our example.

I've removed the extra words from our headings as they're no longer necessary.

We'll start by using a simple tool at Basehold.it,

which will render a baseline overlay on our page.

We'll copy the link here and paste it into the head of our HTML.

[BLANK_AUDIO]

The number at the end, refers to how many pixels apart each base line is.

This should correspond to the line height of our body text.

As mentioned before, our line height comes out to be 32 pixels, so

we'll change this number to 32.

When we refresh our page, we now see our baseline grid appearing.

Notice, though, how the lines of text are not consistently sitting on the baseline,

but rather in between them and they're not consistently in the same place.

This is what we would call, poor rhythm.

Let's change that.

To start, let's get our top text elements aligned to the baseline.

So I'm gonna write some code and then explain what it does.

[BLANK_AUDIO]

I've added some top and bottom padding to our container.

I've added some bottom padding to our h1.

And I've added some more bottom padding to our h3.

This will space them out,

which gives them room to breathe and lines them up with their baselines.

Let's go check it out.

When we refresh, we see that our text is beginning to line up with our baselines.

But we also notice that the following paragraph breaks away from

the baseline grid.

To fix this, I can set the paragraphs top margin to 0,

and this bottom margin to 1.6em, which matches with our line height.

We'll save, and refresh.

This will ensure, when a paragraph follows a paragraph, there will be a slight space

between, and then the next paragraph will return to the proper rhythm.

You can also handle paragraph rhythm by setting the top and

bottom margin to 0 on our paragraphs.

In this instance, our space denoting a paragraph will disappear.

So we'll want to add a text indent of 2em, so

that the following paragraph will be easily noticed.

We'll refresh here.

Great, we see that our rhythm stays intact, and

we can easily notice where another paragraph starts.

This text indent is not necessary on leading paragraphs,

because their start is already noticeable.

Now we can start to think about our other elements.

Our h2 disrupts the rhythm of our body copy.

So let's add some margins above and below to fix that.

Let's see how that looks.

Great, I like to have a bit more margin above than below here, so the heading

feels separate from the paragraph above and tied to the paragraph below.

We can even add an image and keep our text in rhythm.

I already have this set up in our HTML and

here I've set up the necessary margins above and below.

I've also given it a max width of 100% so it fits in our container.

Let's go check it out.

We scroll down, we see the images here,

and our text returns to its normal rhythm as before.

Let's take the baseline grid away, and see what it all looks like.

Great, the page has much better rhythm and overall feel.

Keep in mind if we were to change any font sizes, line heights, and

margins, this will also affect vertical rhythm.

Don't think of these bars as a prison that we're locked into.

Think of them as a tool to help us make good design choices.

Something could be perfectly lined up on a baseline, but

that doesn't mean it feels right.

Go with what looks and feels right.

When setting this page up, I could have made the line heights of our

headings line up perfectly with the baseline grid.

But then, the text would have felt too tight if there was a line break.

This does take some tinkering, but don't lose sight of the forest for the trees.

Keep in mind your first priority is making sure your body's rhythm works well with

its line height and paragraph structure.

This lesson concludes our basic web typography stage.

If you can get all these concepts down, it'll be no time before you're

creating typographically sound websites with good scale and rhythm.

See what I did there?

All right, I'll see you in the next stage for more bad jokes and

puns as we look at laying out type for the web.