How To Change Line Spacing In WordPress

Cramped text kills readability. Your visitors won’t say it, but they’ll leave.

Learning how to change line spacing in WordPress fixes this problem in minutes. Whether you’re using the Gutenberg editor, Classic Editor, or custom CSS, adjusting the line height property transforms dense paragraphs into scannable content.

Took me a while to figure out where WordPress hides these typography settings. They’re not obvious.

This guide covers five methods: Block Editor controls, Classic Editor inline styles, Additional CSS for site-wide changes, theme customizer options, and user experience best practices for optimal spacing values.

Pick the method that matches your setup. Most take under five minutes.

How to Change Line Spacing in WordPress

Changing line spacing in WordPress is the process of adjusting the vertical distance between lines of text using the Block Editor, Classic Editor, or custom CSS.

Users need this when improving content readability, fixing cramped paragraphs, or matching brand typography standards.

This guide covers 5 methods requiring 2-10 minutes depending on your approach and WordPress version 5.0 or later.

Prerequisites

WordPress version: 5.0+ for Block Editor, any version for Classic Editor or CSS methods.

Access level: Editor or Administrator role with permission to edit posts, pages, or theme settings.

Time estimate: 2 minutes for block settings, 5-10 minutes for CSS customization.

Browser: Chrome, Firefox, Safari, or Edge (updated versions recommended for Gutenberg compatibility).

Step One: How Do You Access the Block Editor Spacing Controls?

Access spacing controls by opening any post or page in the Gutenberg editor, selecting a Paragraph block, and clicking the Settings icon in the top-right corner to reveal the Block Settings panel with typography options.

Action

1. WordPress Dashboard > Posts > Edit (or Pages > Edit): Opens the Block Editor for your selected content.
2. Click inside any Paragraph block: Activates the block and displays the floating toolbar.
3. Settings icon (gear) in top-right corner: Opens the right sidebar with Block and Document tabs.

You should see the Block tab highlighted with options for color, typography, and dimensions.

Purpose

The Block Settings panel contains all text formatting controls including line height adjustments.

Without accessing this panel, typography settings remain hidden and you cannot modify spacing values for individual blocks.

Step Two: Where Do You Find the Line Height Setting in Gutenberg?

Find the line height setting by selecting a text block, opening Block Settings, expanding the Typography section, and locating the Line Height field where you enter numeric values like 1.5, 1.8, or 2.0.

Action

1. Block Settings > Typography: Click “Typography” to expand font controls (some themes show this collapsed by default).
2. Three-dot menu next to Typography: Click to reveal additional options if Line Height is not visible.
3. Enable “Line Height”: Check this option to add the line height field to your typography controls.
4. Enter value (1.5 to 2.0 recommended): Type your preferred spacing, where 1 equals single-spaced and 2 equals double-spaced text.

The preview updates immediately so you can see changes before publishing.

Purpose

Not all typography options display by default in Gutenberg.

The three-dot menu controls which settings appear, and line height is often hidden until manually enabled, which trips up a lot of people.

Step Three: How Do You Adjust Line Spacing in the Classic Editor?

Adjust line spacing in the Classic Editor by switching to Text view, wrapping your content in a span or paragraph tag with inline CSS, and setting the line-height property to your desired value in pixels, em, or percentage.

Action

1. Classic Editor > Text tab: Switches from Visual mode to HTML code view.
2. Add inline style: Wrap text in <p style="line-height: 1.8;">Your text here</p>
3. Alternative span method: Use <span style="line-height: 2em;">Text</span> for inline elements.

Switch back to Visual tab to confirm your spacing looks correct.

Purpose

The Classic Editor lacks built-in typography controls that Gutenberg offers.

Inline CSS is the only way to adjust white space between lines without installing additional plugins or modifying theme files, and honestly it works fine for quick fixes.

Step Four: Where Do You Add Custom CSS for Site-Wide Line Spacing?

Add custom CSS for site-wide line spacing by navigating to Appearance > Customize > Additional CSS, then entering a CSS rule targeting paragraph elements with your preferred line-height value in pixels, em units, or percentage.

Action

1. Appearance > Customize > Additional CSS: Opens the Theme Customizer with a code input field at the bottom of the left panel.
2. Enter CSS rule: p { line-height: 1.8; } applies 1.8 spacing to all paragraphs across your site.
3. Target specific areas: Use .entry-content p { line-height: 1.75; } for post content only, or .page-content p { line-height: 2em; } for pages.
4. Click Publish: Saves changes and applies them immediately to your live site.

Preview updates in real-time on the right side of the customizer.

Purpose

Additional CSS affects your entire website instead of individual blocks.

One rule controls paragraph spacing everywhere, saving time compared to adjusting each post manually.

Step Five: How Do You Change Line Spacing in Theme Settings?

Change line spacing in theme options by accessing Appearance > Customize > Typography (or your theme’s specific settings panel), locating the body or paragraph typography controls, and adjusting the line height slider or input field.

Action

1. Appearance > Customize > Typography: Location varies by theme; Astra uses “Global > Typography,” GeneratePress uses “Typography,” Flavor theme uses “Design Settings.”
2. Body Typography or Paragraph settings: Find the section controlling main content text (not headings).
3. Line Height control: Adjust slider or enter value directly; most themes accept decimals (1.6) or units (24px, 1.5em).
4. Publish changes: Confirms new spacing across all pages using that typography setting.

