Responsive Typography9:18 with Mattox Shuler
We’ll hone in the design by testing and adjusting it responsively. This will include changing sizes, measure, and arrangement to find what works best for different screen sizes.
We're almost there. 0:00 Our design is looking good on our desktop, but 0:01 we need to make sure it works well at other browser sizes. 0:03 Through media queries, we'll focus on how to make our design and 0:06 typography bulletproof no matter what size screen you're on. 0:09 I didn't want for us to responsively design each section as we went, as we'll 0:14 first wanna make major adjustments with our body font size at different sizes. 0:18 This will adjust every piece of text at that size. 0:23 Then, we'll want to go and adjust our typography as needed after that happens. 0:26 We'll start by beginning to drag our browser inward. 0:31 One of the things we want to pay closest attention to here is out measure as it 0:35 will determine when you make responsive break points as I drag the browser inward. 0:39 At about 1024 pixels, 0:45 we're noticing our columns are getting somewhat tight around this browser size. 0:48 So, I'm gonna go into our CSS and with our media query here with the max width of 64 0:53 em or 1024 pixels, we'll adjust the body font size to be 1.125 em or 16 pixels. 0:59 Let's save and see how that looks, now. 1:07 Great. 1:09 So, our column measure is looking a lot better here but 1:10 a few things have also changed in the design. 1:13 We see now our measure for our one columns need adjusting and 1:15 our summary class could use a bit of balance up here. 1:20 So, i'll go into our css and for 1:23 our summary I'll set a max width of 40 rem, as that will balance it out. 1:25 And then, I'll set a max width for all our columns, h3s, and ps to be 27.5 rem. 1:32 [BLANK_AUDIO] 1:38 So, let's check out the change. 1:44 Great. 1:46 Our summary here is much more balanced with this sentence coming first and 1:46 then the following sentence coming on the next line, and 1:50 then our measure down here for our columns is much more comfortable. 1:53 All right. So, 1:57 as I drag the window in again, at around the 864 pixel mark we could 1:58 use another decrease in font size because our column measure is getting tight again. 2:02 This will also help our h1 to not break into another line. 2:07 So, in our CSS with a max width of 54m or 2:12 864 pixels we'll begin to implement some changes. 2:17 I'm going to change our body font size down to 1m or 16 pixels, and 2:21 then I'm going to adjust the max width of our summary to keep it in balance. 2:26 Let's go look at that now. 2:31 Cool. 2:33 So, our text has shrunken as a whole because our body's font size has changed. 2:34 And, our summary is still balanced and 2:38 it still looks like we have a nice measure for our columns here. 2:40 As I continue to scale it downwards we notice that at the 752 2:44 pixel mark our header is breaking to the next line. 2:48 Since we only have access to CSS we cannot implement something like fig text JS, 2:51 which automatically sizes our titles based on our browser size. 2:57 Also, we wouldn't wanna implement the viewport width unit of 3:01 measure in CSS because it's not super reliable across different browsers. 3:04 So, we'll wanna manually adjust our header at this break point. 3:09 I'll head over to our CSS, and with our media query of max width 47m, 3:12 which is relative to 752 pixels. 3:17 We'll change our header to have a font size of 4.5m, and 3:20 our h2 to 1.333m, which is our next size down in our scale. 3:27 Let's check out what that's looking like now. 3:34 Nice, much better. 3:37 It keeps our proportions intact there. 3:38 But, notice now down here our columns are really tight. 3:40 So, this seems like a good point to switch our two column layout into a one 3:43 column layout. 3:47 To do that, I'll simply set our explanation and 3:48 participation classes, which are our two columns, to have a width of 100%. 3:51 So now, they span across the browser. 3:55 And, re-adjust the padding to be 4 em and 3:58 6% to match the padding of our other sections at this size. 4:00 Let's check out how that looks. 4:04 Great. 4:08 This keeps the content flow fairly simple and clear for smaller sizes. 4:08 I'm going to go in and remove these asterixs as they are no longer needed. 4:13 [SOUND] I'm also going to remove where we commented 4:16 out our base hold dot IT as it's no longer necessary. 4:24 And. this will bring our HTML back to 4:32 it's original state. 4:34 We'll save that. 4:35 And then, check out how it's looking. 4:37 So, I'll refresh it one more time, and now our asterisks are gone. 4:39 And, we'll begin to drag in our browser, and it's looking good here, and 4:43 then finally, at about 544 pixels we're seeing a break happen there. 4:47 So, I'm going to want to go in and 4:54 set one more max-width media query for these small sizes. 4:56 So, with our media query at 34 em or 5:01 544 pixels, we wanna start to change some things. 5:05 I don't wanna change our overall body font size as I 5:08 don't want it to be less than 16 pixels. 5:11 So, we'll go in and change sizes individually as needed. 5:13 For our header, I'll first give it a padding of 6M and four percent. 5:17 This change to the top and bottom padding will remove some of 5:21 the white space that's a bit much at this small of a size. 5:25 We'll also wanna change our header in H1 to a font size of 2.6m, so 5:28 it's a bit smaller. 5:33 And, a line height of 0.8 just in case, 5:34 it breaks to two lines on extra small screens. 5:36 We'll then set our H2 to a font size of 1m to keep it smaller than our main title. 5:39 And, we'll adjust our letter spacing to .2m, 5:45 as it was a bit too long with wider letter spacing. 5:48 Lastly, we'll give it just a bit of space from our h1 5:52 by adding some top margin of .3m. 5:54 Let's save and check that out. 5:57 Great. 6:04 So, the size of our man title and tagline feel a lot more appropriate for 6:04 smaller sized screens. 6:09 Our summary and H3's now feel a bit big os i'll go in and fix those. 6:11 I'll start by targeting our summary class paragraphs and 6:17 setting them at a font size of one m. 6:20 A line height of 1.6 and a max width of 27.5 [UNKNOWN] to keep it balanced. 6:25 This is utilizing similar values that we are using for our columns. 6:31 I'll then set my summary p plus p to be just a bit smaller with 6:37 a font size of 0.9m. 6:41 Finally, I want my h3s to be a step down on our scale. 6:43 So, we'll go for 1.333m. 6:46 Good. So, 6:52 the content feels much more reasonable for 6:53 the smaller sizes, but it still retains the overall hierarchy and flow. 6:55 Lastly let's look at our side content at the bottom. 7:01 At this media query, it will be smart to break them into one column as the two 7:04 are closing in on one another's space. 7:08 So, what we want to happen is the right column will fall under the left and 7:11 everything will remain centered. 7:14 To do that, let's head over to our CSS and style it out. 7:16 We'll do this in our CSS by targeting our design selection class and 7:20 giving it a width of 100%. 7:25 So, we'll now take up the full browser width. 7:26 And then, we'll remove the border right by setting it to none, 7:29 as it's no longer needed and I'll set the padding to 0 for the top and bottom. 7:32 And, 3% for the left and right, just to retain some amount of space there. 7:36 Instead of that border on the right side, I would like to implement a bottom border 7:41 here in the same style to split this section from the one below it. 7:45 So, I'll target our design selection class LI:last-of-type. 7:49 So, that's the last link in our list. 7:53 And, give it a bottom border, one pixel solid with the same blue we were using and 7:55 a padding bottom of three m to give it some space. 7:59 Now, for our design archives class I'll give it some top padding of 8:05 the same amount and then set the width to 100%. 8:08 And finally, I'll set the width of our zen resources class to also be 100%. 8:12 Let's save and now check this out. 8:18 [BLANK_AUDIO] 8:19 Great. 8:28 The break happens just in time before our columns close in on one another. 8:28 And, our vertical spacing here looks good. 8:33 The bottom border also really helps separate these two sections 8:35 as the browser continues to close in, our contents still looks good. 8:40 I also recommend testing this on the actual devices too to 8:44 make sure your content is flowing well. 8:47 Great. 8:51 So, we're set for a max-width media queries. 8:51 In the next video, we're look into a few more polishing touches we 8:54 can put on the design to bring it to a final state. 8:57 To challenge yourself for extra credit, see if you 9:02 can style out our aside content to behave like this for larger size screens. 9:04 It was at the bottom of the page and now we've moved it to working as a top drawer. 9:09 In the beginning of the next video, I'll explain how it's accomplished. 9:14
You need to sign up for Treehouse in order to download course files.Sign up