How to make your text readable for the web

How to make your text readable for the web. Now when it comes to typography there are a couple simple techniques that you can use to make your site look much more pleasant and engaging and easy to read. These are super simple techniques that you can implement literally right now in the next five minutes and they go a long way towards making your site feel more well designed. Now let's go over all of these techniques one by one. First each line shouldn't be longer than 50 to 75 characters. Now let me show you two quick examples of this and you can be the judge which of these looks better to you. The first one is a terrible reading experience. Each line is so long and when you finish reading one line your eyes have to travel all the way back to the start to begin the next line and often in long lines like these you'll find yourselves reading the same line twice because you'll lose track of where you were reading and that's just not a fun reading experience at all. The second example is actually a lot more readable and the only change I made is that I limited the screen width to 768 pixels. To make your text readable, you want to limit your text to 75-ish characters. Now in my designs, I usually go with 80 to 85 characters but that's pushing the boundaries there a bit. Now if you have a layout where you just need to fill the screen up somehow and you just have a ton of text, then you can try something like a two column layout where you have headings on one side and text on the other side. And this can look amazing on desktops and large screens. And you can always just revert back to a small one column layout on mobile and small screens if you want. Second tip, use appropriate line height. Now line height is just the distance between each line of text in your paragraph. Too little line height and your readers just won't know where the next line begins. So we'll have the same problem that we had with the width of the text. too much line height and it just make your paragraphs look really disjointed and disorganized So you need to use the right line height You need to strike the proper balance here Now I going to give you a very simple rule to keep in mind and then you can decide the best line height for yourself Line height should scale inversely with your text size. Now this means that for larger text you will use less line height and for smaller text, body text, you will use more line height. And this is just for readability concerns because when you have really large headline text it's super easy to read it even with short line height whereas when you have some really tiny body text then it's just very difficult to read with small line height so you need to use longer line height over there also another rule to keep in mind line height should scale directly with your text length as well so for longer lines you will have more line height so they're easier to read and for shorter lines you can have less line height because they'll still be very readable. Now here's a full article on the screen that makes good use of line height. We'll use shorter line height for headlines and longer line height for body text. So now you know how to pick line height effectively but as for picking the actual values you have basically two options here. One you can do some trial and error and figure out the best value by experimenting with different values or if you've watched my video on design systems and why and how you should create your design system, and you've predefined some values for your line heights, like a smart designer should, then you can just use one of the values from your system and be done with it. Number three tip for writing good text on the web. Clearly show which heading belongs to which paragraph using margins. Now, a lot of websites make this mistake. A lot of websites don't use margins properly to indicate which heading belongs to which paragraph in their whole article. A lot of times you'll see something like this. on an article. The problem here is that we have equal margins both above and below the heading so there no clear way to tell which paragraph it belongs to it just disjointed here What we actually want is a larger top margin and a smaller bottom margin Something like this Now we use twice as much margin above the heading that we use below the heading. And now we can clearly see at a glance which paragraph this heading belongs to. So it's just a much more pleasant and clear reading experience. Number four tip for writing good text on the web. Align your text properly. Now, when it comes to aligning your text, you really only have three options to pick from. You have right align, you have center align, and you have left align. And I realized I reversed the order. Left align is supposed to come first. But basically, in almost all of the cases, you will use left align the most. Because text is just easiest to read when it's left aligned. Because all of the lines start from the exact same point. So it's just easier to read that way. Especially if you have a large body of text. Now, center align can look good if you have only a couple sentences of text. You'll see this used most often in feature sections or in landing pages or another stuff like that. But if you have a lot of text, then it's going to look horrible. So in that case, just use left align instead of center align. Now, right align is very rarely used. In fact, I'm only able to come up with two very rare and unique niche cases for using right align. first if you have a table with numeric values then right aligning them is a good choice because numbers are just easier to compare when they're right aligned because all the decimal points are in the exact same point so it's just easier to compare numbers when they're right aligned that way second if you are displaying a right to left language maybe something like persian or arabic or something like that then you can use right align as well to help with the readability of that text but in most cases you're probably just using English or you're using some sort of a left written language right so in most cases you won really be using writer line now aside from those two unique niche cases I really don see much value in using right align at all In almost all cases it just pointless Usually we'll just use left align for like 90% of your text and if you're ever in doubt, then just err on the side of left align because you really can't go wrong with it. In almost all cases, left align is the best choice. Center align is good if you want to, if you only have a couple sentences of text and you want to display them center-aligned like some sort of a feature section or something. A lot of websites do that. And right-aligned is just mostly useless unless you're displaying a right-to-left language or something else. So again, if you're in doubt, then just go with left-aligned because you really can't go wrong with it. It's the best default choice there is. Now to wrap all that up, I'm going to show you a very terribly designed article that breaks every single one of the tips that we discussed. As you can see, this is a terrible, terrible reading experience. We're apply all of the tips we learned one by one and then let's just see how good we can design this article right. So first let's limit the width of the whole article to 768 pixels and you can see we already made this look a lot better than it was before. Next let's left align all of the text and you can see now it's really starting to come together. Then let's decrease the line height on headings and increase on body text. Finally let's fix the margins so we know which heading is connected to which paragraph. And now let's look at the final result. Now isn't this just a much more pleasant reading experience? With just a few simple techniques we've taken that ugly article that we had before and turned it into this beauty. So you can see with just a couple simple techniques you can go such a long way towards making your typography so much better on the web. Anyway that's all I have for this video. If you like it then press like. If you want to subscribe then subscribe. If you want to work with me check out my website. Link is in the description. Other than that I hope hope you learned something in this video thank you for watching and bye