Purpose

Theme-level controls integrate with your design system and work alongside font size settings.

Changes here affect the entire site without writing code, making it the cleanest approach for non-developers.

Verification

Confirm your line spacing changes by checking multiple pages, using browser developer tools, and testing across devices.

Visual Check Method

Open 3-4 different posts and pages after saving changes.

Compare text blocks against your original layout; spacing should appear consistent throughout.

Inspector Tool Verification

1. Right-click any paragraph > Inspect: Opens browser developer tools.
2. Computed tab > filter “line-height”: Shows the actual rendered value.
3. Verify value matches your setting: Should display your exact number (1.8) or calculated pixels (28.8px for 16px font at 1.8 line-height).

Device Testing

Check your site on mobile and tablet using responsive design testing tools or actual devices.

Line spacing that looks perfect on desktop sometimes feels cramped on smaller screens.

Troubleshooting

Issue: Line Spacing Changes Not Appearing

Solution: Clear all caches (browser cache, WordPress cache plugin, server cache) by pressing Ctrl+Shift+R, then purging cache from your caching plugin settings (WP Super Cache > Delete Cache, or W3 Total Cache > Purge All Caches).

Also check if a page builder like Elementor is overriding your settings with its own typography controls.

Issue: Theme Overriding Custom CSS

Solution: Add !important to your CSS declaration: p { line-height: 1.8 !important; }

If still not working, use more specific selectors like body .entry-content p { line-height: 1.8 !important; } to increase CSS specificity.

Issue: Line Spacing Different on Mobile vs Desktop

Solution: Add media queries for responsive typography:

“ @media (max-width: 768px) { p { line-height: 1.6; } } @media (min-width: 769px) { p { line-height: 1.8; } } `

This sets 1.6 spacing on mobile (under 768px) and 1.8 on larger screens.

Issue: Only Some Paragraphs Changed

Solution: Check for inline styles in the Block Editor by selecting each paragraph and looking for custom typography settings in the sidebar.

Inline styles override theme and Additional CSS rules regardless of specificity.

Related Processes

• How to indent in WordPress for horizontal text adjustments
• How to single space in WordPress for tighter text layouts
• How to justify text in WordPress for alignment options
• Accessible typography guidelines for readable text spacing

FAQ on How To Change Line Spacing In WordPress

What is line spacing in WordPress?

Line spacing (or line height) is the vertical distance between lines of text in your content. It controls how much breathing room exists between sentences, directly affecting readability and overall text density on your posts and pages.

How do I change line spacing in the Gutenberg editor?

Select your Paragraph block, open Block Settings, expand Typography, click the three-dot menu, and enable Line Height. Enter a value like 1.6 or 1.8. The Block Editor previews changes instantly before publishing.

What is the best line height value for readability?

Most typography experts recommend values between 1.5 and 1.8 for body text. Shorter lines need less spacing; longer lines need more. A value of 1.6 works well for most WordPress themes and standard paragraph widths.

Can I change line spacing without writing CSS code?

Yes. The Gutenberg editor includes built-in typography controls. Many themes like Astra, GeneratePress, and flavor theme offer line height settings in their customizer panels under Appearance > Customize > Typography.

How do I adjust line spacing across my entire website?

Add custom CSS in Appearance > Customize > Additional CSS. Use p { line-height: 1.8; } to target all paragraphs. This single rule applies consistent spacing throughout your site without editing individual posts.

Why is my line spacing not changing after I update it?

Caching is the usual culprit. Clear your browser cache, purge your WordPress caching plugin, and check server-level cache. Also verify no page builder or theme setting is overriding your custom CSS with higher specificity.

What is the difference between line height and paragraph spacing?

Line height controls space between lines within a paragraph. Paragraph spacing (margin or padding) controls the gap between separate paragraph blocks. Both affect content layout but target different spacing relationships in your text.

How do I change line spacing in Elementor page builder?

Select your text widget, go to Style tab, click Typography, and adjust the Line Height slider. Elementor accepts values in px, em, or unitless numbers. Changes apply only to that specific widget unless you edit global fonts.

Can I set different line spacing values for mobile devices?

Yes. Use CSS media queries targeting specific screen widths. Set tighter spacing (1.5) for mobile under 768px and wider spacing (1.8) for desktop. Elementor and some themes include responsive typography toggles for each breakpoint.

Should I use pixels, em, or percentage for line height values?

Unitless numbers (1.6, 1.8) are recommended. They scale proportionally with font changes. Pixels create fixed spacing that won’t adapt. Em units work similarly to unitless but can cause compounding issues in nested elements.

Conclusion

You now have five methods for how to change line spacing in WordPress. Pick the one that fits your workflow.

The Block Editor works best for individual posts. Theme typography settings handle site-wide adjustments without code. Additional CSS gives you precise control when themes fall short.

Start with a line height value between 1.5 and 1.8. Test on mobile. Adjust from there.

Good text formatting isn’t about making content pretty. It’s about making it readable. Proper spacing reduces bounce rates and keeps visitors engaged longer.

Your theme’s default spacing settings often prioritize aesthetics over usability. Don’t accept cramped paragraphs as the standard.

Small typography adjustments create big differences in how people experience your content. Fix the spacing. Your readers will thank you by actually reading.