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
When responsive design is thrown into the mix, typography on sites is often neglected at different screen sizes. We’ll look at the main determining factor we should be thinking about as we make responsive design choices: measure.
Responsive Web Typography, Elliot Jay Stocks
A More Modern Scale for Web Typography, Jason Pamental
Type, Responsively, Jason Pamental
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
Our example web page has really taken
shape over these past few videos and
0:00
is now much more legible, readable and
engaging through the use of typography.
0:04
But what might be a joy to read on a
desktop quickly becomes a burden for
0:10
readers on smaller sized screens.
0:14
Our measure quickly decreases.
0:16
Our font sizes overtake the screen.
0:18
And space gets cramped.
0:20
In this video, we're gonna remedy those
problems through responsive typography.
0:22
If you haven't checked out media queries
in Tree House's CSS course,
0:27
then I recommend doing so before you dive
in.
0:30
Responsive typography is a subset of
responsive design,
0:33
focusing solely on the typography as a
response to different screen sizes.
0:37
It's extremely important and its details
are often overlooked on websites today.
0:42
Creating a pleasant reading experience for
desktop browsers is great.
0:48
But we must also account for any other
ways someone may be viewing our site.
0:52
In an article on advance web typography,
Elliot Jay Stocks wrote,
0:57
My principle concern around web type in a
responsive world is all about measure.
1:01
I think this is really helpful.
1:06
Because measure, or how many characters
fit on a line of text,
1:08
will determine when to make media query
break points which will change font sizes,
1:11
spacing adjustments, line height changes,
and more as necessary.
1:16
All right.
Let's look at our design again.
1:21
Notice I reimplemented our two asterisks
at the 45th and 75th characters as
1:24
these will help us make decisions on when
to change our type responsively.
1:29
As our browser size changes if these
asterisks fall in the same line,
1:33
then we know we need to adjust our
measure.
1:38
I've also removed our drop cap class for
1:40
the time being as it was throwing off this
technique.
1:43
We'll reinstate it once we've got our body
text down responsively.
1:46
Let's begin to resize our browser and take
note of what we see.
1:50
As I bring the window in,
1:54
we notice that our type is getting really
close to the edges up here.
1:55
And then as it gets even smaller,
1:59
our body text is getting close to the
edges over here.
2:01
To correct that, we'll want to set a width
of 88% to our body set container.
2:05
And then for our title, we'll add some
padding of 6% to the left and right.
2:11
Let's save it and check it out.
2:16
As we resize it, we see our type is no
longer getting too close to the edge.
2:19
And at smaller sizes, our body is given
some good room to breath.
2:24
Now, we'll want to start looking at our
measure.
2:29
As I pull the window in, we notice at
about 512 pixels or
2:32
16 pixels, that are two asterisks are now
on the same line here.
2:37
We're gonna want to adjust that.
2:41
So I actually prefer it a little sooner.
2:43
So let's say 544 pixels to be safe.
2:46
So I'm going to drag this back out.
2:50
And let's head over to our CSS to change
that.
2:51
So at 544 pixels, we're gonna divide that
number by 16,
2:56
which is the default number for ems, and
that's gonna give us 34 em.
2:59
We wouldn't want to use pixels in media
query sizes because our
3:03
measure could get distorted if someone
increased the browser font size.
3:08
That's because the font size would
increase.
3:11
But the media query would not scale with
it because it's a fixed measurement.
3:14
To get our asterisks back on the same
line,
3:18
we'll need to decrease the font size.
3:21
A smaller size is okay here,
3:24
because people hold smaller-sized screen
media, like phones, closer to their face.
3:26
Whereas desktops are usually a little
further away.
3:32
You don't wanna go too small though.
3:35
So I'd recommend not going any less than
14 pixels for body copy.
3:37
Our body font size was originally at
1.25em or 20 pixels.
3:42
So the smaller screen size, lets set it at
1em or 16 pixels.
3:47
Since our heading and paragraphs are set
at ems and
3:51
are relative to our body font size.
3:54
They'll automatically be adjusted and
scaled down with this new em.
3:57
This keeps our typographic scale intact
for font sizing.
4:01
Scale can be hard to maintain with so many
different moving pieces.
4:06
This is just one way to keep it.
4:10
But sometimes, it can still go [UNKNOWN]
with large headings.
4:12
Jason Pimentel has great article in the
teacher's notes on good scale for
4:15
web typography.
4:20
Let's check out our site.
4:21
As I size the browser down, we notice now,
4:26
that our type jumps to be a little smaller
and so does our heading and h2's.
4:29
That's great.
4:33
As we go even smaller,
4:36
we notice that the asterisks have jumped
to the same line there.
4:37
That's actually okay.
4:41
Our measure can be more around the 40 to
50 character mark,
4:43
because reading on small screens is a lot
like column reading.
4:47
I don't wanna scale my text any smaller
than this, so
4:51
I'll leave the body copy at that.
4:53
Because we've set up our font size as well
in the beginning,
4:55
it made adjusting the body text
responsively a lot smoother.
4:58
Sometimes line heights need tightening up
as text scales downward.
5:02
So be sure to check that, especially in
your headings.
5:05
For larger size screens, it can be smart
to have another query as users tend to
5:09
sit or stand a little further back from
them.
5:13
So we'll want our sizes to be a bit
bigger.
5:16
For that, we'll head over to our media
queries again and put a min-width of
5:19
94em or 1504 pixels and we'll increase our
body font size to 1.5em.
5:24
That means we'll adjust our container's
class to have a max-width of 46 rim.
5:30
This width keeps a good measure with the
new font size.
5:35
Since our screen size for this video is
1280 pixels,
5:39
I won't be able to stretch the browser to
larger sizes.
5:43
If you have a larger-sized screen, then by
all means,
5:46
check out these changes in your work
space.
5:48
With our body copy honed it, we'll now
wanna go back and
5:51
reinstate our drop cap class.
5:54
[BLANK_AUDIO]
5:55
And we can remove those asterisks as
they're no longer necessary.
5:59
I'll save our HTML and check it out.
6:05
Great.
It's looking good.
6:08
Now as we resize, we see since our drop
cap was set in ems,
6:08
it's also resizing with it.
6:13
We've been working with a single column
layout, so it's pretty straightforward.
6:16
But let's say you have a multiple column
layout.
6:19
You can create good,
6:22
responsive typography by keeping a measure
of 40 to 50 words per column.
6:23
When you've exhausted your means of
achieving that measure through sizing and
6:28
space, then you know it's time to create a
break point and
6:31
move the layout into a single column.
6:34
Don't let your columns get too tight with
text.
6:37
Finally, let's take a look at our main
title.
6:40
The rest of our heading scale well at
smaller sizes, but
6:44
our title still feels awfully big.
6:47
We can change this by adjusting our H1 and
our media query for smaller size screens.
6:50
Let's give it a font size of 4em.
6:55
[BLANK_AUDIO]
6:57
I'll refresh and let's check it out.
7:03
Yeah.
7:06
That's much better and feels more
appropriate at those sizes.
7:07
If you want further control over headline
size,
7:11
then I recommend checking out
fittextjs.com in the teacher's notes.
7:13
The plugin scales headlines sizes in
proportion to the browser window,
7:18
making it really nice for the titles.
7:22
Currently, I like the way ours is looking.
7:25
But notice as our browser's size changes,
the word world is jumping to its own line,
7:28
and it does it again here.
7:32
A single word on a line is called an
orphan in typography and
7:35
can create unbalance.
7:39
Currently, there's not a lot of great ways
to care for orphans with CSS.
7:41
For this example,
7:45
I'm gonna insert a non breaking space
between the word the and worlds.
7:46
[BLANK_AUDIO]
7:51
Lets save that and check it out.
7:54
So as our browser size decreases, we see
that worlds and
7:57
the have now jumped to the same line.
8:01
And again, they do it here.
8:03
Great.
I like that a lot more and
8:05
it balances the design from being too top
heavy.
8:07
In our example, we have a lot of control
over the layout.
8:11
But when you're building a system or
template for
8:15
people to use, you might not always be
able to fine tune it to this degree.
8:17
Hopefully in the future, we'll have the
power in CSS to refine things like this.
8:22
There's actually an orphan element in CSS,
but it controls something very
8:27
different by adjusting the lines and
paragraph line breaks.
8:31
In summary, as you practice responsive
typography,
8:36
remember, by laying a solid foundation
with scalable units of measure and
8:39
a good typographic scale, you can save
code and time.
8:44
Use measure a as a basis for when to
create breakpoints for
8:48
body copy and columns by adjusting the
font size, padding space, and
8:51
line height as necessary.
8:56
Your hierarchy might need rearranging, so
8:57
be sure to translate it clearly at
different screen sizes.
9:00
Lastly, your headings are prone to be too
big at small screen sizes.
9:03
So don't forget to give them some finesse.
9:07
I hope that clears up responsive
typography for
9:09
you and gives you some simple rules to
guide you along as you practice.
9:12
Remember to trust your gut on what looks
right.
9:17
I'll see you in the next video as we look
at advanced web typography and the future.
9:18
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