How to Add or Reduce Space Between Lines of Text Using Just HTML and CSS
This is one of those things you either know or you don’t. If you’re at this point, there’s nothing but good news: if you already know how to adjust the space between lines of text using HTML and CSS, then you’re done reading, and if you don’t, then keep reading and you will.
I was recently styling a webpage of mine — an article on a website I have, specifically — when I noticed that the title looked really odd.
The gap between each line was absolutely massive. It just really was not the effect I was looking for, and so I had to look up how to fix it.
It turns out that’s pretty simple: just use the line-height CSS property and then apply it. I have an example below.
Then, you can apply that CSS class to your HTML.
Now, the space between the lines changes.
That looks a lot better! When it comes to your exact text, you’ll have to experiment with different values because it really can depend on what parent CSS classes were applied to your original text, what font you’re using, what font-size, and other possibly conflicting elements on the page. For example, here is what my title looked like when I tried line-height: 0.8em;:
The text got even closer with the smaller value!
By the way, em is not the only format you can use. You can use any of these:
Let’s go through them very quickly.
Normal
Kind of an interesting way to put it, but line-height: normal; just means that there is a normalized default value which depends on factors like a browser or a font. Usually, this resolves to 1.2, but that’s not a guarantee. In all honesty, I find this kind of weird and uncomfortable because it can vary, so I try to avoid it — is that normal?
I couldn’t resist. I’m sorry.
Just a number
line-height: 2; is another format, and basically what you’re doing here is multiplying that value by the font-size. Mozilla says this is the preferred way to do it.
Length
This is the em unit I had above. em basically is the length of the font in nominal point or inches.
Mozilla actually says this can cause unexpected results, so it looks like I have some changes to make to the CSS I applied in the example I provided above! Nevertheless, this is an option.
Percentage
line-height: 25% is a calculation relative to the font-size of the element. Again, Mozilla warns this can produce unwanted results.
Hopefully, you have a better idea now of how to mess around with line-height to get the right amount of space between your lines of text! Go ahead and try it out — I highly recommend opening your browser console and editing the CSS right then and there by going in small increments to see how the space changes. Like a lot of CSS, it’s a lot of trial and error.
