Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up