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 many characters should fit on a line of text? How do I give my type room to breathe? We’ll be addressing these questions in this video on horizontal space.
Elements of Typographic Style, Robert Bringhurst
Line Length, Web Typography Overview
Fluid Type, Trent Walton
Whitespace, Mark Boutlon
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
Once we get a good size for
0:00
our body text, we want to take a look at
our measure in space.
0:01
We'll first talk about measure, which is
also known as line length,
0:05
because it deals with how many characters
fit on each line of text.
0:09
Then we'll discuss the white space around
the text created by margins or padding.
0:12
These two concepts both work together to
create readable layouts which give
0:17
the type room to breathe.
0:21
First up is our measure.
0:23
In Elements of Typographic Style, Robert
Bringhurst recommends a measure of
0:25
45 to 75 characters per line for a single
column of text.
0:29
The mid-60s are not just an important
cultural period in America's history,
0:33
as popularly portrayed by Madmen.
0:38
They're also thought of as the ideal
measure for
0:40
text, counting spaces, and words.
0:42
That might have been a little cheesy, but
hopefully memorable, nonetheless.
0:45
A measure that's too long can tire out
readers' eyes as they have to
0:50
travel across the screen and back multiple
times.
0:54
When shifting to the next line below, they
can potentially lose their place.
0:58
A measure that's too short will have
readers' eyes quickly jumping back and
1:02
forth to the next line, which is again
quite exhausting and jarring.
1:06
A measure that's just right will be
comfortable to the user,
1:10
creating an enjoyable reading experience.
1:13
Remember, 45 to 75 characters works well,
with the mid sixties being ideal.
1:15
If you're working with multiple columns,
you can shoot for the 40 to 50 range.
1:21
In our workspace here, I removed our list
as it's no longer needed for this example.
1:25
Our layout currently isn't very readable,
1:31
because it's spanning the whole width of
the browser.
1:33
Based on a technique by Trent Walton,
we're gonna figure out how to get good
1:36
measure by placing a bold asterisk at the
45th and 75th characters in the HTML.
1:40
We can remove this later, but this guides
us and
1:46
gives us a good idea on where our lines
should break.
1:49
If these two asterisks end up on the same
line,
1:52
then we know we need to fix our measure.
1:55
Let's head back to the CSS and add a max
width to our container class.
1:57
A good place to start is by multiplying
your body font size by 30,
2:02
since the body font size is 1.25 m, or 20
pixels,
2:07
we could set a max width of 37.5 rem, or
600 pixels.
2:10
Notice the use of rem here.
2:16
I prefer it for container widths, as it's
scalable and keeps the math fairly simple.
2:18
We'll save, refresh our browser, great,
2:23
the asterisks now fall on two separate
lines, which is exactly what we want.
2:27
And the container's width feels more
appropriate.
2:31
Always take time to read through a few
paragraphs to make sure
2:34
the measure feels appropriate, or needs
adjusting.
2:37
Next, let's talk about the white space to
the left and right of our type.
2:41
Margins, or padding should be used to give
your type room to breathe.
2:45
If a sentence comes too close to another
element then it
2:49
can disrupt the flow of reading.
2:52
White space is often under utilized in web
design.
2:54
Which results in cramped and cluttered
layouts.
2:57
Also, it should be noted that white space
doesn't have to be white.
3:01
If you have a dark background with lighter
text,
3:05
we would still call that area around the
text white space.
3:07
Let's check out thegreatdiscontent.com for
a good example.
3:11
Here, we have ample amounts of whitespace
above, below, and around the type.
3:15
The words are not closing in on borders,
they're given room to breathe and
3:22
live inside their content block.
3:26
The columns are not flowing too close to
one another and competing for
3:30
each other's space, because they've been
given the necessary white space.
3:34
As you can see, white space can clean up a
design and give it an elegant, smooth,
3:38
professional feel and emphasis on the
content by framing it with empty space.
3:42
Currently, in our example, the type is
brushed up too close to the left side.
3:48
So, lets center our container element by
giving it a margin of zero auto.
3:55
We'll refresh, and we see that it's moved
to the middle of the page.
4:02
This opens up a lot of great white space
around our
4:05
type creating much more comfortable
reading experience.
4:08
This is a much simpler example, cuz we're
only dealing with one column.
4:11
So remember to give necessary amounts of
white space with elements or
4:15
multiple columns of text on your page.
4:19
This might look good now, but if we
decrease the width of
4:21
our browser we see the measure and our
white space quickly decrease with it.
4:24
When responsive design gets thrown into
the mix, good measure and
4:32
white space are incredibly important to
maintain with changing element widths.
4:35
We'll look at that later in our video on
responsive typography
4:40
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