2.1 Adjusting Font Sizes

Hey, I'm Kezz Bracey for Tuts+, welcome to advanced typography design in Figma. This is the second in our two part course series. And we're going to be building on everything that we learned in the first course. So if you've done the first course then you should have ended up with a Figma file that looks something like this with all of the different lessons that we went through. If you didn't do that course, I do recommend that you go through and do that before you do this one. But if for whatever reason you decide not to then you should definitely go and download this source file, because we are going to be using some of the assets that were created in the last course for this course. So the first thing that we're going to be looking at in this first section of the course is making responsive adjustments to our typography, you need to make sure that your typography maintains its readability at any size of viewport that it might be looked at through. Anything from the smallest possible mobile phone screen up to a high DPI monitor. There's two aspects to this process. The first is that you need to make modifications to the size of your typography, you pretty much always need to change up your heading sizes, and you'll probably need to change up your regular text as well. And then the other thing that you're gonna find you'll need to adjust is the amount of spacing that you have around each of your text elements. You can have quite a bit of spacing when you have a lot of room in the viewpoint, but as you get down to smaller sizes, you need to reduce the amount of spacing that you're using in margins and what have you. So we're gonna look at changing the font sizes first, then we're gonna look at spacing. All right, so let's start by making a new page. And we'll just call this responsive font size adjustment. And then what we're gonna do is take the exact same approach that we did in last course when we were setting out our font size flow. We're gonna establish the largest size that our typography can be at, and our smallest size, and then we'll look at filling in some of the flow in between those two points. And we already know what our typography is gonna look like at its largest size because that's our default typography. So let's start by adding that into our new page. We're going to need a frame. Which we will set up at the same size, that we've been working with so far. That is 1050 pixels wide. And we'll give it a height of 5,000. Just so we've got lots of room to move. Now I wanna go into our assets. And we wanna drag in, each one of the heading assets that we created, and the regular paragraph. So just drag and drop all of those in, and then get them aligned. I'm just gonna skip forward until I've done this. And you can pause the video until you've done the same. All right so now I've got all six of my headings in and I have a paragraph in here. And everything is vertically aligned. Now what we're gonna do is make a couple of changes to these elements so that we can change up their height to suit a smaller width viewpoint. Because remember the next thing that we're working towards doing is deciding how our text is going to look at the smallest possible width. And because what we're doing here is getting everything set up so that we can change our text sizing. We don't want to inadvertently change the text sizing that we have for our default typography, that we covered in the last course. So what we're going to do is detach all of these element instances. So we're just gonna right-click and detach instance on each one, so let's go through and do that as well. And then we also wanna decouple the save text styles that we have on here. So if we expand this and select the text, you can see these save text that we have here. And we're just gonna detach that. You can also hold down Control and then directly select one of these text items, so go through and detach the style for each one of these which is going to get us set up to more easily change everything. Okay, so the next thing that we're gonna do is change up some of the constraints that we're working with on our text elements. We want the ability to shrink our outer frame here. And have these elements compress themselves along with it. So I'm gonna select the H1 element and hit shift two to zoom in, I'll just play it a little bit so we got some space around the outside. You can see that right now, this element is set to be anchored on the left via these constraints. So what that means just zoom out a little bit more is if I resize the parent frame, nothing happens to our element, it just gets clipped off because it is set to just anchor itself to the left side. What we can do instead is select this element and then change this setting that says left. To say scale instead so now when I change this frame, you can see that the outside box on an element is scaling itself horizontally that is the effect that we want. So now we've applied that scaling horizontally on the parent frame of our element, and we need to do it to some other elements as well. So it's like the text inside and we're going to do the same thing. So we'll switch that from left to scale. So now what's going to happen is a chain reaction when we resize this frame. It's gonna cause this frame to change. And the resizing of this frame is going to cause this text to change. So let's see that happen. There you go. You can see that that's bringing down the width of that text box. So now we just also need to do the same thing to our visual aids. So let's expand our visual aids here, and we're gonna select the element area first. We'll set that to scale horizontally, then we'll select our margin area, and once again, I'm gonna set that to scale horizontally as well. Now if we grab our top level frame and we shrink everything down, you can see that the width of each one of these elements is shrinking down with it. Obviously we've got some more adjustments to do on that but first let's go through and apply those same alignment changes, so same constraint changes to all of the other elements as well. So just go through and start with selecting the top level frame. Change that to scale horizontally. Select the text, let that scale horizontally as well, Expand your visual aids and set both of these to scale horizontally. And then repeat that for each one of the elements that you've added into this frame. So I'm gonna skip ahead until I've done that. Once again pause the video and pick it up back again when you've done the same thing. Okay, so now we've set up a frame to represent the typography at the widest possible width that we need to concern ourselves with, the next thing to do is set up a frame that represents the thinnest possible width that we have to deal with. And that width is going to be 320 pixels wide and I'll just show you why. If you go to plugins and manage plugins, then choose browse old plugins and search for view ports. Then you'll find this plugin called view ports which you can install, I already have it installed here and then when you're inside your document you can use it to create a bunch of different frames that represent different sized view ports, but you can also use it as a reference for what types of different viewport sizes you need to accommodate. So I'm gonna go up to the menu and choose Plugins viewport. And then we can just have a browse through each one of the different viewport sizes that are associated with common devices. Obviously tablets are larger than phones so we're gonna have to concentrate on seeing what type of sizes are the smallest that we're gonna find among phones. So we've got 375 is the smallest that we're seeing here. 320 is the smallest now. So we're just gonna go through and keep looking until we find the smallest possible size. Nothing smaller in here, 320. You can see commonly comes up as being the smallest width that you're going to need to deal with. Tablets are all bigger, desktops are bigger, so we can be pretty safe with aiming for 320 pixels wide and feeling confident that there's very, very minimal demand for anything smaller than that. So now what we can do is grab our frame and actually just rename it and we'll just call it full width and then we're gonna duplicate the frame and we're going to call this one minimum width. And now over here we're going to change that width down to 320. And there you can see that a lot of the adjustment has already been done to our elements because of the constraints that we just put in place. So we already have a good width on all of these different elements. Now, we just need to adjust their height so that we can properly tweak the font sizes to working with this new width. So let's select our frame and we'll hit Shift+0 to zoom in on it. And actually let's just bring this off to the side a little bit and make some more space so we can focus on this. Now, obviously this text is too large for such a thin amount of viewport to with but we can’t really adjust this element until we increase the size enough that we can see all of the text. Actually, let’s just move this element down out of the way for now. So we're gonna select our element at the top level. And then we're gonna drag down to increase its height, don't worry too much about how high that is right now. We're gonna fix that up later. Now we're gonna select that element and re center it. And now, we can start to modify this text size and bring it down to a more appropriate size. So we don't have one word per line. That's obviously very uncomfortable to read. And when we're choosing a font size to apply here, because we have such a limited amount of space to work with we really wanna bring this heading one down to the smallest size that we can, while still having it clear that this is a leading headline on the page. So, let's hold down Alt, which will give us this dull ended arrow, and start dragging this text size down. So that's still probably a bit too big. We're still only getting a couple of words per line, so let's just keep going down. And I think probably about 26 is gonna work for us. That's starting to look a bit more comfortable. But if we get down too low then it's not looking like a leading heading any more. And plus, we also need to bear in mind that we have to have enough font sizes available between our smallest text, which is gonna be a paragraph and our heading one text to allow for all of the other headings as well. So we're gonna go with 26 for our font size here. Now let's just recenter that again. And we're gonna be handling margins and spacing in the next lesson so for now let's just reapply our original margins to our visual aids here. Then we wanna check and make sure that our element area is the same height which actually as luck would have it we fluked into already being the same height. It might be different when you adjust other text elements. And, with our original H1 heading, we can select our visual aids, then hold Alt and hover and we can see the margin there is 45. So, let's just apply the same margin here. We know the height of our main element is 140. So we're just gonna add two rounds of 45 to the height of our overall element to represent those margins. So we'll select that, and we're gonna put in 140 + 45 for the top margin + 45 for the bottom margin. All right, so that is our first element set up, and ready to have it sizing tweaked in the next lesson. Now, we'll go through the same process with our paragraph element. It's just like we did before, We're gonna start with the highest text. Then we'll sort out the smallest text and then we'll create a flow between the two. All right, so same process again, let's select our element and increase the height. So we've got room for all our text here and now we need to recenter this text but what you'll probably notice is if you try to hit the alignment button here it's not gonna do anything. That's because it's still treating the text as though it's only the height of this box here. So what you actually need to do to get this properly center aligned is drag the whole thing up, select all of the lines of text in here so we get a read on what the actual height should be. Then we’re going to drag the height of this box to make it match the text. And then now we can vertically center it and that's gonna work for us. So the height of this element is now 522 so we're gonna match our visual aids. 522, just copying and pasting that value in and then center align. Sometimes you have to press it twice to make that work properly or even three times. So there we go. I should recall one of the things that we went over in the last course was that you should always keep your text somewhere in between 16 and 18 pixels, your basic text. You really don't wanna go any smaller or any larger unless you have a really specific reason to do so. Now this text here is at 18 pixels in size, which is a little bit tight in this amount of space. So what we're gonna do is without experimentation, we're just gonna go straight for a 16 pixel size instead. Now, that looks a little more comfortable in this area. We'll be able to fit more text and have it be more readable overall. So now we're just gonna have to reapply those adjustments. We're gonna change the height of our text box to fit our resized text. So now we're at 416, which is the same height we'll need to apply to our element area visual aid. And then let's just recenter everything again. So now let's reapply original margins. And if you're wondering, the reason that we're reapplying our original margins is that when it comes to changing the margins in the next lesson it can be helpful if you see the original margin size as you're changing it. So you've got that basis of comparison there. So select that element here, hold down Alt and hover. We can see our margin is 29. So we're going to add that twice to the height of our element, which is 416. So, select the top level. Paste in our height of 416 and add 29 for the top margin and 29 for the bottom margin. Okay, so now that's the paragraph done. So now just like when we created our original font size flow, we've got our top end established. And we've got our bottom end established, so now all we need to do is create a smooth flow of font size between those two points for our other headings. So see what the process is to apply tech size adjustments to these elements. And I don't wanna go over it for every single one. That's gonna get a bit redundant and a bit boring. So what I'll do is give you the tech sizes to adjust the other elements to, and a reminder of the margin size for each one. Then you can go through and make the same changes to headings two, three, four, five and six. You see the font sizes for each one of those elements on your screen now. As well as the top and bottom margins set for each of those elements, to put them at the original margin sizes that we started working with. So we got H2, the font size of 24, margin of 38. H3 with a font size of 22, margin of 30. H4 with the font size of 20 and a margin of 30. H5 with a font size of 18 and a margin of 30 and H6 with the font size 17 and a margin of 30 And if you notice there if you look at the differences between each of those numbers. I'll just also add in the values that we're using for H1 and a paragraph tag here as well. So you can see the full range. We have a font size difference of two pixels between our heading 1 and 2, 2 and 3, 3 and 4. In 4 and 5, and those are the ones where you typically need a bigger distance between adjacent heading sizes. Then we dropped down to one pixel of difference between heading 5 and 6, and between heading 6 and the paragraph element. We need to make sure that there's still a difference in between those small elements. But it doesn't have to be as large as between the larger elements. Okay, so go ahead and apply those sizes. Pause the video so you can refer to this screen for the sizes that you need to add in. And then come back. Okay, so after you've applied the new font sizes. The minimum size we want to adjust our font sizes down to, should have something like this. So this is our heading 1 element, heading 2, heading 3, 4, 5, 6, and paragraph. And now once more we're gonna apply the same theory. That if you start by pinning down each end of your spectrum, you can just fill in the gaps in between. So we've got our maximum size viewport here, full width. We've got a minimum width here, and as you can guess we're gonna create something bang in the middle. Having practiced, you probably need multiple break points in between your biggest and your smallest viewport sizes. Because you're gonna have a lot more to work with than just your heading and paragraph tags. But for the purposes of this lesson, we're just gonna have one extra break point in between. And it's gonna be exactly in the middle of these two break points here. So let's move this over and make a bit more space. This time we're gonna select a minimum with frame and duplicate it. Drag it back in the middle here, and let's call it mid width, the biggest frame is 1050 pixels wide, the smallest is 320. And the exact halfway point between those two is 730, so let's increase our frame to 730. And now what we're gonna do is for each one of these headings. We're gonna change its font size to be the font size that's exactly in the middle of this font size, and this font size. So created the spectrum from top to bottom with this typography at our maximum size from top to bottom. With our minimum size here, and now we're gonna do the same thing sort of horizontally in between each of our breakpoints. So now this is our biggest size and this is our smaller size and we'll create a flow in between those two. We already know that the font size here for our biggest heading 1 element is 52. And we know that the font side here for our smallest heading 1 element is 26. So we're just gonna grab a calculator and figure out what's exactly in between the two. First we need to figure out what the difference in size is, between this heading and this heading. So we're gonna put in 52 for our largest font size, and then we're gonna subtract 26 for our smallest font size. So that gives us the gap between the two. We want halfway in between that, so we're gonna divide that by 2. And then we're gonna add that back to a smallest font size of 26. So now we know to get that right in the middle, all we need to do is set our heading 1 element for our mid-width to 39. So let's go ahead and do that. Shift 2 to zoom in, select our font size here, and just bump that up to 39. And then you're just gonna go ahead and make the same adjustments that you're already used to. To restore those margins back to 45. And then when you're done, you can have a heading 1 element that looks like this. So if we go from left to right, there's our largest heading 1 element. Actually, let me just zoom this down to 100%, so you can see the real size. So there's our biggest, our midsize and our smallest. So now once again, you're just gonna repeat the same process for each one of these elements. So the easiest one to calculate here is we know that this paragraph font size is 18, this one is 16. So obviously in the middle we gonna need to set this paragraph to 17. And once again I'm just gonna put the font sizes that you need to adjust to on the screen here. So you can go ahead and make the adjustments to each one of these elements while you have this video paused. So the H1 will be 39 as we just set up, H2 will be 32, H3 will be 27, H4 will be 22, H5 will be 20. H6 will be 18, and the paragraph will be 17. Now when you're done, you should have a midsize frame with text elements that look like this. So you can see we've got a really nice flow from top to bottom with each one of these frames. And we also have a really nice flow horizontally from our largest to our smallest size of frame. Just to go through them really quickly. You can see that we have that really nice adjustment going on to our font sizes. From the biggest size, people are gonna see the text down to the smallest. So that is how you go through and create flowing text size adjustments for your web designs using Figma. And in the next lesson, we're gonna make adjustments to our spacing as well. Right now we've just got the same margins that we had applied to designs originally. And in the next lesson, we're gonna make those margins more appropriate. For the amount of space that each one of these frames has to work with. So we're gonna step through that in the next lesson, I'll see you there.