1 00:00:00,560 --> 00:00:04,670 Our example web page has really taken shape over these past few videos and 2 00:00:04,670 --> 00:00:10,320 is now much more legible, readable and engaging through the use of typography. 3 00:00:10,320 --> 00:00:14,020 But what might be a joy to read on a desktop quickly becomes a burden for 4 00:00:14,020 --> 00:00:16,440 readers on smaller sized screens. 5 00:00:16,440 --> 00:00:18,250 Our measure quickly decreases. 6 00:00:18,250 --> 00:00:20,420 Our font sizes overtake the screen. 7 00:00:20,420 --> 00:00:21,400 And space gets cramped. 8 00:00:22,810 --> 00:00:27,440 In this video, we're gonna remedy those problems through responsive typography. 9 00:00:27,440 --> 00:00:30,900 If you haven't checked out media queries in Tree House's CSS course, 10 00:00:30,900 --> 00:00:32,760 then I recommend doing so before you dive in. 11 00:00:33,880 --> 00:00:37,305 Responsive typography is a subset of responsive design, 12 00:00:37,305 --> 00:00:42,560 focusing solely on the typography as a response to different screen sizes. 13 00:00:42,560 --> 00:00:48,220 It's extremely important and its details are often overlooked on websites today. 14 00:00:48,220 --> 00:00:52,220 Creating a pleasant reading experience for desktop browsers is great. 15 00:00:52,220 --> 00:00:55,960 But we must also account for any other ways someone may be viewing our site. 16 00:00:57,460 --> 00:01:01,660 In an article on advance web typography, Elliot Jay Stocks wrote, 17 00:01:01,660 --> 00:01:06,980 My principle concern around web type in a responsive world is all about measure. 18 00:01:06,980 --> 00:01:08,550 I think this is really helpful. 19 00:01:08,550 --> 00:01:11,850 Because measure, or how many characters fit on a line of text, 20 00:01:11,850 --> 00:01:16,610 will determine when to make media query break points which will change font sizes, 21 00:01:16,610 --> 00:01:20,610 spacing adjustments, line height changes, and more as necessary. 22 00:01:21,820 --> 00:01:24,060 All right. Let's look at our design again. 23 00:01:24,060 --> 00:01:29,500 Notice I reimplemented our two asterisks at the 45th and 75th characters as 24 00:01:29,500 --> 00:01:33,840 these will help us make decisions on when to change our type responsively. 25 00:01:33,840 --> 00:01:38,270 As our browser size changes if these asterisks fall in the same line, 26 00:01:38,270 --> 00:01:40,610 then we know we need to adjust our measure. 27 00:01:40,610 --> 00:01:43,120 I've also removed our drop cap class for 28 00:01:43,120 --> 00:01:46,090 the time being as it was throwing off this technique. 29 00:01:46,090 --> 00:01:50,010 We'll reinstate it once we've got our body text down responsively. 30 00:01:50,010 --> 00:01:54,210 Let's begin to resize our browser and take note of what we see. 31 00:01:54,210 --> 00:01:55,730 As I bring the window in, 32 00:01:55,730 --> 00:01:59,890 we notice that our type is getting really close to the edges up here. 33 00:01:59,890 --> 00:02:01,600 And then as it gets even smaller, 34 00:02:01,600 --> 00:02:04,340 our body text is getting close to the edges over here. 35 00:02:05,800 --> 00:02:11,160 To correct that, we'll want to set a width of 88% to our body set container. 36 00:02:11,160 --> 00:02:16,740 And then for our title, we'll add some padding of 6% to the left and right. 37 00:02:16,740 --> 00:02:17,360 Let's save it and check it out. 38 00:02:19,700 --> 00:02:24,530 As we resize it, we see our type is no longer getting too close to the edge. 39 00:02:24,530 --> 00:02:28,540 And at smaller sizes, our body is given some good room to breath. 40 00:02:29,900 --> 00:02:32,540 Now, we'll want to start looking at our measure. 41 00:02:32,540 --> 00:02:37,380 As I pull the window in, we notice at about 512 pixels or 42 00:02:37,380 --> 00:02:41,590 16 pixels, that are two asterisks are now on the same line here. 43 00:02:41,590 --> 00:02:43,470 We're gonna want to adjust that. 44 00:02:43,470 --> 00:02:46,960 So I actually prefer it a little sooner. 45 00:02:46,960 --> 00:02:50,530 So let's say 544 pixels to be safe. 46 00:02:50,530 --> 00:02:51,720 So I'm going to drag this back out. 47 00:02:51,720 --> 00:02:54,790 And let's head over to our CSS to change that. 48 00:02:56,180 --> 00:02:59,960 So at 544 pixels, we're gonna divide that number by 16, 49 00:02:59,960 --> 00:03:03,490 which is the default number for ems, and that's gonna give us 34 em. 50 00:03:03,490 --> 00:03:08,000 We wouldn't want to use pixels in media query sizes because our 51 00:03:08,000 --> 00:03:11,960 measure could get distorted if someone increased the browser font size. 52 00:03:11,960 --> 00:03:14,430 That's because the font size would increase. 53 00:03:14,430 --> 00:03:18,940 But the media query would not scale with it because it's a fixed measurement. 54 00:03:18,940 --> 00:03:21,820 To get our asterisks back on the same line, 55 00:03:21,820 --> 00:03:24,340 we'll need to decrease the font size. 56 00:03:24,340 --> 00:03:26,260 A smaller size is okay here, 57 00:03:26,260 --> 00:03:32,020 because people hold smaller-sized screen media, like phones, closer to their face. 58 00:03:32,020 --> 00:03:35,490 Whereas desktops are usually a little further away. 59 00:03:35,490 --> 00:03:37,490 You don't wanna go too small though. 60 00:03:37,490 --> 00:03:42,230 So I'd recommend not going any less than 14 pixels for body copy. 61 00:03:42,230 --> 00:03:47,190 Our body font size was originally at 1.25em or 20 pixels. 62 00:03:47,190 --> 00:03:51,770 So the smaller screen size, lets set it at 1em or 16 pixels. 63 00:03:51,770 --> 00:03:54,760 Since our heading and paragraphs are set at ems and 64 00:03:54,760 --> 00:03:57,140 are relative to our body font size. 65 00:03:57,140 --> 00:04:01,780 They'll automatically be adjusted and scaled down with this new em. 66 00:04:01,780 --> 00:04:06,450 This keeps our typographic scale intact for font sizing. 67 00:04:06,450 --> 00:04:10,210 Scale can be hard to maintain with so many different moving pieces. 68 00:04:10,210 --> 00:04:12,090 This is just one way to keep it. 69 00:04:12,090 --> 00:04:15,630 But sometimes, it can still go [UNKNOWN] with large headings. 70 00:04:15,630 --> 00:04:20,080 Jason Pimentel has great article in the teacher's notes on good scale for 71 00:04:20,080 --> 00:04:21,840 web typography. 72 00:04:21,840 --> 00:04:22,780 Let's check out our site. 73 00:04:26,030 --> 00:04:29,330 As I size the browser down, we notice now, 74 00:04:29,330 --> 00:04:33,890 that our type jumps to be a little smaller and so does our heading and h2's. 75 00:04:33,890 --> 00:04:36,860 That's great. 76 00:04:36,860 --> 00:04:37,880 As we go even smaller, 77 00:04:37,880 --> 00:04:41,490 we notice that the asterisks have jumped to the same line there. 78 00:04:41,490 --> 00:04:43,310 That's actually okay. 79 00:04:43,310 --> 00:04:47,070 Our measure can be more around the 40 to 50 character mark, 80 00:04:47,070 --> 00:04:51,000 because reading on small screens is a lot like column reading. 81 00:04:51,000 --> 00:04:53,880 I don't wanna scale my text any smaller than this, so 82 00:04:53,880 --> 00:04:55,850 I'll leave the body copy at that. 83 00:04:55,850 --> 00:04:58,410 Because we've set up our font size as well in the beginning, 84 00:04:58,410 --> 00:05:02,140 it made adjusting the body text responsively a lot smoother. 85 00:05:02,140 --> 00:05:05,730 Sometimes line heights need tightening up as text scales downward. 86 00:05:05,730 --> 00:05:08,430 So be sure to check that, especially in your headings. 87 00:05:09,660 --> 00:05:13,650 For larger size screens, it can be smart to have another query as users tend to 88 00:05:13,650 --> 00:05:16,360 sit or stand a little further back from them. 89 00:05:16,360 --> 00:05:19,120 So we'll want our sizes to be a bit bigger. 90 00:05:19,120 --> 00:05:24,691 For that, we'll head over to our media queries again and put a min-width of 91 00:05:24,691 --> 00:05:30,457 94em or 1504 pixels and we'll increase our body font size to 1.5em. 92 00:05:30,457 --> 00:05:35,990 That means we'll adjust our container's class to have a max-width of 46 rim. 93 00:05:35,990 --> 00:05:39,240 This width keeps a good measure with the new font size. 94 00:05:39,240 --> 00:05:43,170 Since our screen size for this video is 1280 pixels, 95 00:05:43,170 --> 00:05:46,150 I won't be able to stretch the browser to larger sizes. 96 00:05:46,150 --> 00:05:48,720 If you have a larger-sized screen, then by all means, 97 00:05:48,720 --> 00:05:51,500 check out these changes in your work space. 98 00:05:51,500 --> 00:05:54,367 With our body copy honed it, we'll now wanna go back and 99 00:05:54,367 --> 00:05:55,957 reinstate our drop cap class. 100 00:05:55,957 --> 00:05:59,895 [BLANK_AUDIO] 101 00:05:59,895 --> 00:06:03,350 And we can remove those asterisks as they're no longer necessary. 102 00:06:05,120 --> 00:06:06,590 I'll save our HTML and check it out. 103 00:06:08,020 --> 00:06:08,840 Great. It's looking good. 104 00:06:08,840 --> 00:06:13,330 Now as we resize, we see since our drop cap was set in ems, 105 00:06:13,330 --> 00:06:14,580 it's also resizing with it. 106 00:06:16,290 --> 00:06:19,860 We've been working with a single column layout, so it's pretty straightforward. 107 00:06:19,860 --> 00:06:22,270 But let's say you have a multiple column layout. 108 00:06:22,270 --> 00:06:23,100 You can create good, 109 00:06:23,100 --> 00:06:28,290 responsive typography by keeping a measure of 40 to 50 words per column. 110 00:06:28,290 --> 00:06:31,700 When you've exhausted your means of achieving that measure through sizing and 111 00:06:31,700 --> 00:06:34,840 space, then you know it's time to create a break point and 112 00:06:34,840 --> 00:06:37,310 move the layout into a single column. 113 00:06:37,310 --> 00:06:40,130 Don't let your columns get too tight with text. 114 00:06:40,130 --> 00:06:42,410 Finally, let's take a look at our main title. 115 00:06:44,020 --> 00:06:47,430 The rest of our heading scale well at smaller sizes, but 116 00:06:47,430 --> 00:06:50,280 our title still feels awfully big. 117 00:06:50,280 --> 00:06:55,500 We can change this by adjusting our H1 and our media query for smaller size screens. 118 00:06:55,500 --> 00:06:57,649 Let's give it a font size of 4em. 119 00:06:57,649 --> 00:07:03,194 [BLANK_AUDIO] 120 00:07:03,194 --> 00:07:06,480 I'll refresh and let's check it out. 121 00:07:06,480 --> 00:07:07,030 Yeah. 122 00:07:07,030 --> 00:07:11,020 That's much better and feels more appropriate at those sizes. 123 00:07:11,020 --> 00:07:13,700 If you want further control over headline size, 124 00:07:13,700 --> 00:07:18,220 then I recommend checking out fittextjs.com in the teacher's notes. 125 00:07:18,220 --> 00:07:22,510 The plugin scales headlines sizes in proportion to the browser window, 126 00:07:22,510 --> 00:07:24,090 making it really nice for the titles. 127 00:07:25,700 --> 00:07:28,330 Currently, I like the way ours is looking. 128 00:07:28,330 --> 00:07:32,800 But notice as our browser's size changes, the word world is jumping to its own line, 129 00:07:32,800 --> 00:07:35,390 and it does it again here. 130 00:07:35,390 --> 00:07:39,270 A single word on a line is called an orphan in typography and 131 00:07:39,270 --> 00:07:41,310 can create unbalance. 132 00:07:41,310 --> 00:07:45,760 Currently, there's not a lot of great ways to care for orphans with CSS. 133 00:07:45,760 --> 00:07:46,956 For this example, 134 00:07:46,956 --> 00:07:51,452 I'm gonna insert a non breaking space between the word the and worlds. 135 00:07:51,452 --> 00:07:54,473 [BLANK_AUDIO] 136 00:07:54,473 --> 00:07:55,800 Lets save that and check it out. 137 00:07:57,220 --> 00:08:01,260 So as our browser size decreases, we see that worlds and 138 00:08:01,260 --> 00:08:03,850 the have now jumped to the same line. 139 00:08:03,850 --> 00:08:05,630 And again, they do it here. 140 00:08:05,630 --> 00:08:07,540 Great. I like that a lot more and 141 00:08:07,540 --> 00:08:11,080 it balances the design from being too top heavy. 142 00:08:11,080 --> 00:08:15,008 In our example, we have a lot of control over the layout. 143 00:08:15,008 --> 00:08:17,480 But when you're building a system or template for 144 00:08:17,480 --> 00:08:22,570 people to use, you might not always be able to fine tune it to this degree. 145 00:08:22,570 --> 00:08:27,540 Hopefully in the future, we'll have the power in CSS to refine things like this. 146 00:08:27,540 --> 00:08:31,630 There's actually an orphan element in CSS, but it controls something very 147 00:08:31,630 --> 00:08:34,890 different by adjusting the lines and paragraph line breaks. 148 00:08:36,370 --> 00:08:39,590 In summary, as you practice responsive typography, 149 00:08:39,590 --> 00:08:44,070 remember, by laying a solid foundation with scalable units of measure and 150 00:08:44,070 --> 00:08:48,520 a good typographic scale, you can save code and time. 151 00:08:48,520 --> 00:08:51,670 Use measure a as a basis for when to create breakpoints for 152 00:08:51,670 --> 00:08:56,080 body copy and columns by adjusting the font size, padding space, and 153 00:08:56,080 --> 00:08:57,950 line height as necessary. 154 00:08:57,950 --> 00:09:00,230 Your hierarchy might need rearranging, so 155 00:09:00,230 --> 00:09:03,610 be sure to translate it clearly at different screen sizes. 156 00:09:03,610 --> 00:09:07,790 Lastly, your headings are prone to be too big at small screen sizes. 157 00:09:07,790 --> 00:09:09,700 So don't forget to give them some finesse. 158 00:09:09,700 --> 00:09:12,840 I hope that clears up responsive typography for 159 00:09:12,840 --> 00:09:17,030 you and gives you some simple rules to guide you along as you practice. 160 00:09:17,030 --> 00:09:18,970 Remember to trust your gut on what looks right. 161 00:09:18,970 --> 00:09:23,220 I'll see you in the next video as we look at advanced web typography and the future.