1
00:00:00,025 --> 00:00:04,813
[SOUND] What might be a joy
to read on a desktop,

2
00:00:04,813 --> 00:00:10,990
quickly becomes a burden for
readers on smaller screens.

3
00:00:10,990 --> 00:00:13,372
Wide space quickly decreases,

4
00:00:13,372 --> 00:00:19,680
our large font sizes overtake the screen,
and the content gets cramped.

5
00:00:19,680 --> 00:00:20,580
In this video,

6
00:00:20,580 --> 00:00:23,910
we'll look at how to remedy those
problems through responsive typography.

7
00:00:24,920 --> 00:00:29,090
Responsive typography is
a subset of responsive design,

8
00:00:29,090 --> 00:00:33,285
focusing solely on the typography as
it responds to different screen sizes.

9
00:00:33,285 --> 00:00:37,310
It's extremely important and
its details are often overlooked.

10
00:00:38,650 --> 00:00:42,870
Creating a pleasant reading experience for
desktop browsers is great.

11
00:00:42,870 --> 00:00:46,880
But we also must account for the other
ways someone may be viewing our site.

12
00:00:48,360 --> 00:00:51,878
Here's some pointers for how type to
change for mobile versus desktop.

13
00:00:51,878 --> 00:00:55,400
First, text size.

14
00:00:55,400 --> 00:00:59,108
Generally, for mobile and
large body text size,

15
00:00:59,108 --> 00:01:04,190
increasing the text size makes it
easier to read on a smaller screen.

16
00:01:04,190 --> 00:01:07,140
As for headings,
they're often too big on mobile.

17
00:01:07,140 --> 00:01:10,140
So it's generally advisable
to make them smaller for

18
00:01:10,140 --> 00:01:16,130
mobile to free up space and make more
text fit comfortably on one or two lines.

19
00:01:16,130 --> 00:01:17,540
Tighten the letting.

20
00:01:17,540 --> 00:01:21,520
Since the screen is smaller, you want
to make the best use of that space

21
00:01:21,520 --> 00:01:24,400
by tightening the space between the lines.

22
00:01:24,400 --> 00:01:27,860
Since line length is naturally
shorter on the small screen,

23
00:01:27,860 --> 00:01:30,040
you can get away with tighter letting.

24
00:01:30,040 --> 00:01:33,380
Just be careful the letting is ample
enough to be comfortable to read.

25
00:01:34,550 --> 00:01:36,780
Pay attention to line link.

26
00:01:36,780 --> 00:01:37,460
On mobile,

27
00:01:37,460 --> 00:01:43,140
the number of characters per line should
generally fall within 30 to 40 characters.

28
00:01:43,140 --> 00:01:45,360
Adjust padding as necessary.

29
00:01:45,360 --> 00:01:49,840
You may notice the padding between
paragraphs of text is ample on desktop.

30
00:01:49,840 --> 00:01:53,810
But the same amount of space on
mobile creates awkwardly wide gaps.

31
00:01:55,290 --> 00:01:58,140
Ensure clickable elements
such as links and

32
00:01:58,140 --> 00:02:01,625
buttons are large enough
to tap with a fingertip.

33
00:02:01,625 --> 00:02:06,580
In the human interface guidelines,
Apple recommends a minimum target size

34
00:02:06,580 --> 00:02:09,880
of 44 pixels wide by 44 pixels tall.

35
00:02:11,112 --> 00:02:17,630
In Android's material design guidelines,
48 by 48 DP is recommended.

36
00:02:17,630 --> 00:02:20,460
DP stands for device pixels.

37
00:02:20,460 --> 00:02:24,090
Pixels and DP are different but similar.

38
00:02:24,090 --> 00:02:28,850
DP is the resolution in relation to
the physical size of the screen.

39
00:02:28,850 --> 00:02:31,640
Devices have different pixel densities.

40
00:02:31,640 --> 00:02:33,850
Check out a link in the teachers
notes to read more.

41
00:02:36,020 --> 00:02:40,410
In summary, as you practice responsive
typography, adjust the text size,

42
00:02:40,410 --> 00:02:45,130
letting, line length, padding and
clickable areas necessary.

43
00:02:45,130 --> 00:02:47,790
Your hierarchy might need rearranging, so

44
00:02:47,790 --> 00:02:50,619
be sure to translate it clearly
at different screen sizes.

45
00:02:51,980 --> 00:02:56,260
Lastly, your headings are prone to
be too big on small screen sizes, so

46
00:02:56,260 --> 00:02:58,060
don't forget to give them some finesse.

47
00:02:59,290 --> 00:03:02,550
I hope that clears up
responsive typography for you.

48
00:03:02,550 --> 00:03:06,850
And gives you some simple rules to
guide you along as you practice.

49
00:03:06,850 --> 00:03:10,370
Remember to trust your gut
too on what looks right.

50
00:03:10,370 --> 00:03:13,640
In the next video,
I'll introduce more grid systems.