Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Typography for Designers!
You have completed Typography for Designers!
Preview
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