Build Your Own Business Website header image

How to Adjust the Space between Lines of Text – Line Height Property

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

A member had a block of h1 text and he wanted to fine tune the space in between each line.  We look for a line spacing button on our visual editor.  Next we create a custom css style.  We demonstrate using Web Developer to test our new code.

Video Transcript

Rick: Eldo has a question. Let’s see, Eldo are you… oh, yeah. Eldo, I’ve un-muted your microphone.

Eldo: Yeah, I’m here. Can you hear me clearly?

Rick: I can hear you, yeah. I mean, if you speak up just a little bit but besides that, it’s good.

Eldo: Okay, will do.

Rick: So go ahead and ask your question.

Eldo: My first question is how do you increase the leading in h1 heading?

Rick: And what do you mean by leading?

Eldo: If you’d just take a look for a moment at my website,

Rick: Okay. Let’s see. Would you spell that for me?


Rick: Got it. Okay.

Eldo: You see, there’s far too much space between the lines where it says “Website building in progress, almost complete. I’ve been copy-edited by a lot of people…” There’s too much wide space and I had to put an extra line break in there to make that extra space because the letters were kind of practically overlapping each other. I was just wondering where I can fix that in a correct way.

Rick: That’s called line height. So you’re talking about… let’s see, let’s just hit this back where we can… see it? So line height… so the website building in progress and almost complete. Those are 2 actually completely separate pieces of text, right? Yeah.

Eldo: Yeah, I’m putting the break off to…

Rick: In order to give yourself more space there.

Eldo: Yeah.

Rick: Well, what you would do would be to just change the line height for that and so right now, you know, interestingly, what you have is you have an h1 that is included or that is inside of… oh, I see. Each one of these things, you really want it to be one complete h1 tag, is that right?

Eldo: Yeah. It’s all supposed to one h1 tag but the line was too long so I broke them to make them fit into the space better. But there’s too much wide space underneath them. If… putting 2 br tags at the end of each line to make that sort of extra wide space because if I didn’t do that, if I just put a br, they’re kind of budging up against each other. They seem to create an amount of wide space in between them… wide space.

Rick: Yeah, so… you know, I think you may be able to fix that. On the first place, if you want to… if the lines are too long you know, instead of hitting enter to separate the lines, you could hit shift enter. That doesn’t actually start a new paragraph.

Eldo: Yeah, I did that but it didn’t work.

Rick: Okay. So then if we… oops…come over here to the dashboard and then we go to pages, we just look at this page here… I’m just looking to see if I have a line spacing choice here. I guess I don’t, inside this visual editor, have a line spacing choice. So without a line spacing choice, you actually have to create a style for that. And so if we go back to your case for a moment and we inspect that element, right now, what we’re looking at is…we’re looking at this h1 tag and that h1 tag line height is 1.571. And so what you would do would be to come back over here, custom CSS, we say .custom and then if you only want to apply to this page, then we would come up here to… we would use this custom class copy editing. So .custom .copyediting…pardon me, copyediting and then you would just say, oh pardon me, this is the h1 tag. H1 and then oh, and we want…well, actually, for practical matter, Thesis only has h1s in one place. So then, you would just say format… I mean, you’d say line height : 2 em. You know, and you can see how that’s automatically spanned that out more now. Right, so what I’d do is I would get rid of all of the breaks, the br, and then I would create a custom CSS declaration for this that specifies the line height of .custom .copyediting h1.

Eldo: Okay.

Rick: And I’m going to cut that and I’m going to paste that into the forum so that you can go you know, grab it yourself.

Eldo: I’ve made screenshots, but thank you anyway.

Rick: Okay, well, that’s good then. If you’ve made a screenshot, you’ve got it. And so that’s the way for you to address those things.

Eldo: Excellent. Thank you, Rick. That’s brilliant.

Rick: You’re welcome. Let’s see, I just want to make sure before I let you go…

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment