- Weights and Styles 9:44
- Weights and Styles: Review 5 questions
- Font-Sizing: Px, Em, and Rem 5:20
- Font-Sizing: Px, Em, and Rem - Part 2 4:41
- Font-sizing: Review 6 questions
- Horizontal Space: Measure and Margins 4:44
- Horizontal Space: Review 5 questions
- Vertical Space: Line-Height and Vertical Rhythm 8:42
- Vertical Space: Review 5 questions
Preview
Video Player
00:00
00:00
Horizontal Space: Measure and Margins
4:44How 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.
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