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
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 factors we should be thinking about as we make responsive design choices.
Resources
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
[SOUND] What might be a joy
to read on a desktop,
0:00
quickly becomes a burden for
readers on smaller screens.
0:04
Wide space quickly decreases,
0:10
our large font sizes overtake the screen,
and the content gets cramped.
0:13
In this video,
0:19
we'll look at how to remedy those
problems through responsive typography.
0:20
Responsive typography is
a subset of responsive design,
0:24
focusing solely on the typography as
it responds to different screen sizes.
0:29
It's extremely important and
its details are often overlooked.
0:33
Creating a pleasant reading experience for
desktop browsers is great.
0:38
But we also must account for the other
ways someone may be viewing our site.
0:42
Here's some pointers for how type to
change for mobile versus desktop.
0:48
First, text size.
0:51
Generally, for mobile and
large body text size,
0:55
increasing the text size makes it
easier to read on a smaller screen.
0:59
As for headings,
they're often too big on mobile.
1:04
So it's generally advisable
to make them smaller for
1:07
mobile to free up space and make more
text fit comfortably on one or two lines.
1:10
Tighten the letting.
1:16
Since the screen is smaller, you want
to make the best use of that space
1:17
by tightening the space between the lines.
1:21
Since line length is naturally
shorter on the small screen,
1:24
you can get away with tighter letting.
1:27
Just be careful the letting is ample
enough to be comfortable to read.
1:30
Pay attention to line link.
1:34
On mobile,
1:36
the number of characters per line should
generally fall within 30 to 40 characters.
1:37
Adjust padding as necessary.
1:43
You may notice the padding between
paragraphs of text is ample on desktop.
1:45
But the same amount of space on
mobile creates awkwardly wide gaps.
1:49
Ensure clickable elements
such as links and
1:55
buttons are large enough
to tap with a fingertip.
1:58
In the human interface guidelines,
Apple recommends a minimum target size
2:01
of 44 pixels wide by 44 pixels tall.
2:06
In Android's material design guidelines,
48 by 48 DP is recommended.
2:11
DP stands for device pixels.
2:17
Pixels and DP are different but similar.
2:20
DP is the resolution in relation to
the physical size of the screen.
2:24
Devices have different pixel densities.
2:28
Check out a link in the teachers
notes to read more.
2:31
In summary, as you practice responsive
typography, adjust the text size,
2:36
letting, line length, padding and
clickable areas necessary.
2:40
Your hierarchy might need rearranging, so
2:45
be sure to translate it clearly
at different screen sizes.
2:47
Lastly, your headings are prone to
be too big on small screen sizes, so
2:51
don't forget to give them some finesse.
2:56
I hope that clears up
responsive typography for you.
2:59
And gives you some simple rules to
guide you along as you practice.
3:02
Remember to trust your gut
too on what looks right.
3:06
In the next video,
I'll introduce more grid systems.
3:10
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