Responsive Typography3:14 with Hope Armstrong
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.
[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 up