Responsive Typography

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