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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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.
Further Reading
- Line Spacing, Matthew Butterick
- Vertical Motion
- Vertical Rhythm and Font Baselines with Styled Components
Resources
- Using a baseline grid in Figma
- Basehold.it and FlowType.js - grid coding tools
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 design by adjusting our line
0:00
heights and looking at vertical rhythm.
0:04
Leading also referred to as line height 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
double spacing and
0:15
document editors like Word.
0:20
For reference, I've seen well
built typographic sites utilize
0:22
line heights ranging from 135% to 185% for
body text.
0:27
Every typeface is different,
so line heights can vary.
0:32
150% tends to be a good starting place and
as commonly used.
0:37
Figure out a good, comfortable leading for
0:41
your body copy first because it will be
paramount to establishing vertical rhythm.
0:43
I'll use 160% for the body text.
0:48
Before we get into rhythm,
let's take a look at our headings.
0:57
I'll add a bit more text to make
them break to the next line so
1:01
we can set their line height.
1:04
A general rule of thumb is as heading
sizes increase, your line height decrease.
1:11
The line height that worked for the body
would most likely be to spacious for
1:16
your bigger headings.
1:20
Here I'm setting our heading 1 at 110%,
1:22
our heading 2 at 120% and
our heading 3 at 130%.
1:26
Different font sizes and
families require different values.
1:32
So be sure to test what works best.
1:36
Great, now that those are adjusted,
we can look at our vertical rhythm.
1:38
The space between paragraphs
is decent however,
1:45
there is more we can do with grids.
1:48
We will get into that shortly.
1:50
The spacing between lines of texts creates
a rhythm that can balance a layout and
1:51
enhance readability.
1:56
When we read we recognize patterns.
1:58
If the layout has a consistent line and
paragraph spacing,
2:00
we develop pattern recognition
after reading a few lines of text.
2:05
This will help us identify other identical
spaces as part of the same pattern,
2:10
and unbalanced rhythm can
disorient the reader.
2:16
Vertical rhythm balances the spacing and
arrangement of text.
2:20
As the user reads down the page, every
bit of text has a baseline it sits on.
2:23
If each line of text is
on the rhythmic baseline,
2:29
then you can say that it has
consistent vertical balance or rhythm.
2:32
The concept of vertical rhythm applies
first and foremost to paragraph text.
2:37
You can also utilize
headings sub-headings or
2:43
images to flow in sync with your rhythm.
2:46
But it's often hard to perfectly execute
unless a site's content is static.
2:49
Robert Bringhurst writes that,
2:54
headings sub-heads block quotations,
footnotes, illustrations,
2:57
captions and other intrusions into
the tax create syncopations and
3:02
variations against the base
rhythm of regularly leaded lines.
3:07
These variations can and
should add life to the page.
3:11
But the main tech should
also return after each
3:15
variation precisely on beat and in phase.
3:19
That means it's okay if the heading or
image breaks rhythm a bit.
3:22
But most important is your paragraph
texts returning to its rhythm after that
3:27
element is introduced.
3:32
This offers consistent,
3:33
predictable line spacing as the reader
scrolls through the content.
3:35
Next, we'll create a consistent
rhythm using a baseline grid.
3:40
Grids create a system for
arranging content on a screen.
3:45
This results in layouts
with an inherent rhythm.
3:49
When space is divided into boxes,
content can be contained in the rows and
3:53
columns, or
spread to fill multiple rows and columns.
3:59
There's a long history of grid systems and
graphic design and
4:03
we see them and web and
app design as well.
4:08
Designing for
4:11
the web often involves creating a design
that will work across multiple devices.
4:11
As such, while a website may allow for
4:17
a multi-column design on a larger
screen size such as a desktop,
4:20
the same website on a smartphone
may render as a single column so
4:25
it's easier to read
within a limited space.
4:29
Baseline grids divide the artboard in
relation to the elements on the page.
4:33
We'll start by using layout grid in Figma.
4:37
First, select the frame, now you'll
see the layout grid module appear.
4:42
There are three different
forms of grids to choose from.
4:48
Grid, Column, and Row.
4:52
Let's choose Grid, which is a uniform
grid that includes columns and rows.
4:54
The size refers to how many
pixels apart each baseline is.
4:59
This should correspond to
the line height of our body text.
5:03
As mentioned before, our line height is
160%, and the text size is 20 pixels.
5:07
This means the line height
comes out to be 32 pixels.
5:14
So that's what we'll want
to set our baseline to.
5:19
Notice how the lines of text are not
sitting on the baseline, but
5:22
rather in between them and they're
not consistently in the same place.
5:26
This is what we call poor rhythm.
5:30
Let's change that.
5:33
To start, let's get our title aligned.
5:34
Next, we need to adjust
the rest of the text.
5:38
We are able to add 30 pixels of
spacing in between paragraphs but
5:41
that's the limit to the control we have if
we keep all of this text in one text box.
5:47
So let's break these pieces out into
their own text boxes for more control.
5:53
I've done that in this next artboard.
5:59
Now, we can align them to the grid.
6:06
Just align them to the horizontal lines
and don't worry about the vertical lines.
6:08
Where the planet Mars section starts,
6:13
notice how I skipped two rows of spacing
to give it extra vertical spacing.
6:16
This makes it clear a new
section is starting, and
6:21
keeps the headline close to its
corresponding intro paragraph.
6:24
If I left one row before and
after the heading,
6:27
I'd run into a UX issue
called bloating heading.
6:31
This occurs when the vertical spacing
above and below a heading makes
6:34
it difficult to tell which heading
belongs to which series of paragraphs.
6:39
All right, great,
we see our rhythm stays intact and
6:45
we can easily notice where
another paragraph starts.
6:47
A text indent is not necessary for
leading paragraphs,
6:50
because their start already is noticeable.
6:53
Let's take the baseline grid
away to get a final look.
6:56
This page has much better rhythm now.
7:00
Keep in mind if we were to change
any font sizes, line heights, or
7:04
margins that will affect vertical rhythm.
7:09
Grids are a tool to help us
make good design choices.
7:12
But it isn't fail proof, something could
be perfectly lined up to a baseline,
7:16
but that doesn't mean it feels right.
7:21
Go with what feels right.
7:24
This does take some tinkering, but don't
lose sight of the forest for the trees.
7:25
Keep in mind your first priority is making
sure your body's rhythm works well with
7:31
its line height and paragraph structure.
7:35
And as a final note,
break the grid when necessary.
7:38
This makes a bold statement and is a
technique for making an element stand out.
7:42
Have fun with it.
7:48
Now that you have experienced
using a baseline grid,
7:49
let's delve deeper into
setting paragraphs.
7:53
There are two main options.
7:56
For option one,
7:59
you can simply use an empty line to
add space between the paragraphs.
8:00
That's how it is in our project right now.
8:04
As for option two,
you can indent the first line.
8:07
Let's look at some pointers.
8:10
The recommended amount
of indentation is one or
8:12
in other words,
the base size of the body text.
8:16
And now for some dont's.
8:20
Don't indent the first line of
the first paragraph after a heading,
8:22
or after an image or any other figure.
8:27
Also don't add extra space
in between the paragraphs.
8:30
Let us see how this looks on our project.
8:34
Now I have two paragraphs
in the same text box, but
8:38
I just want to apply paragraph
indentation to the second paragraph.
8:42
Remember, leading paragraphs
don't get indented.
8:47
So I'll split the second
paragraph into its own text box.
8:50
Then I'll set the paragraph
indentation to 20 pixels.
8:54
Remember, this matches the body text size.
8:59
And for good measure,
I'll remove the paragraph spacing.
9:09
Then I'll turn the grid back
on to align everything again.
9:16
It's up to you which option you prefer.
9:23
Just be consistent throughout the design.
9:25
If you can get all these concepts down,
it'll be no time before you're
9:28
creating typographically sound
designs with good scale and rhythm.
9:33
All right, I'll see you in the next stage,
9:38
where we'll get into
the details of laying out type.
9:41
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