6 simple typography tips to more professional looking sites

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 gonna be looking at six tips that help you improve the typography of your website these aren't complicated things we're not going into a deep dive into typography or theory we're looking at six quick wings you can use right away if you stick around until the end we're gonna 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 gonna be exploring typography some we're gonna be looking at some quick wins that you can use but before we get to that if this video is brought to you by design Moto's slides if you don't know about design moto 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 design Moto's slides are a fantastic just 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 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 you pick and choose exactly what you want where you want it which is really cool but one of the things I really like with slides is it's built with Deb's 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 your 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 are 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 cuz 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 in and tweak it from there on which is really really awesome it was 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 modo 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 gonna 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 a red so here we are in figma now we will be looking at all of the things.when going through here and a few different examples are three different examples we can sort of repeat things and also r.e.m ffice eyes 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 gonna 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 to readjust and make them smaller afterward but we're gonna be playing with this a bit more so I'm gonna 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 let'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 gonna make everybody's life so much easier so first and it's really important first we're gonna see this is the grouping of information a lot more in the last example we have a lot more text that we're gonna 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 to people tend to put not enough font size difference so when they're creating this contrast they just don't make it map so I'm pushing Kay or you can come up we have a regular selection move tool and we have a scale tool here with figma so I'm gonna go with the scale tool and I'm just gonna make that a lot bigger and this is why I wanted a lot of space because I knew I was gonna 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 then 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 you know 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 you know 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 you can you know your spacing is automatically you know 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 Conte through fontsize 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 gonna 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 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 professional is handled it yet there's still a few things missing here from 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 gonna do now is I'm gonna grab the next thing we're gonna 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 gonna 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 block or maybe even my title could be a little bit off block 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 create I'm think my buttons really standing off let's pull my button off for a second now and let's just look at this when it's pure block actually lets you know we knew 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 gonna tone this down a little bit into the Grays you see how that's created a big contrast between this title and here compared to over here it's not a huge difference 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 Gray's 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 an 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 is the contrast is low to the point where it's making it harder to read see 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 grey 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 it's all your small text anything like this that's your body text that's why you know when you do in your CSS you're 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 you're if this was from a pure print perspective or design perspective you you'll see this referred to as letting the traditional way to refer to it is letting but in you know the world of web we call the 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 and like this where it's really tight it looks heavier and 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've created spacing you know we use proximity we created contrast through the distance of things by banking too much space between things it just looks like different piece 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 is like a what you know like a 1.4 1.5 1.6 so 150 percent 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 gonna say his name wrong so I'm just not gonna say the whole thing but from a refractor in UI if you don't know his 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 your 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 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 ended up looking pretty good now in this case I do think 150 is pretty good so I'm gonna 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 and then 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 light height of large text because it's the opposite problem the default line height is a default and it works for text that's maybe at like a size 24 and that's it and even then I'm saying 24 I could be a bit off on that but in general when you're two font sizes start getting bigger and we're going to exaggerate it a bit maybe after but if I come here if I increase that now it just it looks weird so it's not always to increase 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 gonna make a huge difference and this would be exaggerated even more if this was all capped so if I turn this into all cap texts just you know the spacing looks a lot bigger because we don't have these G's and these tees 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 ever you have all cap text it's exaggerated and you can really bring that in nice and tight or 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 I 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 in 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 gonna we're not going to do it for all three we're just gonna 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 testimonial at the top I'm not even gonna worry about this right now though it's already a lot bigger you know 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 no really not worry about that though 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 your 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 that 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 gonna do is grab these guys here and actually make them smaller let's drop that all the way down to like a 14 because really that's not that important it's important they know it's a real person they can see the name I guess they could you know they can define their position but I think just something like that we're already often 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 when we talked about font weight it was really obviously 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 cuz something like that it's gonna look weird we're making the wrong text bulb in this case in my opinion because all bold like that it looks kinda weird we're a big block of bold text is kind of strange now what we've done though is we've created two pieces of hierarchy here we've created a my main piece of text and then this 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 no no there we go if I just leave that leg you 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 was something like this we did that is 14 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's 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 separations for proximity by creating these two groups then in with these groups we've looked at it 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 gonna be weird we're gonna be too close back to this so then I 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 a ease off a little bit because I think it's 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 where you know 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 do 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 B's 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 percent something 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 had like 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 know 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 then 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 gonna bring everything we've done but we're gonna be examining it and 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 events 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 gonna space everything out now the time and the date are kind of related at the time in the date they're of course related the time in the location are a little bit related so I'm gonna keep those a little bit closed 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 and 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 Kay that's this if you double click in 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 and a lot but they'll skim it and you know we're gonna 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 making 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 so it is important that you're thinking about this you're looking at the text you're going how is somebody looking at it they're gonna 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 the wrong but let's say they read that they're interested they're gonna skim the description really fast and then you know they might even skip the description there they go if you know if it's a an a concert that's coming up with its a somebody that they really care 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 and you 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 so here we might as well come on that and we have two pieces of information they're actually there and wanna know when it is and where it is those are two important things because am i available and can I make it to where it is all right so we might as well come in and say we have this I'm gonna 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 ma'am so we can talk a little bit about all cap texts 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 is definitely four 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 in this end up being black so they you know just to create that separation of information that we have wanted to have in there what you can do is 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 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 in to 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 can help things become a little bit more readable 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. it probably makes sense to group all of that like that and then the location I think it tickets could be a button so again buttons often often often our alt caps and then you know we never are for a 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 to 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 now for the price it could even be depending you could make the price really big if it's a good a good deal even maybe this could come up over on this you could do different things so 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 gonna 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 and even on this I think for the location 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 them playing around with your 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 could 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 cuz the balance of it but if it let's pretend the location wasn't involved in this I can take this and tone it down so with the contrast a little bit lowering the contrast and something like that could also work right because I'm still looking here first even though this is what's on top so 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 your rate you're making a hierarchy so obvious through some of these other tools that are these other things like contrast your through things like font size font waving 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 ten bucks all I can make it let's get my tickets and yes the eye has to jump around a little bit for that but your eyes 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 like if every event is always using a purple or something like that like that's even going to drag the attention of it 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 have 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 in 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 your spacing things out and grouping related information so I've grouped my title in my description I've kept my time altogether I've put the price somewhere else so I've grouped things by information I've got the ten dollars and they get tickets they're sort of related and you know you're not getting tickets unless you know the price so you're grouping information by the you're 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 colors like this it doesn't really matter too much as long as you have a contrast through color so just all black with Gray's 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 the 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 gonna help your designs and I did promise you a bonus tip if you stuck around to the end so here it is make sure you limit the length of the lines of text right now I've get really short and you know what we're gonna 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 their spacing actually in this case maybe things get spaced a little bit closer all right 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 it in this is a something like this like it's one line of text it doesn't look good but it's also I 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 that it's just awkward it's super awkward to read you want to limit line lengths now there's rules about line length not gonna stress too much about them you don't want to go over 70 characters and if you can do like between 15 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 remaining too narrow now on a phone you know here's 320 pixels across because you're worrying about and you have like padding and stuff on the sides because you're worried about you do thing with iPhone 5s or whatever it is 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 whoops 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 you know 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 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 50 CH 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 50 CH to about 50 characters wide roughly is it perfect science no sometimes you're gonna want to adjust that but by setting a max width you know it's gonna let it shrink down and then if you have to when you get 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 M's Remz whatever but do not you know make sure there is a max width on your paragraphs or on whatever's 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 he texts on a lot of these websites that have lots of text even go to medium go check out medium you're gonna 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 patron stirs to helping support everything I do here if you haven't yet subscribed and you enjoy this video please hit subscribe once again do not forget to check out design Moto's 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 corn in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 74,902

Rating: 4.945962 out of 5

Keywords: HTML, CSS, Kevin Powell, tutorial, 6 simple tips to improve the typography of your site, better typography, better web typography, better web text, improve website design, ui, better ui text, website text, website typography, improve typography, how to make my site look better, how to make a website look better, how to make a website look professional, figma, typography tutorial, typography tips, typography tips and tricks, 6 simple typography tips to more professional looking sites

Id: 6ardZEhjvV0

Length: 38min 3sec (2283 seconds)

Published: Wed Feb 19 2020