How to Change Line Spacing in WordPress: All Methods Explained

Line spacing in WordPress — controlled by the CSS line-height property — defines the vertical distance between lines of text within a block element. Adjusting it directly affects readability, visual hierarchy, and typographic quality across your site. The four primary methods to change it are: the Gutenberg Block Editor's native controls, the WordPress Theme Customizer, custom CSS via the Additional CSS panel, and typography plugins. Each method suits a different level of technical access and scope of change.

This guide covers every method in full technical depth, including edge cases, selector specificity pitfalls, and plugin trade-offs that most tutorials skip entirely.

Why Line Height Matters Beyond Aesthetics

The CSS specification defines line-height as the minimum height of line boxes within the element. For body text, the WCAG 2.1 accessibility guideline (Success Criterion 1.4.12) recommends a minimum line-height of 1.5 times the font size. Ignoring this affects not just visual design but also compliance and search engine quality signals tied to Core Web Vitals and user engagement metrics.

A poorly set line-height — particularly values below 1.2 on body copy — causes text to feel cramped, increases bounce rate, and can trigger Cumulative Layout Shift (CLS) issues when combined with web fonts that load asynchronously.

Method 1: Gutenberg Block Editor Native Controls

The Gutenberg editor exposes line-height controls natively for Paragraph, Heading, List, and Quote blocks, but this feature must be explicitly enabled at the theme level via theme.json or the add_theme_support() function.

Step 1: Verify Line Height Support Is Active

If you do not see a Line Height field in the block settings panel, your active theme has not declared support for it. You can enable it by adding the following to your theme's functions.php:

add_theme_support( 'custom-line-height' );

For block themes using theme.json, ensure the following is present under settings:

{
  "settings": {
    "typography": {
      "lineHeight": true
    }
  }
}

Step 2: Select the Target Block

In the post or page editor, click the Paragraph or Heading block you want to modify. The block toolbar appears at the top, and the right-hand sidebar switches to the Block tab automatically.

Step 3: Locate the Typography Panel

In the right-hand Block panel, scroll to the Typography section. If it is collapsed, click the label to expand it. You will see a Line Height input field.

Enter a unitless value. WordPress passes this directly as the CSS line-height value on the block's inline style. Recommended ranges:

• Body paragraphs: 1.5 to 1.8
• Headings (H1–H2): 1.1 to 1.3
• Subheadings (H3–H4): 1.2 to 1.4

Critical edge case: Unitless values (e.g., 1.6) are strongly preferred over pixel or em values (e.g., 24px or 1.6em) because they scale proportionally when a child element inherits the property and changes its own font size. Using px here is a common mistake that breaks nested element spacing.

Step 4: Save and Validate

Click Update or Publish. Use your browser's DevTools (F12 > Elements > Computed) to confirm the inline style line-height: 1.6 is applied to the correct element and is not being overridden by a theme stylesheet with higher specificity.

Method 2: WordPress Theme Customizer for Site-Wide Typography

The Customizer (Appearance > Customize) provides a live-preview interface for site-wide changes. Typography controls in the Customizer are not a WordPress core feature — they are provided entirely by your active theme or a companion plugin.

Themes with Native Typography Panels

Themes built on frameworks like GeneratePress, Astra, Kadence, or OceanWP expose dedicated Typography sections with line-height sliders for body text, headings, and widget areas individually.

Step 1: Navigate to Typography Settings

Go to Appearance > Customize. Look for a section labeled Typography, Fonts, or Global Styles depending on your theme. If no such section exists, your theme does not support Customizer-based typography control — proceed to Method 3 or Method 4.

Step 2: Adjust Line Height Per Element

Most theme customizers allow you to target:

• Body text (maps to the body or p selector)
• H1 through H6 headings
• Navigation menus
• Widget titles

Set your values and use the live preview pane to validate across desktop and mobile breakpoints simultaneously.

Step 3: Publish Changes

Click Publish in the top-left of the Customizer. Changes are written to the theme's stored options and applied globally via the theme's stylesheet or inline <style> block in <head>.

Pitfall: Customizer typography settings are stored in the theme's options, not in style.css. If you switch themes, all these adjustments are lost. Always document your values before changing themes.

Method 3: Custom CSS — The Most Precise and Portable Method

Custom CSS gives you complete control over selector targeting, specificity, and responsive breakpoints. It is the correct approach when you need granular control that neither the block editor nor the Customizer provides.

Step 1: Access the Additional CSS Panel

Navigate to Appearance > Customize > Additional CSS. This CSS is stored in the database and output inline in <head>, giving it a specificity advantage over most theme stylesheets.

Alternatively, if you manage your own server environment — for example, on a VPS Hosting plan — you can enqueue a custom stylesheet via functions.php for better cache control and performance:

