Welcome everyone, this is Christopher with InMotion Hosting, in today's video we're
going to be talking about adjusting line height in WordPress text blocks in the Gutenberg editor, and
also how to do it if the Gutenberg editor does not support the line height adjustment in your theme,
so we're going to talk about two different ways to do this, but first of all what is line height
and what do we mean by that? Line height is a typographical setting that you can adjust,
it's basically the space between lines in a paragraph, so the space basically
between this line and the next one here, and adjusting line height is something that can make
your paragraphs a little more easily readable, or it can just give you a different aesthetic on your
site that you might desire, so basically this is supported in some newer themes in the Gutenberg
editor, all you have to do is, while selecting or highlighting or basically working with a certain
text block, you can click the typography settings here under the block settings and then just
click line height and you can increase that line height by quite a bit, you can also decrease it,
so you have a lot of control over here, and you can be pretty precise with a decimal value here,
so that's how to do it, it's just that simple in some of the newer themes that have the typography
editable in the theme, but what if you're using an older theme or a custom theme and you don't have
this option built in, there's another way to do this so we're actually going to deselect this to
undo our changes and we'll just click update there just in case. And we're going to actually switch
to an older theme. So we're going to click out of this post go to appearance > themes,
and I'll just choose the 2020 theme here because I've got it installed, so that's the 2020 theme,
let's go back to edit our post again.
So now you can see while I've got my my paragraph selected here
under the typography settings there is no line height this time so you can see that it's not
editable in the editor here. So we have some other options here that we can choose from
but the most popular one would probably be to just do some custom CSS coding,
and to get some code here we're going to be following along with the "how to adjust line
height in wordpress" article in the InMotion Hosting support center article so you see i
have some example css code down here that we can just pop in, there's a different one for posts
that will only affect posts and one for pages, so you can have some more customization there just in
case you need that, so with my post open actually on the front end here I can just click "customize"
And you'll see there's an option here for additional CSS
so now I'm going to pop some code here and you can see what'll happen, I'm just going to copy it and
paste it right in, and you can actually see if you have quick eyes there you could see
that something already changed here, and we can actually adjust this right now, it's set at 2em,
we could set it to one or even something like 0.5,
But two looks nice so we can keep that, that's almost like double spacing or you can make it
even bigger, you can also use pixel values like 100 pixels for example, that's too big, I think
And so you can get pretty precise here with with CSS, and the good thing about using the additional
CSS editor here is that even when a theme update is released and you update the theme your settings
will be saved here as long as you click publish. This will not be wiped out when you do a theme
update or anything like that. So those are two different ways to adjust line height in WordPress
with new themes and slightly older themes and your Gutenberg editor. If you have any questions or
comments feel free to leave them below, feel free to like the video or subscribe for more videos,
and to be notified when we have new stuff coming out. Thanks for watching, I'll see you next time.