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