function mytheme_custom_styles() {
    wp_enqueue_style(
        'custom-typography',
        get_stylesheet_directory_uri() . '/css/custom-typography.css',
        array(),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );

Step 2: Write Targeted CSS Rules

Global paragraph line height:

p {
    line-height: 1.6;
}

All heading levels:

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

Gutenberg-specific paragraph blocks only (avoids affecting sidebar or footer text):

.wp-block-paragraph {
    line-height: 1.7;
}

Scoped to a specific page template or post type using the body class WordPress outputs automatically:

.single-post .entry-content p {
    line-height: 1.65;
}

.page-template-landing-page p {
    line-height: 1.5;
}

Responsive adjustment for mobile (smaller screens benefit from slightly tighter spacing):

@media (max-width: 768px) {
    p {
        line-height: 1.5;
    }
}

Step 3: Resolve Specificity Conflicts

If your CSS is not taking effect, a theme or plugin rule with higher specificity is overriding it. Diagnose this in DevTools by inspecting the element and checking which rule is struck through in the Styles panel.

To increase specificity without resorting to !important, scope your selector more precisely:

body .site-content .entry-content p {
    line-height: 1.6;
}

Use !important only as a last resort, as it creates a maintenance debt that compounds with every future CSS addition:

p {
    line-height: 1.6 !important; /* Use only if specificity cannot be resolved otherwise */
}

Method 4: Typography Plugins

Plugins are the right choice when you need a non-code interface, when you are managing a site for a client who must maintain it independently, or when you need advanced OpenType typographic features beyond line-height.

Plugin Comparison

Installing and Configuring Advanced Editor Tools

Advanced Editor Tools (formerly TinyMCE Advanced) is the most widely deployed option for adding line spacing controls directly into the block editor toolbar.

1. Go to Plugins > Add New, search for Advanced Editor Tools, and click Install Now, then Activate.
2. Navigate to Settings > Advanced Editor Tools.
3. In the Block Editor tab, enable the Line Height toolbar button by dragging it into the active toolbar row.
4. Return to any post or page. Select a Paragraph block. The line height control now appears in the block toolbar.

Using WP Typography for Global Rules

WP Typography applies typographic rules at the PHP rendering level, meaning it modifies the HTML output before it reaches the browser. This is useful for enforcing consistent line-height across all text without touching individual blocks.

After activation, go to Settings > WP Typography and locate the CSS Classes section to apply line height rules scoped to specific containers.

Pitfall: WP Typography's text processing can conflict with caching plugins if full-page caching is enabled. Always test after activating it on a staging environment, particularly if your hosting stack includes server-level caching — a common configuration on Dedicated Servers running Nginx with FastCGI cache.

Full-Site Editing (FSE) and theme.json: The Modern Approach

For sites using a block theme (Twenty Twenty-Three, Twenty Twenty-Four, Kadence FSE, etc.), the canonical method for setting default line-height values is theme.json. This file defines design tokens that propagate through the entire block editor UI.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "typography": {
      "lineHeight": true,
      "fluid": true
    }
  },
  "styles": {
    "typography": {
      "lineHeight": "1.6"
    },
    "elements": {
      "heading": {
        "typography": {
          "lineHeight": "1.25"
        }
      },
      "h1": {
        "typography": {
          "lineHeight": "1.1"
        }
      }
    }
  }
}

Values set in styles within theme.json are output as CSS custom properties and applied via the :root selector, giving them broad reach while remaining overridable at the block level. This is the most maintainable architecture for production WordPress sites in 2024 and beyond.

If you are building or managing a custom block theme on a server you control — such as a VPS with cPanel — editing theme.json directly via the file manager or SSH is faster and more reliable than using the Customizer for typography tokens.

Choosing the Right Method: Decision Matrix

Technical Checklist Before Going Live

• Confirm line-height values are unitless or use em — avoid px for inherited properties.
• Validate WCAG 2.1 SC 1.4.12: body text line-height must be at least 1.5.
• Inspect computed styles in DevTools to confirm no higher-specificity rule is overriding your values.
• Test on at least two mobile breakpoints — line-height that works at 1440px can feel excessive at 375px.
• If using a caching plugin (WP Rocket, W3 Total Cache), purge the cache after any CSS change.
• For sites hosted on Shared Web Hosting, use the Additional CSS panel rather than editing theme files directly to avoid changes being overwritten on theme updates.
• Document all custom line-height values in a style guide or comment block within your CSS file.
• If deploying a custom child theme or theme.json on a managed server, ensure file permissions on theme.json are set to 644 to prevent write errors from the WordPress file editor.

FAQ

Does changing line height in the Gutenberg editor affect mobile devices?

Yes. Values set via the Block Editor's Line Height field are applied as inline styles with no media query, so they apply at all viewport widths. For responsive control — different values on mobile versus desktop — you must use custom CSS with @media queries or a block plugin like Kadence Blocks that exposes per-breakpoint typography controls.

Why is my custom CSS line-height not applying even though I added it to Additional CSS?

The most common cause is a theme or plugin stylesheet rule with higher CSS specificity targeting the same element. Open DevTools, inspect the paragraph element, and look for struck-through rules in the Styles panel. Increase your selector's specificity (e.g., .entry-content p instead of p) or, as a last resort, add !important.

What is the difference between line-height: 1.6 and line-height: 1.6em?

A unitless value like 1.6 is inherited as a ratio — child elements multiply their own font size by 1.6. A value of 1.6em is computed relative to the parent's font size and then inherited as a fixed pixel value, which can cause misaligned spacing in nested elements with different font sizes. Always use unitless values for line-height in body copy.

Can I set different line heights for the editor view and the front end?

Yes. WordPress applies editor styles separately from front-end styles. To target the block editor canvas, enqueue a stylesheet using the enqueue_block_editor_assets hook and scope your rules to .editor-styles-wrapper p. This ensures the editing experience matches the published output visually.

Will adjusting line height break my site's layout or cause Cumulative Layout Shift?

Changing line-height on static text elements does not cause CLS on its own. CLS is triggered when elements shift position after initial render — typically caused by web fonts loading and swapping. If you are using Google Fonts or a custom web font, pair your line-height adjustments with font-display: swap and preload hints to minimize layout instability during font load. Hosting your fonts locally — straightforward on a VPS Hosting environment — eliminates the third-party font latency that most commonly triggers CLS alongside typography changes.