How To Adjust Line Height in WordPress Gutenberg Editor

One of the most important aspects of good typography is line height or the amount of vertical space between lines of text. Although it may seem like a small detail, line height can have a big impact on the look and feel of a WordPress post. It can also affect readability, with too little line height causing the text to run together and too much line height making it difficult to track from line to line. The best line height is usually around 1.5 times the font size, but it can vary depending on the font family and other factors. By adjusting the line height in your WordPress posts, you can create a more aesthetically pleasing design and improve readability at the same time.

Most of the time, you can adjust type elements in the Gutenberg editor by clicking the + sign under Typography for your block. This is true of line height as well, but only in certain newer themes.

Newer themes that include line height adjustment in Gutenberg include Twenty Twenty-Two, Tove, Blockbase, and more.

If you are using an older theme, you can easily add some additional CSS for your desired line height through the Customize area. In this article, you will learn all about how to adjust line height in WordPress using additional CSS. We will also cover adding paragraph spacing, which is similar, but requires different CSS rules.

• What Is Line Height?
• How To Adjust Line Height in WordPress
• Adjust Paragraph Spacing With CSS Padding
• Removing or Undoing CSS Changes

Note that block-based themes would require that you add the code in the Advanced > Additional CSS class(es) for an individual post or page. If you want to change it for the entire theme, then it would require that you edit the template and adjust the line height under Styles > Text. Older themes (non-block-based themes) do not use the block interface, but they are shown with screenshots in the following tutorial.

Adding some custom CSS to your theme is an intermediate level WordPress skill. But doing so cannot cause disastrous harm to your site, CSS rules affect the look of your site but do not interfere with critical system functioning, and they can be easily erased.

What Is Line Height?

Line height controls the distance between lines of text. You can control this distance with the line-height CSS property.

Spacing between paragraphs is handled by a different property. To control the distance before or after paragraphs, you will want to adjust the CSS padding property (see below).

How To Adjust Line Height in WordPress

Without CSS

Below, you will see how to adjust line height in the newer, full site editing capable, WordPress themes:

1. Log in to the WordPress dashboard
2. Select a post or page to edit, or create new content
3. Highlight a text block
4. Click the + sign under the typography settings for this block
   
5. Select line height
6. Adjust line height to your desired value
   

With CSS

Below you will find out how to open the Additional CSS menu and the code snippets you can add to adjust your line height.

1. Log into your WordPress dashboard
2. Click Customize under Appearance
3. Choose Additional CSS
   
4. Add the CSS code you will find below

To adjust line height for the text in posts:

.post p {line-height: 2em;}

For pages:

.page p {line-height: 2em;}

The CSS code described above accomplishes a few tasks. It targets the paragraph element (p) for posts and pages. It sets the line-height CSS property to 2em. The latter value is the one you can adjust to your liking. For example, if you want more space, you can use 3em.

The em unit is a standard measurement you can apply to all sorts of different CSS properties. You can also use integer values (like 3.75), percent values (like 150%), or pixels (like 25px).

If you are customizing your line height while viewing a post or page in the browser window, you will get to see your CSS changes happen live. So feel free to tweak these values exactly to your liking. When you’re ready to finalize these changes click Publish. And now these changes will be published to your live site, affecting all posts and pages.

Adjust Paragraph Spacing With CSS Padding

Using the additional CSS interface in the Customize window, you can also add some padding to give more separation to your paragraphs. The following CSS code uses the padding-bottom property, to give padding beneath the paragraphs. Alternatively, you can use padding-top to set the padding above the paragraph.

.post p {padding-bottom: 2em;}

Likewise, you can make the same modification to page content as well:

.page p {padding-bottom: 2em;}

And as above, you can test your changes live by viewing your site in the preview window on the right. You should see your paragraphs gaining padding as soon as you type in the code examples above.

Undoing or Erasing CSS Changes

If you decide you don’t want to apply your additional CSS (or any changes made in the Customizer) you can always click the gear icon next to the publish button and discard your changes. This action will only apply to the most recent changes added. Anything that was published beforehand will have to reversed manually.

If you have already added and published CSS rules to the site, you can simply go back into the Customizer at any point and erase any rule you no longer want.

To learn more, check out our other articles about Blocks in WordPress!