Grow your business, income, & life.

Behind-the-scenes training to grow your business and generating income. Strategies and mindsets that work.

CSS3 Tutorial for Beginners: 16 Line Height and Line Spacing Property

This is Sasha and thanks for joining me here for another CSS tutorial video where I share with you how to edit your business website or if you’re just learning some basic CSS it’ll help you out.

Today we’re going to take a look at the line-height property which is really useful if you have paragraphs of text and you need to split things up make things a little wider or a little bit more contraction in those line heights in between the spacings of those lines. Ultimately, I use it to space things out a little bit to give people a little bit of easier time to read paragraphs. Let’s take a look at how this works.

Using the line-height property

What I’ve done is I’ve create a few different paragraphs to look at and the way that the line height property goes is you type in line height and height and then what you could do is you could put in a number, you could put in the length or percent value. What I could is, let’s just say, 125% and when I do that and as we continue to hit refresh, let’s just see, let’s go to 185%, just so we make it a little bit bigger.

You can see it’s very noticeable that the spacing has improved or increased. If we go to 225, you can see again that spacing continues to increase. If we go 255, again that spacing continues to increase.

I’ve included 255%. I could go to, let’s just say right now we’re at 14 pixels, let’s say I go to 25 pixels, okay? You can see that base on pixels. If I go to 35 pixels, you’ll see it refreshed. If I go to 55 pixels on the line height, again, you can see that difference.

I could also do this in terms of points. If we do 16 points, you can see that’s basically used more for printing. I could do 25 points and you can see how that expands things and so on and so forth. You get the idea. You can also do the same thing with centimeters.

If you go with 25 centimeters right there, it’s actually really big, okay? Let’s just drop that down to 5 centimeters, okay? You can see the line spacing is pretty incredible, 1 centimeter, so you could see right there at 1.5 centimeters, again you can see it working.

Typically, the way that I like to use it is either a percent value or more pixels. You can also do just a number so, let’s just say, I go 1.25, okay? You have 1.25 line spacing or what you could do is 1.55 or 1.75. Those are the main ways that I use it. Basically I just put the number itself which is just an integer.

You could 1.95 like that so I’ll usually use like 1.65, 1.75 depending on the font size or I’ll do the pixel amount like, let’s say, 18 pixels, you know, that might give me a certain font size or line height that I want, let’s say, 25 pixels, you can see there’s a little bit wider or bigger or a percent value. I could say, “Okay. 170%.” Those are the three ways I usually don’t use like centimeters or points but typically pixels or percentages is the way that I go.

You could also do, again, 1.2 em if you wanted to do 2.2 em you could do it that way as well. Either way will work, it’s a pretty easy property to understand. That’s just the way that you go ahead and increase the line spacing. It makes things a lot easier to read when it comes to your paragraphs especially if, let’s say, you have let’s make this 18 on the font size and we’ll go down to 2, again when you have paragraphs of text it makes a lot easier to read.

Rather than having it compressed at, let’s say, 1 right here. You can it’s little more difficult to read so it’s a lot better practice to do something like 1.5, 1.75 on the EM factor or even just, you know, type in 1.65 on the number scale and you get your end result.