How to Change the Line Spacing of Text in WordPress

Proper line spacing isn’t just about aesthetics — it directly affects readability, user experience, and even how visitors engage with your content. Whether you’re running a personal blog or managing high-traffic commercial websites, optimizing text spacing in WordPress can significantly enhance the visual structure of your site.

In this guide, we’ll walk through the most effective ways to change line spacing in WordPress, with and without coding, using both the classic and block (Gutenberg) editors. You’ll also learn how to apply custom CSS and troubleshoot common formatting issues.

Why Line Spacing Matters

• Improves readability — especially on mobile
• Reduces bounce rates by making long texts easier to scan
• Enhances design consistency across themes and devices
• Aligns with SEO best practices (clear, structured content = better engagement)

Let’s break down how to control it.

Method 1: Adjusting Line Spacing in Gutenberg Editor

In the default block editor (Gutenberg), you can manage line spacing using the “Paragraph” block settings or via custom CSS classes.

➤ Steps:

• Open the post or page in the WordPress editor.
• Select a Paragraph block.
• On the right sidebar, find the Typography > Line height option.
• Adjust the value (e.g. 1.6, 2, 2.2).

Note: If the option is not available, proceed to Custom CSS (Method 3) below.

Method 2: Classic Editor (TinyMCE)

The Classic Editor doesn’t include a direct line-height option. However, you can:

• Use Shift+Enter for manual line breaks (no spacing)
• Use plugins like TinyMCE Advanced (now part of “Advanced Editor Tools”) to add spacing controls

For consistent styling, we still recommend setting line-height via CSS.

Method 3: Custom CSS (Best Practice for Full Control)

This method gives precise control, works across all blocks and themes, and avoids layout shifts.

Example 1: Global line height for all paragraphs

p {
  line-height: 1.8;
}

Example 2: Apply to a specific class only

.custom-text {
  line-height: 2.2;
}

Where to insert CSS:

• Appearance → Customize → Additional CSS, or
• Inside your child theme’s style.css, or
• Through a plugin like Simple Custom CSS

Method 4: Page Builders (Elementor, WPBakery, etc.)

For Elementor:

• Edit the section or text widget.
• Under Style → Typography, adjust the Line Height field.
• You can set it in em, px, or relative units.

For WPBakery:

• Use the design options or add custom CSS directly in the row or column settings.

Method 5: Mobile-Responsive Line Spacing

• Good line spacing on desktop can look cramped on mobile. Most editors (including Gutenberg and Elementor) allow responsive settings. Always:
• Preview changes on tablet and mobile
• Set slightly larger line-height for small screens (e.g. 2 instead of 1.6)
•  Common Issues & Fixes

Line height not changing after CSS update?

• Make sure your theme or plugin isn’t overriding styles.
• Try using !important in your CSS rule:

p {
  line-height: 2 !important;
}

Changes visible in Customizer but not live?

• Clear your site cache and browser cache.
• If using a caching plugin, purge all caches.

 Summary