 A lot of developers struggle with their handling of text, and that's a shame because text is so important. It may be the most important part of a website. The way we treat our text can make a huge impact on a design. It can take something from looking like an amateur project to a professional job. So in this video, we're going to be looking at six tips that help you improve the typography of your website. These aren't complicated things. We're not going into deep dive into typography or theory. We're looking at six quick wins you can use right away. If you stick around until the end, we're going to look at a bonus tip as well, which is probably the biggest mistake that I see developers make on their websites that absolutely ruins their designs. So hi there, my name is Kevin, and if you're new to this channel, over here we learn how to make the web and how to make it look good with weekly tips, tricks, and tutorials. And as I said in this video, we're going to be exploring typography. We're going to be looking at some quick wins that you can use. But before we get to that, this video is brought to you by DesignMoto's slides. If you don't know about DesignMoto's slides, they are this really, really cool take on templating with HTML, CSS, and JavaScript. If you're watching this video, I'm assuming that you have some trouble when it comes to design and DesignMoto's slides are fantastic. They look great. They are super, super cool. But what I really like with it is instead of being like, here's a whole bunch of templates, you're stuck with that template. It's sort of a pick as you go type of thing. It's really, really easy to use. You pick the style you want, you pick the slide you want, pick an animation style, and then right off the bat, it makes a really nice looking layout. It's super easy to customize through their visuals. You pick and choose exactly what you want and where you want it, which is really cool. But one of the things I really like with slides is it's built with devs in mind. This isn't something that's meant to be a drag and drop type of editor. It's meant to be you pick the pieces you want, and then you're editing the HTML CSS and JavaScript. You can do this all directly in the browser, which is really, really cool. You pick the different pieces you want. And then you're editing the HTML, you see the HTML as it is, you edit it, you hit save, it updates live in the browser, you can jump into the CSS, make any changes in there you want, or of course, some JavaScript as well, you can play with it all or even better, once you have a general template set up how you want it. And remember, this is completely customizable, you're picking and choosing all the different pieces you want, and they all look really, really good. Once you're happy with what you have, you just hit download, open it up in the editor of your choice, and then customize it and completely make it your own. And on top of all of that, it is making static HTML CSS and JavaScript. You're making static websites, meaning they're going to be blazingly fast. So they're super quick and easy way to make a prototype of a site or even build out a full client project, you can quickly put together your template because let's face it when you're doing client work, you don't always have the time or they don't always have the budget for something completely customized. This lets you have that customized website that looks really good, without really having to worry about setting up that really good and customized look, you just have to go and tweak it from there on, which is really, really awesome. It is really cool, really fun. I really suggest that you go and check them out. There's a link down in the description below, you can check it out, make an account for free, play around with it, you'll see how awesome it is, and how quickly you can set up your templates to make then your really cool websites for exactly what you need. A really big thank you to Design Moto for supporting my channel. And now to the main topic, typography, six quick tips, and don't forget there's a bonus one at the end because we're going to go over the six tips a few times, then at the very end, we'll talk about that bonus tip. Let's jump right into it. All right. So here we are in Figma. Now we will be looking at all of the things I'm going through here in a few different examples or three different examples. We can sort of repeat things and also reemphasize what we're doing. But to start with, I want to do it on this really basic design and we sort of get more complex as we go through. So the very first tip that I'm going to say is to always group related information together. And that means also separate things that aren't directly related. And on a simple, simple design like this, you might say that's really basic, but I'm going to start just by grabbing my button right here and just moving it off down and then grabbing this paragraph and moving it off down. And just like that, I have a title, I have my paragraph and I have my button and I've separated those three pieces of information. Now my separations are probably a bit too big, but that's where I want you to start even if you're just doing it with CSS with adjusting your margins, make them bigger than you think you need. And then you can always readjust and make them smaller afterward. But we're going to be playing with this a bit more. So I'm going to leave it like this for the moment. Now, the reason we want to do this is we want to make it really easy for somebody who's looking at the text. We see a piece of information, we can read that, we can then come down to this next piece of information and read that. And then we can come down to that last piece of information down there. And we can read that one down there. No problem at all. It separates it. Whereas from the before when we had that, that's just undo. There we go. Everything jumbled together like that. It makes it really hard for the person reading it to figure out what they're looking at. It's just too bunched together. So when we separate everything out like this, it's just going to make everybody's life so much easier. So first, and it's really important first, we're going to see this grouping of information a lot more in the last example, we have a lot more texts that we're going to be dealing with. But in something like this, really simple, just group everything apart. And then we come in with font size. And this is I think the easiest thing for people to do. But once again, like the spacing where I put way too much space here. People tend people tend to put not enough font size difference. So when they're creating this contrast, they just don't make enough. So I'm pushing K or you can come up. We have a regular selection move tool and we have a scale tool here where Figma. So I'm going to go with the scale tool. And I'm just going to make that a lot bigger. And this is why I wanted a lot of space because I knew I was going to do that. And by making it a lot bigger, I'm making it really obvious. That's the title. Then I have some text that follows. And then down here, I have my button that I can click on. Now this is where a lot of people once again, they don't make enough, they go, okay, I've made it bigger. And sometimes it's even like this. Well, this is bigger than that. Yeah, it is bigger, but it's barely perceivable that it's bigger. So when you're making it bigger, make it bigger. I think, okay, that's too much. I don't even have room for all my content. Let's bring that back down now. And then you'll find your happy medium somewhere in the middle like that. And you can always move things around. But again, if you're doing this just straight with CSS, which you definitely can do, your spacing is automatically to adjust a little bit as you're doing all of this. But really don't be scared about going really, really big when you're creating this contrast through font size. Once you've created your contrast through font size, the next thing we want to do is create contrast through font weight. This is the one I think people have the least amount of trouble with, but I've already made this bigger. But let's also come up and we're just going to go all the way up to black and make that, you know, let's switch over to the regular selection tool and bring that like that. And I think right away, you know, this is coming together a little bit. We're starting to see how, you know, our layouts sort of come together completely now. There's a few things we could still do to make it better, but it's made a huge difference from where we started with. When you get to this stage, this is where it's starting to look like somebody paid attention to it, but it doesn't look like a professional has handled it yet. There's still a few things missing here for making this be a good design to a great design. And that's why it's really important you go through all of these steps if you want your design to really shine. So what I'm going to do now is I'm going to grab the next thing we're going to do is contrast through color. And there's two different ways to think of color when it comes to type. There's the more obvious one where we can grab this. I'm just going to click on here to grab my eyedropper and I can grab some pink from here. I'm going to go to a darker area and you can grab that or even, you know, we're staying within that same tone. So I could come here and make it. Maybe that's a bit too much, but something like that. And obviously that definitely works. And I could come in and steal maybe the same color for my button here. I think that would really work well. My text could probably then become white and something like that. This is going to work. It's not too bad. But when we're talking about color, we don't necessarily need to inject direct color into it. Another thing that comes up and this is something that people miss out on a lot is when it starts playing with different shades of a color. And usually that means black. So if I left my title pure black or maybe even my title could be a little bit off black because the pure black is really strong, but we'll leave it like that for now. We do a black in our image and stuff like that. But it's where we come in and we just, you'll see this in designs all the time where we're just going and we're going to the grays instead of pure black. And just like that, we're creating, like my button is really standing off. Let's pull my button off for a second now. And let's just look at this when it's pure black. Actually, let's, you know what we're going to do? We're going to turn off my pig. We're going to copy this over just like that. And we'll grab this one and we're just going to tone this down a little bit into the grays. And you see how that's created a big contrast between this title and here compared to over here? It's not a huge difference. I haven't gone really light. And that's one thing you want to avoid. You'll see some designs where they like going in these really light grays. And it can look really nice. Actually, I won't lie to you. Sometimes the really light grays and because then what it does is it lets you bring this more into the grays as well. And you can do something like that, which, you know, it's not a stark. It's the white on black here can be really hard. So that definitely can look nicer when you're thinking of it from a visual standpoint. But when you're thinking about it from a readability standpoint, you've just hurt your readability. This text, the contrast is low to the point where it's making it harder to read. So it is a bit of a balancing act in that. So maybe this stays not black, but really close to black. And then here we don't want to go too dark, but we can keep it dark enough that there is, you know, it's, there's definitely gray coming through here, but we want to make sure that it stays readable. So maybe something like that. You can see the difference right now between this paragraph and this one doesn't stand out as much, but that's exactly the point. We're creating contrast between my title and my text here through font size, font weight, and now through color as well. Two things that are really going to transform your design. And this is super, super important. This is the step that most people don't bother taking. And there's two parts to it. So it's two different tips. The first one is to adjust the line head of your body text. So body text is your paragraphs, all your small text, anything like this. That's your body text. That's what you do in your CSS, your selecting body. It's because it's for your body text. And what we want to do on that is we want to increase it. The default is always too tight. We want to increase that line height. Or if this was from a pure print perspective or design perspective, you'll see this referred to as letting. The traditional way to refer to it is letting, but in the world of web, we call it line height because that's what we call it in CSS. And what that's doing is it's making it much more readable. When our text is grouped like this where it's really tight, it looks heavier. It doesn't look as inviting to read as something like this. It lightens it up. Now, you don't want to make it too much because if it's really spaced apart and you start doing something like that, it looks like completely different pieces of information. The same way we created spacing, we used proximity or we created contrast through the distance of things. By making too much space between things, it just looks like different pieces of information. People will not read it as a single piece of text. In general, and we're seeing this in Figma, it's in percent. In CSS, you can just do it as like a 1.4, 1.5, 1.6. So 150% here would be a 1.5. That's a great starting point. I tend to start at 1.6 because like anything else, I like starting on the bigger side and then reducing to get to where I want. This is a tip that you hear a lot from Steve and I'm going to say his name wrong, so I'm just not going to say the whole thing, but from a refactoring UI. If you don't know about him, you have to check him out. I'll put a link in the description below. But really useful where you start bigger and then reduce because what happens when you start with the basic, we start this back at auto and we increase it up to where we want. We tend to go, oh, there we go. That's great. But you know, we could increase it more and then actually end up going, okay, that's too much. And then you end up finding, oh, that's actually where I want to be. Is that like a 1.7, which is huge, but it ends up looking pretty good. Now in this case, I do think 150 is pretty good. So I'm going to stop with it right there. And it just lightens everything up, makes it much easier to read and much friendlier and more inviting to read than something like this, which is all smushed together. Really important that you do that. And then the next thing is very similar, but we want to decrease the line height of large text because it's the opposite problem. The default line height is a default and it works for a text that's maybe at like a size 24. And that's it. And even then, I'm saying 24, it could be a bit off on that. But in general, when your font size is starting to get bigger and we're going to exaggerate it a bit maybe after, but if I come here and if I increase that, now it just, it looks weird. So it's not always to increase your default. So if we go back to the auto and then I come here and I shrink that down, I can definitely, you know, we could change our spacing now a little bit to keep it consistent. But just decreasing that a little bit, it's going to make a huge difference. And this would be exaggerated even more if this was all cap. So if I turn this into all cap text, just so you know, the spacing looks a lot bigger because we don't have these G's and these T's that are sticking off the top and stuff. So because we don't have any descenders coming into those areas, the spacing looks even more. So if every of all cap text, it's exaggerated and you can really bring that in nice and tight for something like that. But I just want to leave this on the side for the contrast compared to what we had at the beginning and what we have now. And I think it makes a huge, huge, huge difference. So yeah, we can do stuff like that and let's turn my eye pig back on. We can go find our button that we created. And just like that, I think we have a pretty nice layout compared to what we started with. I think it's much, much, much better. So let's go and take all those same tools or those same tips and apply them to this layout right here. So here we have a testimonial section. We have a paragraph of text. There's the testimonial in some random Latin, but then we have a name and we have a position. And this is where I want to talk a little bit more about grouping related information. We have what the person said, and then we have their name and their position. So the name and position, those are related pieces of information. So I can group them together just like that. And then I have this here. And we're not going to do it for all three. We're just going to do this on one of them. And actually, I think what I will do though, this background is a little bit dark for my liking. We're going to lighten that up a little bit. There we go. And okay, so there we go. We have my two pieces of information. So compared to here, it's obviously a lot easier to read now just to have that and then the name and position far away. Now what's more important here? You have to decide. I have my testimony at the top. I'm not even going to worry about this right now though. It's already a lot bigger. I guess we could go and make that black and or bold. And let's just say we make that all cap. So it really stands out as a big title across the top of the page. I'm not really not worried about that though. What I want to look at is this in a lot more detail. So first thing is grouping related information. We've done that. But now we want to use, now we want to create contrast through font size. What is more important? The person's name or the text? Personally, I think it's the text. This is testimonial. This is where they're talking about the product itself. So when you're doing these types of designs, did you have to think about this? What's more important? Is it the what piece of text is the most important? And I really think it's that. So in this case, instead of making this bigger, I think what I'm going to do is grab these guys here and actually make them smaller. And let's drop that all the way down to like a 14. Because really, that's not that important. It's important that they know it's a real person. They can see the name. I guess they could, you know, they can find their position. But I think just something like that, we're already off and running, just making that difference compared to that. It creates a sense of separation between the two. Now the difference and something different from this pig design where we had a title, we had a, where we had a title, a piece of text and our button, when we created our separation, then we talked about, and then we talked about font weight. It was really obvious the title should be the bold one. But here we have a little bit of a different scenario. We have our main text here, and then we have the secondary text here. Let's just call it secondary for a lack of a better word. I don't really want to come and make this bold because it's more important. You know, because something like that, it's going to look weird. We're making the wrong text bold in this case, in my opinion, because all bold like that, it looks kind of weird. We're a big block of bold text. It's kind of strange. Now what we've done though is we've created two pieces of hierarchy here. We've created my main piece of text and then the secondary thing. And this is where it's really important that we break down things. Once we've created the separation, I'm going to see this in a lot more detail in this last example. But if I grab this and I make it bold, because this is a lot smaller than this, this still becomes my main text. This is still a lot more important. But what I've done here is I've created the secondary piece of hierarchy. I have my title and then I have my front-end dev. So I've broken this up into two different pieces. And that's super important to do because if we just left this, I don't know, there we go. If I just leave that like that, it, you know, we see this as a piece of one piece of information when we're just quickly glancing at it. As soon as I go and make that bold like that, right away it makes it more visually interesting because we have a bit more going on. And it definitely makes it so we can see that there's two pieces of information. And then obviously here, if we did the same thing, the advantage with something like this, we did that as 14, eh? And then if I take Jane Smith and I make her bold as well, the advantage that's coming up with this is if somebody is just skimming this name, you know its name, you know then you're coming down here and you're getting the name in bold as well. So it's this nice advantage where you're getting this consistency through hierarchy. And that consistency makes the person who's reading the site, the visitor, makes their life so much better and so much easier as they look over at a design because they can quickly see, okay, the big text is the quote, the next thing is the name, the next thing is their position. There's no thinking about it. You're making their life so much easier. So we've created our separation through proximity by creating these two groups. Then in with these groups we've looked at it and gone, well in this group I have two pieces of information. I don't want to really change the font size because we already have it at 14. I don't want to make anything smaller than that and I don't want to make it bigger because then it's going to be weird. We're going to be too close back to this. So then I can use font weight within this little piece to create some hierarchy and some contrast within this piece of information. So the next thing is color. So let's just say we drop this down a little bit from pure black just to ease off a little bit because I think it makes it a little nicer when we do that. I could leave it like that but now the name and this are really popping off a lot more than that are even though they're smaller. So I think what I'd want to do is even come in here and lighten those up even more. I am really pushing now on the limit of contrast through and making things readable. So it is something I'd want to maybe think about a little bit but at the same time I really find this information isn't the most important information in the world. Their name, honestly, we care about this. We don't necessarily care too much and I'm just creating a bit more separation from the image here but we don't care too much about who said it. What we really care about is this. So now we can see and I might as well make all of these the same. Should have made components out of this. It would have made it a bit faster for me to... Whoops, wrong one. We can see something like that and it's starting to look pretty good. Now what are the last two things we want? We want to increase the line height of body text and we want to decrease the line height of large text. In this case, we don't have any large text. We have a testimonials up here which is only one line of text. So we can just stick with these and come... And what I'm going to do is just this one for now and increase my line height on that to probably 140-ish range. So that's a 1.4. I'd have to move these down. Maybe the whole component would have to be moved around a little bit. Well, something like that could work or if we needed to, we could stretch that out just a bit like that. To create our spacing a little bit better. And like that, again, increasing this, maybe 150 even could be okay. Whoops, 150%. Something like that could look a lot better. Again, this looks really crammed together. Something like 140-150. It just makes it a little bit more friendly to read. I don't think we need to do the same thing here because then it's just going to create this big separation. So for things like that, you can definitely leave them closer together if that was one paragraph where you just have a bold and then a span or whatever it is setting up these two things instead of two different paragraphs. You could even decrease the line height on those or even you could probably decrease the line height on those to keep them nice and grouped together just to make sure that it's nice and tight and not overly spaced out because I think personally I like it like that where it's nice and grouped together than having a little bit of space between it like we have right there. And let's go look at this third example. This is by far the most complex one. Where I'm going to bring everything we've done but we're going to be examining it in a lot more detail and a lot more of how we can tackle all of this. Once again, this background is a little dark so I'm going to lighten that up. So here is like an event type thing. So in this case, the event's name is Awesome Fundraiser for Awesomeness and we have our description of what the event is. We have the date and the time, the location and then we have my gift tickets and the price itself. So once again, let's just create some contrast through proximity or through spacing. So we're just going to space everything out. Now the time and the date are kind of related at the time and the date, of course related. The time and the location are a little bit related. So I'm going to keep those a little bit close. We can separate them a little bit maybe. And there we go. So right away, we've made that more readable. It's still kind of weird, but we've definitely made it more readable in that somebody can go boom, boom, boom. They can see that there's different groups of information. This step, again, is super important to do even though if you just do that, it doesn't help your design very much. It makes it better than what it was, but you definitely need to next get into your font size, font weight and color to really make things pop. So we can come into here, hit K. Let's just, if you double click in Figma, it will make the box fit and then we can go back to my V and then go back to K. Make that bigger. There we go. So my title is already standing out. Right away, I think that that, like, you know, I wouldn't be happy with this, but if I saw that, I wouldn't, you know, I think it's boring looking, but it's already made the differences I need, but I do think we can improve that. So let's come in right away and make this black just so it really stands off. And so we're going into my font weight there. So we can do something like that. We have my description that's coming here and I think 18 is okay. For that, let's come into these. I think, you know, the most important thing is they see the title. What's the next thing somebody cares about? Well, they might skim the, if it's interesting to them, they'll skim the description. They might not look at it in a lot, but they'll skim it and, you know, we're going to go into color right away and dim that down just so it creates a bit more of a separation there. And so they see the title. It interests them. I think we can even make that bigger, to be honest. Something like that would probably be a bit more interesting. And what do we want to do with titles when we have bigger font sizes? I hope you said we want to decrease the line height. So we can decrease that just a little bit to tighten it up. And we have body text. What do we want to do with body text? We want to increase the line height to help make it a little bit more readable and a little bit more friendly. So we can do something like that. Now, if somebody gets to this point, so think about it. It is important that you're thinking about this. You're looking at the text and you're going, how is somebody looking at it? They're going to look at the first things first. They want to see what the event is. If that doesn't interest them, it doesn't matter what the rest is. They're just going to the next event, or whatever it is, depending on the site they're on. But let's say they read that, they're interested. They're going to skim the description really fast. And then, you know, they might even skip the description. They may go, you know, if it's a thing they're aware about. Yes, I know I want to go. I don't need to read the description. I want to know when it is, so know if I'm available. Maybe it's the price. But let's say, you know, the price obviously does come up. If it's super expensive, maybe they're not going to show it. We can even get rid of that. But in this case, it's not too expensive. So we'll leave the price on there. But they're definitely going to want to know when it is. Those are two important things because I'm available and can I make it to where it is, right? So we might as well come in and say we have this. I'm going to make this. Let's make that all caps just for fun, because this is something I didn't really plan on talking about. But let's say we make that and we can make this all caps at the same time. There we go. And so we can talk a little bit about all cap text. And by doing that, it sort of makes this one block of information right there. Now with all cap text, especially if we decide to make it a little bit smaller. So say like a 16 and this definitely for buttons is something that I do a lot. 14 is probably a bit small. So let's go with a 16 on there. And maybe this and this end up being black. So they, you know, just to create that separation of information that we wanted to have in there. What you can do with smaller text or any all cap text, as long as it's not a big title and even with titles, you could do that. But with something that's like a body text, 16, 18 or buttons, sometimes you might go as small as like 14. What you can do to make it a bit more readable because what happens is the characters start pushing together a little bit, especially at small font sizes, is to come into the letter spacing and increase the letter spacing a little bit. It doesn't have to be a lot, but just a little bump up in the letter spacing along the way. So say we did something like that even, I could probably have all of this just like a comma, 10 a.m. Probably makes sense to group all of that like that and then the location. I think tickets could be a button. So again, buttons often, often, often are alt caps and then, you know, we have our R for rectangle. You can make that into a button. So actually let's just make this a little bit bigger. But as I said, for a lot of the time, you might even drop this down all the way to 14, but 14 is getting small so then you want to make it more readable so you make it bolder. And because it is so tiny, you can space it out a little bit. Any really small text too, just adding a little bit of letter spacing on it, it makes a huge difference in making that text a bit more readable. Because if not, the letters sort of start getting stuck together a bit too much. The price, it could even be, depending, you could make the price really big if it's a good deal, even maybe this could come up over on this. You could do different things with it. I'll leave it down here. But something like that could work if you really want to say it like if it was a free event or something. But if it's always going to have a price and sometimes it's cheap and sometimes it's not, you probably don't want to make it too obvious, but maybe you do want to make it, you know, people are interested in the price. So we could do something like that. We can create a bit more contrast through color. So, you know, I'm not always following the steps one after the other. I'm grouping my information right away. I'm always trying to space out my information, figuring out where I want to put things. Then I'm going to generally decide what should be bold, what shouldn't be bold, things like that. But then the color, different things like that, it takes some playing around with. You're moving things around, you're playing with it a little bit. There's nothing wrong with that. It's one of the reasons I do like design tools rather than always just coding things up in CSS. Decisions like this, definitely just in CSS, if you're doing a simple page, you could definitely do it. Something like this. You generally, I find it much easier when I can move stuff around. Because even what you could do is something like this could even come all the way up to the top and this could be moved down. It's not really working for me in this just because of the balance of it. But let's pretend the location wasn't involved in this. I could take this and tone it down with the contrast a little bit, lowering the contrast. Something like that could also work because I'm still looking here first even though this is what's on top. The visual order becomes less important once you start doing a good job on a lot of these things because you start getting because you're attracting the eye using these other things and you're making the hierarchy so obvious through some of these other tools that are these other things like contrast through things like font size, font weight and color that the order of it becomes less important and you can still get the eye to look where you want it to. Oh, that's cool. Oh, it's only 10 bucks. Oh, I can make it. Let's get my tickets. And yes, the eye has to jump around a little bit for that. But your eye is going to follow the right order all the time on something like this. So it's not like this big worry about trying to get it to work. And then of course, once you get it to this step, then you can start playing around with colors a little bit more. So if you really you know, you want to bring in and I like just using eye dropping and grabbing colors from something. Now it's not always an option. But even if you're coming in with something like that, you know, we could be coming into the purples and get it like if every event is always using a purple or something like that, like that's even going to drag the attention a bit more than maybe that purple comes back in with the button color. We can grab that and then, you know, you're reusing in general. You're going to start reusing colors a little bit already talked about color before in another video. If you're interested in that one, I'll have a link to it in the description as well. But just playing around with things like this, it makes a huge difference. And I haven't even talked about choosing fonts. We haven't even played with fonts. We've just stuck with the default. In this case, it's Roboto, which tends to be a nice font. So if you're really not sure, you can see that it does work well. But if you mix up two different fonts and something like this, it can even make a bigger difference. But just playing with your grouping information by the type of information it is, you're creating contrast through proximity, you're spacing things out and grouping related information. So I've grouped my title in my description. I've kept my time all together. I've put the price somewhere else. I've grouped things by information. I've got the $10 and they get tickets. They're sort of related and you're not getting tickets unless you know the price. So you're grouping information by the grouping things by the type of information they are, then you're creating contrast through your font weight, through your font sizes, you're making your titles big, your body text smaller, playing around with different things like that, then you're creating contrast through color, whether you're keeping everything black and white or you're actually bringing in colors like this, it doesn't really matter too much as long as you have a contrast through color. So just all black with grays, that's perfectly fine. Just remember don't go too light on the grays or you will hurt the readability of the text. And then increasing the line height of your body text and decreasing the line height of your big text it's going to make it so much better and you really do have to do that body text paragraphs, small text, anything below like 24 points, increase that line height to help make it more readable. These are all things that are really easy to do. You can be really methodical about how you approach it and it's really going to help your designs. And I did promise you a bonus tip if you want to stick around to the end. So here it is make sure you limit the length of the lines of text. Right now I've kept it really short and you know what we're going to come back to the pig to start off with on this one. So let's hide that pig and what I see people do is let's pretend that pig never existed and what people do is they have it on mobile. So let's make this into a mobile art board. We have something like that and it looks fantastic and everything is okay. There's spacing actually in this case maybe things get spaced a little bit closer and you know on a phone that might look great. And then what happens is when the screen gets bigger and this is like the number one mistake I see devs make all the time well we just let that grow all the way across the page and that looks like crap. That's why you'll see a lot of designs that involve a big picture on the side with text here because what happens is people's eyes don't want to scan the whole way across like that. It just this is something like this like it's one line of text it doesn't look good but it's also literally if you're on a big screen you're on a 27 inch screen and you have text going from one side to the other man it's just awkward it's super awkward to read. You want to limit line lengths. Now there's rules about line length not going to stress too much about them you don't want to go over 70 characters and if you can do like between 50 and 60 characters in length you're definitely in the right ballpark because something like that is so much easier to read than something that's coming all the way across like this. Just makes a huge difference in the readability of text. In general you also want to stop text from getting too narrow now on a phone you know if you're 320 pixels across because you're and you have like padding and stuff on the sides because you're worried about you're dealing with iPhone 5s or whatever you can't limit it it's sort of like a newspaper they need to increase they're dealing with small column sizes that's just what they have to deal with so it's okay but when you can don't let text get all the way across like for small sizes we can't always prevent it from phones but have a maximum width on your paragraphs something like this we don't have to stress about because generally you end up with columns but again something like this you know you have a card like that make sure your card make sure your card doesn't all of a sudden end up stretching the whole way across and say the image stays here everything else here is not very long so it's not so bad but even this like you know you might get back going like that and then you end up with this going the whole way across it starts being really really awkward even a blog where these lines of text are super long it looks super weird and people don't always know why it doesn't look good but even if you're not a designer you're just you're getting on something like that and there's something it feels wrong about it it feels off and it you know you want to make people's experiences as good as possible and by far the most common mistake I see devs make is just letting the text go all the way across the page they have these massive massive things because they designed it mobile it worked great and they built their media queries in but they're not always using columns so you get these huge stretches don't let that happen make sure you limit the overall thing I'll give you a quick tip if you want use the ch unit so like font so paragraph you could do and I know I'm not in my code here but you could do a paragraph max width of something like and you know 50ch the ch is supposed to be the width of the zero character of that given font so in general it's going to be a max width on your paragraphs of 50ch so about 50 characters wide roughly is it perfect science no sometimes you're going to want to adjust that but by setting a max width you know it's going to let it shrink down and then if you have to when you get to these bigger things you might want to go up to 60 if you find it's not big enough maybe you even go up to 70 but you want to set a max width even if you're not using ch you can be setting this in ms whatever but do not you know make sure there is a max width on your paragraphs or on whatever is holding your paragraphs to prevent things from stretching from one side of the screen to the other there's a reason why you don't see that you don't see text on a lot of these websites that have lots of text even go to medium go check out medium you're going to see the text doesn't stretch from one side of the screen to the other if you go on a nice big screen everything is limited lots of white space on the sides that's perfectly fine don't be scared of that empty space so there you have it six quick tips and a bonus tip I hope you liked all of it I hope you can implement these into your projects if you have any other tips you'd like to share please leave a comment down below and let other people know about them a big thank you to my patrons just helping support everything I do here if you haven't yet subscribed and you enjoyed this video please hit subscribe once again do not forget to check out design moto slides the link is down in the description below thank you very much for watching and until next time don't forget to make your corner the internet just a little bit more awesome