FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.4 Complete Typography: Headings, Line Heights, and Margins

Now it’s time to complete our typography design. We need to decide on the styling for all six heading levels, and we also need to determine line heights and margins so they will work nicely with regular text and with each other.

Related Links

3.4 Complete Typography: Headings, Line Heights, and Margins

Welcome back to code friendly design with Adobe XD. So far we've set up the basics of our topography. We've set up our larger setting, NH1 level heading, and we've set up a paragraph of default text. But we've also got five other headings that we need to create. So for each of those we're gonna need to set a font size, a white, a line height and not just that we're also gonna need to determine the spacing that needs to exist between multiple headings. And also between headings and paragraph text and the first thing that we're gonna look at is setting, usually the font sizes for our heading levels. We've already decided on our heading one size, and this heading one size is pretty much based on the largest size that we want text to get to. With the idea being that if the text goes any larger it's start to be a bit too big for the page. So that right there 45 pixels, that's about as big as we wanna get and we set our default text size to be 16 pixels. So we want to make sure that our smallest heading, our H6 level looks like a heading in comparison to that default text. Another thing that's actually a relatively common mistake is to set up H6 and even H5 level headings and have them be smaller text than default paragraph text. Not only is that going to look a little bit odd, if you have a default heading text that's smaller than content text that makes it pretty hard for viewer to distinguish between the heading and the default text. So what we're gonna do is setup a heading that's as small as we can get it, but still different enough to add default text to stand apart from it. Then we're gonna fill in a range of sizes in between that smallest heading and the largest heading that we already have. So to do that, let's grab the heading. Hold down shift and select the paragraph text as well. copy and paste. Then we're just gonna drag it down, Here where we can work on it. And we'll just get our measure that we've been working with so far. Work this in the corner, and we just make sure everything is nice and lined up. And we hit Ctrl + 1 to get this to 100% size. Actually now we just move the measure out of the way as well. Now we need to make a little space for our H six little heading. So we move this paragraph down. Actually, maybe down a fair way so that we've got room for all the headings in here. Now, we'll just copy and paste our heading one. We'll just rework this text so it says, Heading Level Six. And now to help us keep track of these lines that we're working this, we'll rename this to h1. We rename this to h6 and it will actually drag this up in the layer order. We're going to group all of these layers up a little bit later. All right now here's a level six heading. We're going to bring it a little bit closer here and now we can start shrinking down the size to see how small we can get it so that it still looks like an actual heading. I should make that a little bit more of a gap. So we'll put our cursor in the Font Size field here, and we'll just drag down. So we're gonna keep going down until we get to about 20. So we've got four points of difference between the two font sizes. That is actually not that distinct as it looks now. But what we can do on these smaller size texts to make it stand out more, from the default text, is increase its weight. So we're actually gonna change this white up to medium. So now, that's a fairly small size text. We probably don't want to go any lower or it is gonna start to look like it's just bold, normal text but at 20 pixels with Medium. That is still distinguishable as a heading separate from the paragraph text. All right, so, let's grab our Heading Level One text again, and we're just gonna make another four copies for other headings. So need one for h2, one for h3, one for h4, and one for h5 and we'll just go through and edit that text. And we'll also rename the layers to help us keep track of everything. And just put this up here. So the headings are in order. And what we want to create is a smooth transition from the size of our H1 level text down to the size of our H6 level text. We don't want any big jumps. So for example the H5 text being really tiny and then the H4 text being huge. We were pretty even amounts of font size different between one heading level and the next. You can actually shortcut the process of figuring out what your font sizes should be and your headings, once you establish this smallest of your headings and the largest of your headings. So we can use the website called modular scale to do this. So if you had to modularscale.com, you'll see this interface here and what it let you do is put in a base size. So for us, are base size is 20 pixels, our smallest heading and then you can adjust the ratio here until you get the variation from one size of text to the next that you're looking for. So what we wanna do is figure out what ratio we should enter here. So that if we look at this text here, this is 20 pixels and then we count each one of this bubbles of text as a heading so this would be H6, H5, H4, H3, H2, H1. We know we want our H1 text to come out at about 45 pixels. So what we can do is start messing with the ratio here until we get a smooth transition from 20 pixels up to 45 pixels. Right now, that is too large, the ratio, that's why our text is coming out too big. So we can drop that down, say, we'll try one point two. So now we've got 6, 5, 4, 3, 2, 1, and the text here has come out at 50. So that's still a little bit too high and I actually went through and figured out the correct raito before. So we'll just jump to that. So a ratio of 1.175 allows us to come out with a nice range of font sizes between 20 pixels, representing h6. Then we have h5, 4, 3, 2, 1. Bringing this out here at a number that can be rounded off to 45 pixels. So now all we need to do is round off these other values and plug them in as the sizes of our headings and we'll have this smooth transition in our font sizes from H1 down to H6. All right so first up we'll round this down to 38 pixels. So let's whack that into our design. So we'll set this to 38. Got 32 pixels here. 27 or maybe 28 pixels here. And 20 that could go either way, 23 or 24. We'll probably say 24 cuz that'll put us halfway between 20 and 28. All right now we'll just collapse down the amount of space that there is in between each of these headings. So that we can compare to one another a bit more easily. So let's drag this until we've got 40 pixels of space. Once you've got 40 pixels between the first slot, it should be easy to drag and snap. So there's 40 pixels between all of the other headings. All right, so now we've got a really nice smooth transition in the font size of each of our headings. Now, another thing that we can do to help make sure that the smaller headings are really distinct from the headings near them is transition the font white as well. So we set our Heading Level Six to be medium white, so we're gonna do the same thing for Heading Level Five. We'll set that to Medium as well and then Heading Level Four and Three, we'll set to Regular, which is in between Light and Medium. So that helps to make them differentiated from the heading levels above them and by increasing that weight as the headings get smaller, we can compensate for that smaller text size, and allow those headings to still stand out quite a bit as a heading should. I just want to talk a little bit more about something I ran over fairly quickly there, which was creating a 40 pixel gap between each of these headings. So as you know so far we've been working with our 80 pixel and 120 pixel measure. So I put a 40 pixel gap in between here, because that way all the spacing in our design is working in increments of 40 pixels. So I've got 1 times 40 pixels here, 2 times 40 pixels with a 80 pixel measure, which is the amount of here. And 3 for 120 pixel measure that we're gonna use little later. It's important to make sure that you decide what margins there should be in between multiple headings. Because another common problem that can come up is a design might only decide how much space there should be in a situation like this, where we've got a heading and then text below it, but sometimes people wanna put headings of different levels directly under one another. And then it's kinda common to see a heading like this. With heading two text jammed up right against that, too close to really work out. And that's happened because that spacing in between levels hasn't been properly accounted for during the design and or coding phase. So you don't want to have any layout that looks like this, so definitely as part of your design process always make sure they show the code how much space there should be in between each heading level? All right, the next thing that we need to do is decide what the line height should be on each of these heading, so that when they wrap around onto multiple lines when you have headings that are relatively long. Each line can be properly read and distinguished from the next line. So I'll show you what I mean. I'm just gonna copy this H1 heading and drag it down here. Give it that 40 pixel margin as well. Now right now this text is set to point text style. Which means if I keep typing inside this box it's just gonna keep spreading off to the right. We want to change this up to area text. And then just gonna drag this box out until it hits our 40 pixel on the right side. I'm just gonna add in enough random text to force this into two lines. All right, so that's not so bad by default this line height. But it's probably a little bit cramped. It's not uncommon to see line heights really cramp like this or line heights that are just too high like this, so you wanna get a happy medium. In my experience, one line height doesn't work equally for all different heading sizes your H1 line height is gonna be the smallest out of your headings and it's gonna increase just a little bit as you go through to the H6 level. The exact amount of line height that looks right for your design is going to depend on the font sizes that you choose for your design, but I'll show you some line heights that work pretty well for each heading level. That work for you in most cases and if not, you probably gonna need to tweak them a little bit. So for our H1 heading here, we're gonna use a line height of 1.4. So that means it is line height in a pixel value, it should be 1.4 times the font size. So here is the font size 45, so in this box here we can just type 45 times 1.4 and that would give the line height of 63. So that we can just drag this box up to the bottom of the G cliff here. To try to get it to accurately represent the height of this heading. So that we can also show the correct margin, the correct spacing between this heading and the next piece of text. Which is going to be a paragraph, because we also want to show how much space there should be in between each heading level. And any default text below it. All right, so now let's say we just grab all of these at once, two, three, four, five, six. We'll drag these down, To make a bit of space. All right, so now let's get the heading to tag, do the same thing again. Turn this into area text and drag out the box. Now, we'll copy this lengthening text over. We're gonna use a 1.4 ratio for this one as well. So we'll do the same thing again 38 which is our font size, times 1.4. That gives us 53.2, which we'll round down to 53. Now, we'll adjust this box to suit it. Actually gonna change the opacity the, just drag that up again. And add another paragraph. And the H3 tag Turn it to area text, drag at the box. Put some extra text on, now for this one if we used a 1.4 line height, 32 times 1.4 that's actually starting to look a little bit too cramped. So getting the point where we wanna increasing this line height, so instead we're going to make the line height 1.5. So we'll say 32 times 1.5. And that just gives that little bit more space in between to make it more comfortable to read. Add another paragraph. Heading four. And some extra text to make this longer. For our heading level four we're gonna use a ratio of 1.6. So we'll say 28 times 1.6 and then we'll round that off to make it 45. Now the paragraph of text. H5, Get the extra text. By age five we're gonna bump it up a little bit again. This time we're gonna use a ratio of 1.65. So we'll say 24 times 1.65. Collapse the box to the right height, paragraph of text. And then our last heading. Add in our extra text. Now this one we're are going to use a line height of 1.8. 20 times 1.8, 36 And one last paragraph for text. All right, so we could see that the line height on all of our headings gives us enough space between those lines that the headings are readable. We also have a nice, consistent amount of space in between each of the different types of text that we're gonna be working with. So everything is laid out really well, it should be readable and it should be easy to see the difference between different levels of heading. Now we're gonna do one more thing really quickly. Because we can only put pixel values in here but we want the designer to know what the line height should be. Cuz line height should be always entered in as a ratio, not as a fixed value. So that if the font size has to change later you probably won't need to change the line height along with it. So we're gonna add in the ratio to the end of each of these lines. So we'll set 1.4. 1.4 for heading 2 as well. 1.5 for heading 3. 1.6 for heading 4. 1.65 for heading 5. And 1.8 For heading 6. All right, so now, that's all of the essential typography is done. Now, the only thing we need to do is take this same typography and test it out on a light background to see if we need to adjust any of our whites or anything else. So zoom out so we've got a bit easier view here, grab a rectangle tool, draw out another panel. Turn off the Border, set the fill color to our light color. Now, let's go ahead and select all of these text items. Just hold Shift to select multiple. We'll actually group these up. That might make it a bit more convenient. Typography light, and we'll duplicate. Rename that to typography dark. Drag it down. Making sure we don't accidentally select the background. We'll go in here, select all of the layers and set that to a dark color, all. Obviously you need to have the background behind the text. And we'll just grab our measure once again. We'll write this in the corner. Drag both of these up to the top so we can see them. And just make sure that our typography is aligned. Draw one to zoom to 100%. All right, so all the headings look fine, they're all readable. But here with the text, we're seeing the same problem that we did earlier. Where at a lightweight this paragraph text is not entirely readable. So go through select all these paragraphs. And change their weight up to regular. And then- We just make the bottom spacing around these- These panels correct So we just drag this section up, so that we have an 80 pixel gap along the bottom of this panel. Grab our measure. Drag it all the way down to the bottom here. And now that gives us a spot to finish our light panel here at. All right, so now we've got all our typography for dark text on a light background, and all of the typography for light text on a dark background. They can also do additional typography styling like deciding how black code should look, or deciding how code being displayed in the page look with the code element. That will depend on the scope of your project. So you can definitely include those things if you feel this is gonna be useful. In the next topic we're gonna look at is making sure That your code is collapse friendly. So the first thing that we did when we started this design is we set up our layout so that we'd be showing full page background as well as the site wrapper. To make sure that when a viewport was too wide we're showing the coder what we wanted to have happen left and right of that fixed with body. But we also need to think about what's gonna happen to the site when the viewpoint is narrower than 1,200 pixels wide. Now, in a lot of cases you don't necessarily need to be too explicit in exactly how a site should handle smaller widths. Because a lot of stuff at coder is gonna be able to handle themselves that you may need to layout a design for every single possible width. So for example, all of these text that we have here, this is all just gonna collapse down, just be thinner and thinner and the coder can handle that. In most cases it's not gonna be necessary for you to explicitly show that this paragraph should get thinner when the viewport is thinner. The same thing goes up here with our panel one area here. The coder is just going to put this together so that this image will shrink down, narrower and narrower, and this panel in the middle will do the same thing. That's all good, you don't have to worry about that too much. But well, you can run into trouble is if you inadvertently do something in a design that can't be collapsed down to a thinner width. You don't wanna go to the trouble of designing some really cool site elements only to find out that they have to be either thrown out or completely reworked in order to be ready to collapse down to smaller sizes. So in the next lesson, I'm going to show you a couple of examples of things that you should avoid including in your design, as well as how you can use a different approach to get the same results but have them appear in a collapse-friendly way. So we're gonna check all that out in the next lesson. I'll see you there.

Back to the top